1

I'm learning nextjs and read in a few places that nextjs only prerenders for the first page(How is server-side rendering compatible with single-page applications?)

But when I use the Link tag and navigate to another page, and view page source, I see it has the html elements that are built using data from getServerSideProps, but in network tab there's no request for html file, only a get request that receives json data for the page. So if it prerenders only for the first page / on refresh, how does the view page source have the html elements created using react?

Abhi
  • 1,512
  • 2
  • 22
  • 46

1 Answers1

1

NextJS does pre-render to accelerate loading HTML from the server and so the SEO score, but when you are already on the website you do not need to load the whole new page HTML again, it will only un React to change components displayed.

You can see in the network tab on your browser this happening, the first page is fully loaded while the others load a .json file containing informations on ho to change the current page.

Also when you get to see the page source code you make a new request so you get the HTML for the new URL.

Avior
  • 481
  • 6
  • 18
  • if I've imported some package in the page that is viewed later from clicking `Link`, when does that package load into browser – Abhi Mar 01 '22 at 10:04
  • I would depends on the way you load it, I never used this function but you can dynamically load component https://nextjs.org/docs/advanced-features/dynamic-import but components are loaded at the first JS load – Avior Mar 02 '22 at 12:12