Static rendering with Next.js

Next.js is a React framework for creating full stack web applications. What this means is that it provides tools and opinions that will help developers be more productive in the short and long term.

Next.js includes a filesystem router for “pages”, a set of routing primitives for React, support for client and server rendering, and data fetching primitives, among others.

The features of Next.js we’ll focus on are the static site generation (SSG) ones. This type of rendering methodology resembles server rendering but mitigates some of its drawbacks, since the rendering pass is done at build time instead of at request time.

Figure 5.6: A sequence diagram for a pre-rendered/static site generation use case

Now that we’ve looked at how static site generation changes the data flow when a user requests a website, we’ll look at Next.js automatic static generation.