CSR, SSR or server components?
I have to create an application that is highly interactive, featuring many reusable components that can be configured in different ways within the UI. I'll be presenting data with various filters, charts, etc. I'm considering which approach to use, and CSR (with Vite + React Router) seems to make the most sense. Am I thinking along the right lines? Initial loading isn't as important as ensuring smooth interaction with the application later on.
6 Replies
I think you've got it right, CSR is definitely better than SSR if all your components are client-side anyway
Theo actually went over this recently, with t3.chat - although it's built on Next.js, he ended up making a React Router app within because it made more sense.
just watched theo's vid on the chat app
i'm not too deep into the new features of server components and nextjs yet, so i'm having a bit of trouble undestanding why theo had to use react router to make a remix-like experience
isn't just using
use client enough? (it's what i do for an app that's 95% client-side)
am i missing something?Now that you mention it, I'm not really sure. He did mention he was using Next.js rather than just Vite and React Router because it let him move faster, but I guess the only benefits to using React Router is more control over the routing?
i see, makes sense then
Yes, I the RR7 routing system does not trigger server requests when navigating through “client side routes” because they’re only ever running on the client, also the whole core app requires client side interaction, so it makes sense
Even if you use “use client” in 95% of your components you’re effectively still routing through Next.js router, provoking pages to render on the server before switching to them (when they’re not static), and also the next.js Link component prefetches all routes that are visible in the viewport under the hood
It depends on the data you are working with and how you design it to be. in general, either way would work however here's a bit of my own take.
The Easy Path
CSR/SPA. You get to do classic react, not a lot of the "hassle". If you've never used RSC before, it could give you crap for a while until you've figured out how things work. I would personally recommend to just use SPA, unless you are willing to pick things up during the project.
RSC. In my opinion, this would do you well if you need to fetch a lot of data/queries. Done correctly, with pre-fetch and proper decision on which should be SC and CC, it would give you very good performance overall.
I think the later would give you better/smoother interaction with the application (assuming proper implementation. But if you need to re-fetch / require interactions that fetch from an API, the first method is easier and faster.
Correct me if I'm wrong tho, would appreciate it.