You don't want to server-side render your Next.js app

What is Next.js?

Client-side rendering (CSR)

Client-side rendering (CSR)

CSR pros and cons

Pros

Cons

• Bad for SEO
• Bad initial page load time

Server-side Rendering (SSR)

SSR pros and cons

Pros

Cons

• Server is required
• High server workload
• Higher maintenance costs

Static-site generation (SSG)

SSG pros and cons

Pros

Cons

• No dynamic content on the server-side
• Relies on CSR for dynamic content
• Need to rebuild and deploy the whole site on each page change*

*can be fixed via incremental static regeneration (ISR)

Client-side rendering

Server-side rendering

Static site generation

Incremental Static Regeneration (ISR)

Why is SSR so bad?

React SSR is not really efficient (yet?)

So go serverless!

Let's say we have to handle 100  SSR requests per second (259,200,000 requests per month).

The average execution time is 300ms.

We can use the cheapest RAM option (128MB).

We require around 100kb of bandwidth per execution.

Play smart

depending on the scenario

Example scenario: social network

Feed page features

• Highly dynamic, custom for each user
• Doesn't need SEO
• A lot of static assets
• One common page for every user

Feed page features

• Highly dynamic, custom for each user
• Doesn't need SEO
• A lot of static assets
• One common page for every user

Single post page

• Large amount of pages
• Needs good SEO
• Big static assets
• One single page for each post

Single post page

• Large amount of pages
• Needs good SEO
• Big static assets
• One single page for each post

Account settings page

• Needs high security
• Doesn't need SEO
• Protected under authentication

Account settings page

• Needs high security
• Doesn't need SEO
• Protected under authentication

Example scenario: e-commerce

Homepage/storefront

• Needs high performances
• Needs awesome SEO
• Content changes from time to time

Homepage/storefront

• Needs high performances
• Needs awesome SEO
• Content changes from time to time

Single product page

• ~250 products
• Needs awesome SEO
• Needs great performances
• Needs some dynamic data (stock quantity etc.)

Single product page

• ~250 products
• Needs awesome SEO
• Needs great performances
• Needs dynamic data (stock quantity etc.)

Account settings page

• Needs high security
• Doesn't need SEO
• Protected under authentication

Account settings page

• Needs high security
• Doesn't need SEO
• Protected under authentication

Lesson learned #1

Content is dynamic and depends on the user?

Generate a static page at build time and render the dynamic data on the client-side.

Lesson learned #2

Content is static and SEO is important?

Generate a static page at build time and adopt ISR when needed.

Lesson learned #3

Content is static, but the pages gets created dynamically

Server-side render your pages and put your webapp behind a cache.

In any case, you want to avoid

SSR at all costs

https://rwnjs.com/order/amazon

https://rwnjs.com/order/packt

Adapted from

Real-World Next.js