Next.js Discord

Discord Forum

Having questions about SSR in App router

Answered
Schneider’s Smooth-fronted Caima… posted this in #help-forum
Open in Discord
Schneider’s Smooth-fronted CaimanOP
Hey guys,
I'm learning nextjs, But I don't get about SSR
I mean Ik how it works
But how can I ensure it works in app router? why isn't there any SSR info on App router in the docs?
How does SSR work in app router?
Can anybody help me with this?
Answered by B33fb0n3
SSR means Serverside rendering. So instead of sending all the stuff to the client and the client compiles it to a website, the server already build everything together and send it to the client. The client then just hydrates it. So in general terms: when using SSR, your page loads faster. When using the app router, SSR is enabled for all pages
View full answer

17 Replies

@Schneider’s Smooth-fronted Caiman Hey guys, I'm learning nextjs, But I don't get about SSR I mean Ik how it works But how can I ensure it works in app router? why isn't there any SSR info on App router in the docs? How does SSR work in app router? Can anybody help me with this?
B33fb0n3
SSR means Serverside rendering. So instead of sending all the stuff to the client and the client compiles it to a website, the server already build everything together and send it to the client. The client then just hydrates it. So in general terms: when using SSR, your page loads faster. When using the app router, SSR is enabled for all pages
Answer
So that means I wouldn't have to setup or do anything additional for using it?
What if I want it to be client side rendered (only some parts)? (GSR)
generateStaticParams and functions like this are depecrated right?
@Schneider’s Smooth-fronted Caiman Ohhh so 100% its ssr?
B33fb0n3
you can take a look into your network tab. If there is content (see attached) it's SSR. If it's just a react app it would look like this:

React example if you want to see it yourself: https://yog9.github.io/SnapShot/#/SnapScout/mountain
@Schneider’s Smooth-fronted Caiman What if I want it to be client side rendered (only some parts)? (GSR)
B33fb0n3
import it with lazy loading and skipping SSR. Then it's fully rendered on the client
@Schneider’s Smooth-fronted Caiman generateStaticParams and functions like this are depecrated right?
B33fb0n3
no why? Both are different things: SSR is "rendering" and generateStaticParam is "caching". So one renders something and the other saves something
@B33fb0n3 import it with lazy loading and skipping SSR. Then it's fully rendered on the client
Schneider’s Smooth-fronted CaimanOP
Nice (but this is useless right? why do I have to want to use CSR when I have SSR?)
@Schneider’s Smooth-fronted Caiman Nice (but this is useless right? why do I have to want to use CSR when I have SSR?)
B33fb0n3
Some libraries only work when they are fully rendered on client
Schneider’s Smooth-fronted CaimanOP
Got it
Btw any tips about how to know what to use when?
Like when should I use GenerateStaticParams or other functions?
Like any video or smth
@Schneider’s Smooth-fronted Caiman Like when should I use GenerateStaticParams or other functions?
B33fb0n3
I think the docs are a very good guide. For generateStaticParams they say:
"The generateStaticParams function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time."

So to answer your question "when" to use what, take a look at their description. For generateStaticParams it says: use them when you have "dynamic route segments" and what "to statically generate routes at build time" for them
Schneider’s Smooth-fronted CaimanOP
Thank you so much
I think I need to read the docs more carefully😅🙏
B33fb0n3
sure thing