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

Even though Next’s recommendation is to use Static Rendering, each approach comes with its pros and cons.

Server-Side Rendering (SSR):

Pros

• Can handle dynamic routes on the fly
• Rendered page will always be up-to-date

Cons

• Can be slow if there is heavy processing to do since the Client has to wait for each page after it makes a request
• Can’t be cached by a CDN

Static Rendering (SR):

Pros

• Consistently very fast and performant

Cons

• Cannot handle dynamic routes if you don’t know all the URL’s ahead of (build) time

Client-Side Rendering (CSR):

Pros

• No real pros that I found in the docs. CSR…