This is a curation of Next.js documentation, explanations, and advice. With a few code snippets and images to help along the way.
It focusses mainly on how the ‘server-side’ works in Next.js. Spoiler — it can do more than just render HTML
Currently, Next.js latest version is 9.5.
What is Next.js?
It’s a framework for building server-side rendered React applications.
But Next.js is not just for building an application’s frontend, because of its ‘server-side’, it can be used to build a full backend for the application as well.
How does the server-side work?
The ‘server-side’ in Next.js applications can be separated into two parts:
- The server-side rendering — how Next.js generates HTML on the server-side and sends it to the client
- The backend server — how Next.js supports a backend server and APIs
The server-side rendering (pre-rendering)
Pre-rendering = general term for rendering HTML before it is sent to the client
By default, Next.js will pre-render every page, but can do so in two different ways:
- Static generation
- Server-side rendering (SSR)
An application can use a combination of these methods, where the method used for a given page is determined by the page’s data requirements — see the ‘data fetching on the server-side’ section below for more details.
**Static generation **means that the HTML is generated once on the server at build-time, and this HTML is reused for each client request.
This is the recommended approach for performance reasons (better caching), however, it comes with some obvious limitations when it comes to fetching data for that page — the data can only be fetched during the application’s build process using the getStaticProps method.
This might be acceptable when the data being fetched does not change often, and/or in scenarios where the user does not always need the most updated data. But often it is crucial that the user is shown a current view of the data, meaning that static generation of pages cannot be used.
**Server-side rendering (SSR) **means that the HTML is generated on the server on each request for the page — the HTML is ‘dynamic’ rather than ‘static’ as it will depend on the data required.
#react #nextjs #server-side-rendering #javascript #javascript-tips
