Next.js Concepts

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.)

Pre-rendering Techniques

Static Rendering

• A page without data, like this one
• Generates full HTML at build time

SSG (Static Site Generation)

• A page with data
• Generates full HTML + JSON at build time
• Uses getStaticProps to fetch data at build time
• Example

SSR (Server-side Rendering)

• A page with data
• Generates full HTML at runtime for each request
• Uses getServerSideProps to fetch data at runtime
• Example

CSR (Client-side Rendering)

• A page with data
• Can be mixed with Static Rendering, SSG or SSR
• Generates partial HTML at build time for static and SSG pages
• Fills “holes” using JavaScript on the client
• Example

Tip: Test different rendering techniques by slowing down your network in Chrome DevTools, and observe FCP (First Contentful Paint) & TTI (Time To Interactive)