NextJS runs at build time on server both Client and Server components?

[amscu-dev]

Summary

Observation about Next.js build-time behavior

I’ve observed that Next.js runs both Client and Server components at build time in a specific sense. For Server components, this means full HTML can be generated at build time for static pages (SSG) or at request time for SSR. For Client components, Next.js generates markup at build time.

I’ve noticed that this behavior is particularly relevant when a user accesses a page directly via URL (direct navigation or refresh). In that case, Next.js provides pre-rendered markup, essentially performing SSR at build time so the browser receives something ready to hydrate.

On the other hand, during programmatic navigation (client-side routing via next/link or router.push), Next.js only delivers the RSC (React Server Components) payload, and the Client components runs on browser side, and so, build the ui client side.

If I understand correctly?(Idk 100%), my question is: how does Next.js evaluate Client components at build time during SSR?

Specifically:

Does it use the values from useState at build time?

How does it handle useEffect or useLayoutEffect?

Which hooks are not supported at build time or during SSR for Client components?

Additional information

No response

Example

No response

[icyJoseph]

This write up, reactwg/server-components#4 kind of covers your question and I'll try address some of your other questions.

Does it use the values from useState at build time?

The initial value yes.

How does it handle useEffect or useLayoutEffect?

In SSR, useEffect and useLayoutEffect do nothing. In fact, useLayoutEffect used to print a warning about being a no-op during SSR, meaning it didn't run at all. This distinction was needed because, unlike useEffect which runs after painting, useLayoutEffect typically runs before letting the browser paint, but what does that even mean in SSR!? it just didn't run, but you might have expected it to - facebook/react#14363 (comment)

Which hooks are not supported at build time or during SSR for Client components?

Well, if the hook needs runtime data, infamously Next.js' useSearchParams, then it can't really work well in an SSR run. React's own hooks all are compatible with SSR, in the sense that they don't break things.

And to close:

how does Next.js evaluate Client components at build time during SSR?

If you read the link above, facebook/react#14363 (comment), then you'll see that, Next.js and any SSR React framework, has always done this! Client Components are not the new thing, Server Components are. React has APIs, https://react.dev/reference/react-dom/server, to collect the initial snapshot of a tree and generates the HTML for it, that later can be hydrated in the browser.

[amscu-dev]

Thanks, mate! This confirms all my assuptions. Yes, i understand useSearchParams , and the reason that all things that eventually will interact with some runtime data, will throw a promise during the initial ssr render, and that promise can be handled within a suspense boundary.

Have a nice day 😀