Before we talk about data fetching, let’s talk about one of the most important concepts in Next.js: Pre-rendering.
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. (This process is called hydration.)
You can check that pre-rendering is happening by taking the following steps:
You should see that your app is rendered without JavaScript. That’s because Next.js has pre-rendered the app into static HTML, allowing you to see the app UI without running JavaScript.
Note: You can also try the above steps on
localhost
, but CSS won’t be loaded if you disable JavaScript.
If your app is a plain React.js app (without Next.js), there’s no pre-rendering, so you won’t be able to see the app if you disable JavaScript. For example:
Here’s a quick graphical summary:
Next, let’s talk about two forms of pre-rendering in Next.js.
Quick Review: Which of the following is not a benefit of pre-rendering?