SSG vs SSR vs CSR - What to use and when to use it?
Answered
Manx posted this in #help-forum
ManxOP
I understand the base concepts of SSG, SSR and CSR. But what I cannot wrap around my head is, how can I decide when I need which of these rendering methods?
For SSG it might be pretty straight forward. For example, a Portfolio website, should be rendered with SSG as it doesn't (probably) include dynamic data which is frequently updated. Or some marketing / product landing page.
SSR vs CSR is what really confuses me.
SSR -> Good for SEO, fast initial page load performance and speed; Bad because server needs to do the computation on each individual request
CSR -> Good for speed (after JS is loaded), no extra computational requests to server; Bad for SEO, cannot work if JS is disabled.
But - how to understand when to differentiate between these two? When I need the SSR option and when CSR? In all examples I've found, it mentions that SSR is good for pages that have dynamic data that is frequently updated. Okay, but so is CSR.
The only place I can think of for CSR usage would be protected web applications e.g. user dashboards as we don't care about SEO here.
But what about SSR?
Can anyone give precise examples which to use in what sort of web apps? Like (CSR -> User Dashboards; SSG -> Portfolios) etc.
========================
And on top of all that, SSR/SSG/CSR is mentioned in the "pages" router documentation. And the new "app" router documentation talks only about Serverside and Clientside components...?
Thanks
For SSG it might be pretty straight forward. For example, a Portfolio website, should be rendered with SSG as it doesn't (probably) include dynamic data which is frequently updated. Or some marketing / product landing page.
SSR vs CSR is what really confuses me.
SSR -> Good for SEO, fast initial page load performance and speed; Bad because server needs to do the computation on each individual request
CSR -> Good for speed (after JS is loaded), no extra computational requests to server; Bad for SEO, cannot work if JS is disabled.
But - how to understand when to differentiate between these two? When I need the SSR option and when CSR? In all examples I've found, it mentions that SSR is good for pages that have dynamic data that is frequently updated. Okay, but so is CSR.
The only place I can think of for CSR usage would be protected web applications e.g. user dashboards as we don't care about SEO here.
But what about SSR?
Can anyone give precise examples which to use in what sort of web apps? Like (CSR -> User Dashboards; SSG -> Portfolios) etc.
========================
And on top of all that, SSR/SSG/CSR is mentioned in the "pages" router documentation. And the new "app" router documentation talks only about Serverside and Clientside components...?
Thanks
Answered by fuma
SSG is only for static pages that never change (landing page for example)
ISR is for blogs, which is updated sometimes but similar to SSG
SSR, the default of Next.js. Your data is fetched and used to pre-rendered the page on the server (at the request time)
Actually all your dynamic rendered pages are supposed to be SSR in Next.js App Router, due to React Server Component
Hence, it's widely used in simple applications, like a small admin panel. You no longer need to use libraries like React Query and add skeletons to your UI.
CSR is clear, you only render and fetch data from client, so it only suits with complex applications, like dashboards/chat app as you mentioned
ISR is for blogs, which is updated sometimes but similar to SSG
SSR, the default of Next.js. Your data is fetched and used to pre-rendered the page on the server (at the request time)
Actually all your dynamic rendered pages are supposed to be SSR in Next.js App Router, due to React Server Component
Hence, it's widely used in simple applications, like a small admin panel. You no longer need to use libraries like React Query and add skeletons to your UI.
CSR is clear, you only render and fetch data from client, so it only suits with complex applications, like dashboards/chat app as you mentioned
6 Replies
SSG is only for static pages that never change (landing page for example)
ISR is for blogs, which is updated sometimes but similar to SSG
SSR, the default of Next.js. Your data is fetched and used to pre-rendered the page on the server (at the request time)
Actually all your dynamic rendered pages are supposed to be SSR in Next.js App Router, due to React Server Component
Hence, it's widely used in simple applications, like a small admin panel. You no longer need to use libraries like React Query and add skeletons to your UI.
CSR is clear, you only render and fetch data from client, so it only suits with complex applications, like dashboards/chat app as you mentioned
ISR is for blogs, which is updated sometimes but similar to SSG
SSR, the default of Next.js. Your data is fetched and used to pre-rendered the page on the server (at the request time)
Actually all your dynamic rendered pages are supposed to be SSR in Next.js App Router, due to React Server Component
Hence, it's widely used in simple applications, like a small admin panel. You no longer need to use libraries like React Query and add skeletons to your UI.
CSR is clear, you only render and fetch data from client, so it only suits with complex applications, like dashboards/chat app as you mentioned
Answer
ManxOP
@fuma Thanks, that clears out things a little bit.
@fuma SSG is only for static pages that never change (landing page for example)
ISR is for blogs, which is updated sometimes but similar to SSG
SSR, the default of Next.js. Your data is fetched and used to pre-rendered the page on the server (at the request time)
Actually all your dynamic rendered pages are supposed to be SSR in Next.js App Router, due to React Server Component
Hence, it's widely used in simple applications, like a small admin panel. You no longer need to use libraries like React Query and add skeletons to your UI.
CSR is clear, you only render and fetch data from client, so it only suits with complex applications, like dashboards/chat app as you mentioned
but is dashboard which shows analytics and information considered small admin panel and i should use SSR and RSC?
for example i have an application and i have dashboard auth , show products add edit delete products add them to cart
do i have to use one for some cases and other methods for the rest?
do i have to use one for some cases and other methods for the rest?
@codecret but is dashboard which shows analytics and information considered small admin panel and i should use SSR and RSC?
in general we recommend cilent-side data fetching for complex applications like dashboards, so that you can use libraries like React Query to handle advanced revalidations/caching stuff