Need help understanding Nextjs13 SSG, SSR
Answered
Prabhakar Yadav posted this in #help-forum
Hi everyone,
My understanding of SSG is that the pages are build at once (then hydrated) and only HTML are sent in production.
But why it that Next images still take time to load increasing LCP , too much thread work ??
and when I used something like next dynamic it improves TBT a little.
Why next dynamic should work if we serve static HTML content ?
can anyone help me understand these better ? and how to optimize my apps
My understanding of SSG is that the pages are build at once (then hydrated) and only HTML are sent in production.
But why it that Next images still take time to load increasing LCP , too much thread work ??
and when I used something like next dynamic it improves TBT a little.
Why next dynamic should work if we serve static HTML content ?
can anyone help me understand these better ? and how to optimize my apps
Answered by Asian paper wasp
My understanding of SSG is that the pages are build at once (then hydrated) and only HTML are sent in production.
The 1st part is correct, except for the hydration part. Static HTML (as well as the JS bundle) is generated at built time and is sent to the browser upon request. Yet, what about interactivities like
onClick? HTML doesn't have that. And the server side doesn't really understand "clicks". So what the browser does is run through the JS bundle once, and attach the event listeners accordingly. This happens on the client side and upon every request. And this is what hydration actually is.But why it that Next images still take time to load increasing LCP , too much thread work ??Because images are usually a separate HTTP request, and it is requested after the HTML is requested and (partially) read. And the differences will be even more noticeable if the image is lazy loaded.
Note that having images doesn't necessarily increase LCP, since the image is not necessarily the LCP element to begin with (e.g. it won't be if the image is not within viewport initially)
Why next dynamic should work if we serve static HTML content ?In the context of SSG,
next/dynamic delay the hydration part, since the corresponding JS has a dedicated bundle and is lazy loaded. But the dynamic element is still being pre-rendered.4 Replies
Asian paper wasp
My understanding of SSG is that the pages are build at once (then hydrated) and only HTML are sent in production.
The 1st part is correct, except for the hydration part. Static HTML (as well as the JS bundle) is generated at built time and is sent to the browser upon request. Yet, what about interactivities like
onClick? HTML doesn't have that. And the server side doesn't really understand "clicks". So what the browser does is run through the JS bundle once, and attach the event listeners accordingly. This happens on the client side and upon every request. And this is what hydration actually is.But why it that Next images still take time to load increasing LCP , too much thread work ??Because images are usually a separate HTTP request, and it is requested after the HTML is requested and (partially) read. And the differences will be even more noticeable if the image is lazy loaded.
Note that having images doesn't necessarily increase LCP, since the image is not necessarily the LCP element to begin with (e.g. it won't be if the image is not within viewport initially)
Why next dynamic should work if we serve static HTML content ?In the context of SSG,
next/dynamic delay the hydration part, since the corresponding JS has a dedicated bundle and is lazy loaded. But the dynamic element is still being pre-rendered.Answer
thanks for such a detailed explanation, so this means crawlers will get my site data in next/dynamic too ? Like I always had doubt if lazily loading a component affects my page SEO (crawling)
Also when I make all the components of a page dynamic, not even text comes for sometime and then CLS happens and all content comes like if its lazily loadin js then markdown should atleast come
Also when I make all the components of a page dynamic, not even text comes for sometime and then CLS happens and all content comes like if its lazily loadin js then markdown should atleast come
Asian paper wasp
so this means crawlers will get my site data in next/dynamic tooIn most cases, yes.
when I make all the components of a page dynamic, not even text comes for sometime and then CLS happens and all content comes like if its lazily loadin jsFirst of all, typically, it is not desired to lazy load everything.
This typically happens when you mark the component as client-side only using
dynamic(() => import('...'), { ssr: false }).Another reason is that the components failed to SSR and fallback to CSR.
But that case by case
oh, thanks alot