Can you guys explain why SSG still runs on use client components with NextJS?
I always thought
use client meant the component runs on the client side. But now I'm unsure what that means as I recently got an error saying components using useSearchParams() should be wrapped in Suspense react components to make sure that NextJS skips SSG'ing the component.
Is there a better way of stopping the SSG & why does SSG run on client components? I always thought if I add use client then that means that code is being executed in the browser only
Thanks!26 Replies
So from what I understand so far is that SSG is just a step in the build process that converts the function calls ( .createDocument(<div>..) ) to HTML ( <div> ) and it tries this for all files. If it fails it moves on / pushes an error
This question is another example of “use client” and “use server” being horrible names
Basically it just works the same as before server components came out. The components get ran, if they don’t need any special data or anything then they can get turned in SSG’d components. I’m not sure if react even goes into SSG components.
Why do you what your pages that have been determined to be SSG’d to not be? Is it wrong about something? Super curious.
But yeah, use server has nothing to do with SSG-ness I don’t think.
@Michael
"use client" means SSR, not SSG. "use server" is RSC.
Thanks for the reply @Nate . Not sure I fully understand.
Both client and server components get ran, if they don't need any extra data then they get SSG'd. Yep I get that.
I'm not sure if react even goes into SSG components -> What does this here mean?
I am having my useSearchParams() components being SSG'd, which they clearly should not be. Idk why stopping SSG here is in the application layer over the build layer.
use client means SSR? seriously? I thought it meant the component is rendered on the client completely
I thought all SSR with NextJS is now done via RSCI'm not sure if react even goes into SSG componentsAs in, if a route is declared as "SSG", then nextjs will run the react code on the server and only send down the html. I'm not sure if this is the case, but it's basically how you want to think about SSG. Where the code to generate the html is ran once at build time and the same html gets sent to every user Why
useSearchParams() is being ssg'd is a good question. No idea. But, on the docs it does say this:
If you are using search params for real use, check this out: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional
File-system conventions: page.js | Next.js
API reference for the page.js file.
If you are just using it to make it a dynamic route, then use one of the other things like
cookies()
Client components can be SSR'd, just like how they were before server components. nextjs runs the code on the server and sends down the result as the first bit of html. then, if you do have other server components, those can stream in later or whateverWhat is request time? That is still on the server rather than the client?
This is the part that confuses me
SSR is just rendering on the server i.e converting the javascript that was generated from JSX into HTML
Client components can be SSR'd in that sense, via SSG
@Nate How would you define client components then rather than server ones?
They both go through SSR ( through SSG )
Under the hood what is changing from the flow when I say use client
HTML being "generated at request time" === SSR
Each requests runs the javascript on the server to generate the html for the request
Yes, but it is also running the javascript to generate the data in the first place
I can't answer this question well enough to explain it. I'm not a nextjs user, I just know a bit because I used to use it before app router and watching theo's videos. I will say, their docs after I reviewed them to answer your question better, are still absolutely atrocious and do not explain very well at all what you're asking
there is no SSG i don’t think you get it
SSG is Static Site Generation
SSR is Server Side Rendering
“use client” is the traditional SSR, ie render once on server, send html, hydrate on client
“use server” uses RSC, which are also rendered on server, but not “hydrated” on client - any reactivity involves server requests
RSC can also render at build but i dont think Next does this (i dont actually use next tho)
But there is SSG, it is part of the build process
The render once on server is SSG during build, then send html and hydrate on client
And how are RSC generated, this is just SSG no?
I have watched theo's videos and looked at their docs, unsure too ):
no
this is SSR
SSG means it's rendered once during the build step (no server involved)
SSR means it's rendered on the server, in the runtime, at request time. It gets rendered as many times as the route is hit
"use client" and "use server" don't determine whether a page gets SSG'd or SSR'd
By default next will try to SSG your page.
If you want SSR instead of SSG you have to use one of the APIs listed here.
What "use client" does is indicate to Nextjs that the Javascript code in the component needs to be sent over and ran in the browser. Without that it would run only on the server, the html resulted from it would be sent over to the browser but without the js
What "use server" does is create endpoints on the server
But why does it still need to be SSR'd if it's been SSG'd
there's no SSR'ing the SSG'd page. it's one or the other, not both
SSG and SSR do essentially the same thing: render JSX into HTML
with the difference beeing that SSG occurs at build time, which means every user will be served the same HTML
while SSR occurs at request time, allowing for different content to be served
so by nature, SSG'd content cannot be SSR'd since there is no JSX to render, it has already been rendered to HTML long before the request was received
Yep makes sense, converting the document.createElement('div'); to <div>.
I don't get it, so what do
use client and use server determine then?
So SSR is only with these APIs:
other than that it is all SSGI dont get this then, why is this saying rendered on the client side, if its rendered on the server with SSG/SSR @Zougui
because it's rendered on the server, the user is served static HTML. because it's just HTML there's no interactions possible. so behind the scenes, React renders everything again in the client with the interactions, and reconciles everything with the already existing HTML that was served from the server. that process is called hydration
Yes makes sense, so
use client determines that we have interactions and need that extra react re-render
Without use client we don't get hydration?yes
So
use client could also be called use hydration and that might make more sense
Ok, thank you Zougui & everyone else!yeah "use client" and "use server" aren't good naming
many people, theo included, have pointed it out
@Zougui How do you know all this? Just from watching a bunch of theo's vids?
yeah
https://nextjs.org/conf if you are interested, stuff like these talks can teach you a lot
Next.js Conf by Vercel
Join us at Next.js Conf Oct 24th 2024 for workshops with Next.js experts, product demos, and more. Register today.
I'll watch through. Are there any blogs u read as well?