"use client" still causes statically generated page
Answered
Skipjack tuna posted this in #help-forum
Skipjack tunaOP
I am testing something currently and when I put "use client" at the top of my page.tsx, Next.js still shows me that this page was generated statically when running "npm build". Why? How can a page that is a whole client page / client component still use a server side rendering approach (SSG)?
Answered by B33fb0n3
that is a whole client pagewell... it isn't clientside. Yes you marked it as clientside and yes it will be hydrated clientside. But it will still be SSR. If you want to turn that off use lazy loading with SSR skipping.
Keep in mind, that you don't want to do that to just make a page dynamic. For that you want to use:
export const dynamic = 'force-dynamic'7 Replies
@Skipjack tuna I am testing something currently and when I put "use client" at the top of my page.tsx, Next.js still shows me that this page was generated statically when running "npm build". Why? How can a page that is a whole client page / client component still use a server side rendering approach (SSG)?
that is a whole client pagewell... it isn't clientside. Yes you marked it as clientside and yes it will be hydrated clientside. But it will still be SSR. If you want to turn that off use lazy loading with SSR skipping.
Keep in mind, that you don't want to do that to just make a page dynamic. For that you want to use:
export const dynamic = 'force-dynamic'Answer
@B33fb0n3 > that is a whole client page
well... it isn't clientside. Yes you marked it as clientside and yes it will be *hydrated* clientside. But it will still be SSR. If you want to turn that off use lazy loading with SSR skipping.
Keep in mind, that you don't want to do that to just make a page dynamic. For that you want to use:
tsx
export const dynamic = 'force-dynamic'
Skipjack tunaOP
I think exactly that concept gets me quite confused. I thought that SSG is an approach that solely happens on the server. When using "use client", CSR gets used. So how can a page be rendered on the client while simultaneously be rendered on the server via SSG?
@Skipjack tuna I think exactly that concept gets me quite confused. I thought that SSG is an approach that solely happens on the server. When using "use client", CSR gets used. So how can a page be rendered on the client while simultaneously be rendered on the server via SSG?
you can load the component 100% on the client when you skipping SSR as said [(read here)](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr):
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })@B33fb0n3 you can load the component 100% on the client when you skipping SSR as said [(read here)](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr):
tsx
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
Skipjack tunaOP
Ah, I see! So unless I'd use the code pattern you just posted, the default approach for "use client" in Next.js would be using SSG for all the basic static HTML in there, and then only the necessary JavaScript logic gets hydrated on the client side?
@Skipjack tuna Ah, I see! So unless I'd use the code pattern you just posted, the default approach for "use client" in Next.js would be using SSG for all the basic static HTML in there, and then only the necessary JavaScript logic gets hydrated on the client side?
that sounds right, yea. When only using
'use client' the page will be loaded via the server and only on the client hydrated@Skipjack tuna I think exactly that concept gets me quite confused. I thought that SSG is an approach that solely happens on the server. When using "use client", CSR gets used. So how can a page be rendered on the client while simultaneously be rendered on the server via SSG?
SSR and SSG is just a rendering method at the build phase. In either case of SSR and SSG, you can still contain a mix of server components and client components.
Having "use client" doesn't change the fact if that route will be statically rendered or dynamically rendered per request time
Having "use client" doesn't change the fact if that route will be statically rendered or dynamically rendered per request time
So how can a page be rendered on the client while simultaneously be rendered on the server via SSG?Simple. The server bundles and minifies all the js requred for the "page can be rendered on the client" so that when user access that route, it will be static meaning it doesn't require further
Request object processing but already have all the client interactivity on the get go after build.