Dinh Hoang Duy

Posted on Apr 7

Good vs Bad Next.js Rendering: How to Choose the Right Strategy

#nextjs #ssr #isr #react

It is duythenights again! Great to have you back.

Choosing the right rendering strategy in Next.js is absolutely critical for your app's performance. Honestly, selecting the wrong one can lead to painfully slow page loads, sky-high server costs, and a pretty poor user experience—none of which we want!

But don't worry, I've got you covered. This cheat sheet is here to simplify the whole process. Let's break down exactly when to use each method effectively so you can stop second-guessing your architecture and start building faster.

Quick Comparison Table

Strategy	Timing	Best Use Case	SEO	Performance
Static Site Generation (SSG)	Build Time	Blogs, Documentation	Excellent	Fastest
Server-Side Rendering (SSR)	Request Time	Personalized Feeds	Excellent	Slower
Incremental Static Regeneration (ISR)	Background	E-commerce, News	Excellent	Fast
Client-Side Rendering (CSR)	Browser Runtime	Search Filters, Chat	Limited	Fast (Post-load)

Decision Logic: Good vs Bad Practice

Static Site Generation (SSG)

Good: Using SSG for a blog post that stays the same for all users.
Bad: Rebuilding your entire site every time you fix a single typo in a post.

Server-Side Rendering (SSR)

Good: Using SSR for a banking dashboard where data must be 100% current and private.
Bad: Using SSR for a public "About Us" page. This adds unnecessary latency and server load.

Incremental Static Regeneration (ISR)

Good: Using ISR for a product catalog with 10,000 items. It keeps the site fast while updating prices in the background.
Bad: Setting a revalidation timer of 1 second for data that only changes once a week.

Implementation (Next.js App Router)

1. The Good Default: Static Site Generation

Next.js caches fetch requests by default. This is the most cost-effective and fastest method.

async function Page() {
  const data = await fetch('[https://api.example.com/data](https://api.example.com/data)'); 
  return <div>{data.title}</div>;
}

2. The Dynamic Choice: Server-Side Rendering

Use this only when data must be fetched at the exact moment of the request.

async function Page() {
  const data = await fetch('[https://api.example.com/data](https://api.example.com/data)', { cache: 'no-store' });
  return <div>{data.user_balance}</div>;
}

3. The Balanced Choice: Incremental Static Regeneration

This allows you to update static content without a full site rebuild.

async function Page() {
  const data = await fetch('[https://api.example.com/data](https://api.example.com/data)', { 
    next: { revalidate: 3600 } // Updates every hour
  });
  return <div>{data.stock_level}</div>;
}

Summary Checklist

Good: Default to SSG whenever possible.
Good: Use ISR to scale dynamic content efficiently.
Bad: Using CSR for content that needs to rank on search engines.
Bad: Overusing SSR for public pages that don't change per user.

DEV Community