Next.js Lesson 15 – Rendering Strategies | Dataplexa

LESSON 15

Rendering Strategies

Compare SSG, SSR, ISR, and CSR to choose the perfect rendering approach for each NewsWave page based on performance requirements.

Next.js gives you four distinct ways to render your pages. Each strategy solves different problems. The NewsWave homepage might need real-time content updates. Article pages can be pre-built at deployment. Search results require fresh data on every request. Think of rendering strategies like different cooking methods. Static Site Generation is like meal prep — you cook everything Sunday and reheat during the week. Server-Side Rendering is like ordering takeout — fresh every time but you wait longer. Incremental Static Regeneration combines both — pre-cooked meals that get refreshed when ingredients expire. Client-Side Rendering is like cooking at the table — raw ingredients arrive first, then JavaScript cooks them in your browser. Unlike plain React which only does client-side rendering, Next.js handles the complexity of choosing when and where to render your components. Each strategy affects performance, user experience, and server costs differently.

Static Site Generation (SSG)

Static Site Generation builds your pages at deployment time. The HTML gets created once on Vercel's servers. Every user gets the exact same pre-built file. This happens before anyone visits your website. SSG works perfectly for content that changes rarely. NewsWave's About page, privacy policy, or evergreen articles benefit from this approach. The page loads instantly because the HTML already exists. No database queries run when users visit. No server processing happens. The tradeoff is freshness. If you publish a breaking news story, it won't appear on the homepage until you rebuild and deploy. This makes SSG ideal for content with predictable update cycles.

SSG - Build Time
SSR - Every Request
ISR - Revalidate
CSR - Browser Only

// NewsWave about page - perfect for SSG
export default function About() {
  return (
    <div>
      <h1>About NewsWave</h1> {/* Static content never changes */}
      <p>Your trusted source for tech news</p> {/* No database needed */}
    </div>
  )
}

// No getStaticProps needed for purely static content
// Next.js automatically uses SSG for pages without data fetching

What just happened?

Next.js detected this page has no data fetching and automatically chose SSG. The HTML gets built once at deployment. Users receive the pre-built file instantly. Try this: Add console.log statements — they only run at build time, never in the browser.

Server-Side Rendering (SSR)

Server-Side Rendering generates HTML on every request. Your Next.js server runs the code each time someone visits. Fresh data gets fetched from your database. The complete HTML page gets sent to the browser. SSR provides the freshest possible content. NewsWave's search results page needs this approach. Search queries change constantly. Results must reflect the latest articles. Users expect real-time accuracy when they search for "AI breakthrough." The cost is latency. Every request waits for server processing. Database queries add milliseconds. Complex logic increases response time. But users always see current data.

// NewsWave search results - needs fresh data every time
export default function SearchResults({ articles, query }) {
  return (
    <div>
      <h1>Search Results for "{query}"</h1> {/* Query changes per request */}
      {articles.map(article => ( {/* Results must be current */}
        <div key={article.id}>{article.title}</div>
      ))}
    </div>
  )
}

// getServerSideProps runs on every single request
export async function getServerSideProps(context) {
  const query = context.query.q || '' // Get search term from URL
  
  // Fetch fresh results from database on every request
  const articles = await searchArticles(query) // Real database call
  
  return {
    props: { articles, query } // Props get passed to component
  }
}

Terminal
$ curl localhost:3000/search?q=ai
Running getServerSideProps...
Searching database for "ai"...
✓ Found 15 articles, sending HTML

What just happened?

Every search request triggers getServerSideProps on the server. The database query runs fresh. HTML gets generated with current results. The browser receives a complete page. Try this: Change the search term — new results appear immediately without stale data.

Incremental Static Regeneration (ISR)

Incremental Static Regeneration combines SSG speed with SSR freshness. Pages start as static files. When content ages beyond your revalidate time, Next.js rebuilds them in the background. Users still get instant static files while fresh versions generate behind the scenes. ISR solves the NewsWave homepage challenge. Breaking news needs updates within minutes. But you can't afford slow SSR performance for every visitor. ISR serves cached HTML instantly and updates it every 60 seconds. The magic happens automatically. The first user after revalidation time gets the cached version while Next.js builds a fresh one. Subsequent users receive the updated content. Nobody waits for builds.

// NewsWave homepage - needs speed AND freshness
export default function HomePage({ featuredArticles }) {
  return (
    <div>
      <h1>Latest News</h1> {/* Updated every 60 seconds */}
      {featuredArticles.map(article => ( {/* Fresh but fast */}
        <article key={article.id}>{article.title}</article>
      ))}
    </div>
  )
}

// ISR configuration - revalidate every 60 seconds
export async function getStaticProps() {
  const featuredArticles = await getFeaturedArticles() // Database call at build + revalidate
  
  return {
    props: { featuredArticles },
    revalidate: 60 // Rebuild page every 60 seconds maximum
  }
}

Terminal
User visits homepage (cached, instant)
⏰ 60 seconds passed - triggering rebuild
Fetching fresh articles in background...
✓ New version ready for next visitors

What just happened?

The homepage serves from cache instantly. After 60 seconds, the next visitor triggers a background rebuild. Fresh articles get fetched while they receive the cached version. Future visitors see updated content. Try this: Publishing new articles appears within your revalidate window automatically.

Client-Side Rendering (CSR)

Client-Side Rendering downloads JavaScript to the browser first. The initial HTML is mostly empty. React components mount and fetch data after page load. Users see loading states while content appears progressively. CSR works well for interactive features that need user context. NewsWave's personalized dashboard shows different content per user. Reading history, bookmarked articles, and recommended stories can't be pre-built server-side. The user experience differs from other strategies. Initial page loads show skeleton screens or spinners. But subsequent navigation feels instant because JavaScript handles routing. Interactive features respond immediately once loaded.

// NewsWave user dashboard - personalized for each user
import { useState, useEffect } from 'react'

export default function Dashboard() {
  const [bookmarks, setBookmarks] = useState([]) // Starts empty
  const [loading, setLoading] = useState(true) // Show loading state
  
  return (
    <div>
      <h1>Your Dashboard</h1> {/* Shows immediately */}
      {loading ? (
        <p>Loading your bookmarks...</p> {/* Loading state */}
      ) : (
        bookmarks.map(article => ( {/* Shows after data loads */}
          <div key={article.id}>{article.title}</div>
        ))
      )}
    </div>
  )
}

// useEffect runs in browser after component mounts
useEffect(() => {
  async function loadUserData() {
    const userBookmarks = await fetch('/api/user/bookmarks') // Client-side fetch
    const data = await userBookmarks.json() // Parse response
    setBookmarks(data) // Update state with user data
    setLoading(false) // Hide loading spinner
  }
  
  loadUserData() // Fetch happens in browser, not server
}, []) // Runs once after component mounts

What just happened?

The dashboard HTML loads immediately with just the heading. React mounts and shows a loading spinner. useEffect triggers a fetch request. Bookmarks appear once data loads. Try this: Refresh the page — you'll see the loading state briefly before content appears.

Choosing the Right Strategy

The NewsWave site architecture demonstrates when each strategy works best. Content frequency and user expectations drive the decision. Performance requirements and server costs matter too. Consider your content's shelf life. Marketing pages and documentation rarely change — perfect for SSG. Live data like stock prices or social feeds need SSR. Content with predictable update cycles benefits from ISR. User-specific interfaces require CSR. Think about your traffic patterns. High-traffic pages favor static generation for speed and cost savings. Low-traffic admin panels can afford SSR's per-request processing. Mixed approaches work well — use different strategies for different pages in the same app.

SSG - Static Pages

About, Privacy, Documentation

Build once, serve forever

SSR - Fresh Data

Search, Real-time feeds

Perfect accuracy, higher latency

ISR - Balanced

Homepage, Article lists

Fast and fresh, best of both

CSR - Interactive

Dashboards, User profiles

Personalized, loading states

// NewsWave routing strategy by page type
// pages/about.js - Static content, use SSG
export default function About() { /* No data fetching */ }

// pages/search.js - Dynamic queries, use SSR  
export async function getServerSideProps() { /* Fresh every request */ }

// pages/index.js - Homepage with updates, use ISR
export async function getStaticProps() { 
  return { props: {}, revalidate: 60 } // Update every minute
}

Terminal
$ npm run build
○ /about (SSG) - 1.2 kB
● / (ISR) - 4.8 kB
λ /search (SSR) - runtime
✓ Build completed successfully

What just happened?

Next.js analyzed your pages and chose rendering strategies automatically. The build output shows symbols indicating each approach. Static pages get pre-built. ISR pages show revalidation info. Try this: Run next build to see your app's rendering strategy breakdown.

Hybrid Rendering Patterns

Real applications mix rendering strategies across different pages. NewsWave uses SSG for marketing pages, ISR for article content, SSR for search functionality, and CSR for user dashboards. This hybrid approach optimizes each page type individually. You can even combine strategies within a single page. The shell of a page might be static while specific sections load dynamically. Next.js makes this seamless with its component-based architecture. Performance monitoring helps refine your choices. Watch Core Web Vitals scores. Track server costs. Monitor user engagement metrics. The right strategy balances technical performance with business requirements.

// Hybrid approach - static shell with dynamic content
export default function ArticlePage({ article }) {
  return (
    <div>
      <header>{article.title}</header> {/* Static from ISR */}
      <article>{article.content}</article> {/* Pre-generated */}
      <Comments articleId={article.id} /> {/* CSR component */}
    </div>
  )
}

What just happened?

The article content loads instantly from ISR pre-generation. The Comments component mounts and shows a loading state. Client-side JavaScript fetches comment data dynamically. Each section uses the optimal rendering strategy. Try this: Notice how the article appears immediately while comments load separately.

Rendering strategies give you precise control over performance and user experience. Each approach serves specific use cases in modern web applications. The NewsWave architecture demonstrates how to choose the right strategy for each page type. Next.js handles the complexity automatically once you understand the patterns. Your application gets the benefits of static generation, server-side rendering, incremental regeneration, and client-side rendering where each works best.

Quiz

Up Next: Image Optimization

Transform NewsWave's visual performance with Next.js automatic image optimization, responsive loading, and modern format conversion.

← Previous Course Index Next →