NextJS: Static, Server-Side, and Client-Side Rendering

Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

In their article in February 2019, the “Great Brains” at Google laid out rather verbosely what they wanted to see from future web apps, and dangled the dog-treat of improved SEO & search rankings to those who adopted Server-Side or Static Rendering:

Broadly speaking, we would encourage developers to consider server rendering or static rendering over a full rehydration approach.

We’re going to look over each approach in this article and its practical implementation in Next.JS.

But first…

Terminology

Server-Side Rendering (SSR): Renders the app on the Server in response to each request, and then sends the hydrated HTML and Javascript back to the Client.

Static Rendering (SR): Renders the app at build time (e.g. when you run the npm run build command). Generally involves generating a static HTML page for every URL. This is NextJS’s default approach.

Client-Side Rendering (CSR): Renders the app on the Client in the browser at run time.

Pros and Cons