PriSri Blog
SSR vs SSG vs ISR: Approach with the Benefits
Technology

SSR vs SSG vs ISR: Approach with the Benefits

12 min read
author
Priyansh Srivastava

When building modern web applications, the rendering strategy is a crucial decision that impacts performance, SEO, and user experience. Three common rendering strategies in frameworks like Next.js are Server-Side Rendering (SSR), Static Site Generation (SSG), and Incremental Static Regeneration (ISR). Let’s break down each approach and compare their use cases.

Server-Side Rendering (SSR)

What is SSR?

Server-Side Rendering involves generating the HTML for a webpage on each request. The server processes the request, fetches data, and returns a fully rendered HTML page to the browser.

Characteristics of SSR:

Example Use Cases:

Code Example (Next.js):

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

Static Site Generation (SSG)

What is SSG?

Static Site Generation involves pre-rendering the HTML of all pages at build time. This means pages are generated once and served as static files.

Characteristics of SSG:

Example Use Cases:

Code Example (Next.js):

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

Incremental Static Regeneration (ISR)

What is ISR?

Incremental Static Regeneration allows static pages to be updated at runtime. You can define a revalidation period, during which the page is regenerated in the background if requested.

Characteristics of ISR:

Example Use Cases:

Code Example (Next.js):

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
    revalidate: 10, // Regenerate every 10 seconds
  };
}

const Page = ({ data }) => {
  return <div>{data.content}</div>;
};

export default Page;

Comparison Table

FeatureSSRSSGISR
Rendering TimePer RequestBuild TimeBuild Time + Updates
PerformanceSlower for high trafficFastFast with updates
Content UpdatesReal-timeRequires rebuildReal-time (with delay)
Use CasesDynamic user contentStatic contentSemi-dynamic content

Choosing the Right Strategy

The choice between SSR, SSG, and ISR depends on your application’s requirements:

By leveraging the right strategy, you can optimize your application for speed, scalability, and user experience.

Additional Considerations

When deciding on a rendering strategy, also keep the following in mind:

By carefully analyzing your application’s goals and user needs, you can select a rendering strategy that maximizes efficiency while ensuring a positive experience for your audience.

Understanding Web Page Rendering in Modern Applications

The Evolution of Web Rendering

Before diving into specific strategies, it’s important to understand why different rendering approaches exist. In the early days of the web, pages were simple HTML documents served directly from servers. As web applications became more complex and interactive, the need for different rendering strategies emerged to balance performance, user experience, and developer productivity.

Core Rendering Strategies

1. Server-Side Rendering (SSR)

Server-Side Rendering represents the traditional approach to web rendering, but with a modern twist. When a user requests a page, several steps occur:

The user’s browser sends a request to the server The server runs the application code, including:

The complete HTML is sent to the browser, ready to be displayed

Let’s examine a practical implementation in Next.js:

// pages/products/[id].js
export async function getServerSideProps({ params }) {
  // This runs on every request
  const response = await fetch(
    `https://api.store.com/products/${params.id}`
  );
  const product = await response.json();

  return {
    props: {
      product,
      lastFetched: new Date().toISOString()
    }
  };
}

function ProductPage({ product, lastFetched }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ${product.price}</p>
      <p>Last updated: {lastFetched}</p>
    </div>
  );
}

This approach shines in scenarios requiring real-time data or user-specific content. For instance, an e-commerce product page needs to show current inventory and pricing, or a social media feed must display the latest posts. 2. ### Static Site Generation (SSG) Static Site Generation takes a fundamentally different approach by generating pages at build time rather than request time. This process involves:

During application build:

The resulting HTML files are deployed to a CDN or static hosting When users request pages, they receive pre-built HTML instantly

Here’s how SSG works in practice:

// pages/blog/[slug].js
export async function getStaticPaths() {
  // Define which pages to pre-generate
  const posts = await getAllBlogPosts();
  
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    })),
    fallback: false // Show 404 for undefined paths
  };
}

export async function getStaticProps({ params }) {
  // This runs at build time
  const post = await getBlogPost(params.slug);
  
  return {
    props: {
      post,
      generatedAt: new Date().toISOString()
    }
  };
}

SSG excels for content that changes infrequently, such as:

Marketing pages Documentation Blog posts Product landing pages

  1. Incremental Static Regeneration (ISR)

ISR represents an innovative hybrid approach that combines the benefits of both SSG and SSR. It works through a sophisticated process:

Pages are initially generated statically at build time (like SSG) After deployment, pages can be regenerated in the background based on:

Users always receive static content while updates happen behind the scenes

Here’s a detailed implementation:

// pages/news/[category].js
export async function getStaticProps({ params }) {
  const news = await fetchNewsByCategory(params.category);
  
  return {
    props: {
      news,
      generatedAt: new Date().toISOString()
    },
    revalidate: 60 * 5 // Regenerate every 5 minutes
  };
}

export async function getStaticPaths() {
  return {
    paths: [
      { params: { category: 'technology' } },
      { params: { category: 'sports' } }
    ],
    fallback: 'blocking' // Generate new categories on demand
  };
}

This approach is particularly valuable for:

Making the Right Choice

The selection of a rendering strategy should be based on careful consideration of several factors:

Content Update Frequency

Performance Requirements

Development Complexity

SEO Requirements All three approaches support good SEO, but:

Advanced Considerations To maximize the effectiveness of your chosen strategy, consider these additional factors:

Caching Strategies

Error Handling

User Experience

By understanding these rendering strategies in depth, you can make informed decisions that balance performance, developer experience, and user needs in your web applications.

Advanced Implementation Patterns and Best Practices

Hybrid Rendering Approaches

Modern web applications often benefit from combining multiple rendering strategies on a per-page or per-component basis. Let’s explore how to implement this effectively.

Page-Level Hybrid Rendering

In Next.js and similar frameworks, different pages can use different rendering strategies within the same application. Here’s how to implement this pattern:

// pages/profile.js - Uses SSR for personalized content
export async function getServerSideProps({ req }) {
  const session = await getSession(req);
  const userProfile = await fetchUserProfile(session.userId);
  
  return {
    props: {
      profile: userProfile,
      sessionData: session
    }
  };
}

// pages/blog/[slug].js - Uses ISR for blog content
export async function getStaticProps({ params }) {
  const post = await fetchBlogPost(params.slug);
  
  return {
    props: { post },
    revalidate: 3600 // Revalidate hourly
  };
}

// pages/about.js - Uses SSG for static content
export async function getStaticProps() {
  const companyInfo = await fetchCompanyInfo();
  
  return {
    props: { companyInfo }
  };
}

This approach allows you to optimize each page according to its specific requirements. For example:

Performance Optimization Techniques

1. Streaming SSR

Streaming SSR is an advanced technique that allows sending HTML to the client in chunks, improving Time To First Byte (TTFB). Here’s how to implement it: javascriptCopy

// app/layout.js
import { Suspense } from 'react';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {/* Critical content loads first */}
        <header>
          <nav>Navigation Content</nav>
        </header>
        
        {/* Content streams in chunks */}
        <Suspense fallback={<LoadingSpinner />}>
          {children}
        </Suspense>
        
        {/* Lower priority content streams last */}
        <Suspense fallback={<LoadingFooter />}>
          <Footer />
        </Suspense>
      </body>
    </html>
  );
}

2. Intelligent Data Fetching

To optimize performance, implement smart data fetching patterns: javascriptCopy

// lib/data-fetching.js
export async function fetchProductData(productId) {
  // Implementation of stale-while-revalidate pattern
  const cachedData = await cache.get(`product:${productId}`);
  
  if (cachedData) {
    // Return cached data immediately
    queueBackgroundRefresh(productId);
    return cachedData;
  }
  
  // Fetch fresh data if no cache exists
  const freshData = await fetchFromAPI(productId);
  await cache.set(`product:${productId}`, freshData);
  return freshData;
}

async function queueBackgroundRefresh(productId) {
  // Queue a background job to update the cache
  await queue.add('refresh-product', {
    productId,
    timestamp: Date.now()
  });
}

Error Handling and Fallback Strategies

Robust error handling is crucial for production applications. Here’s a comprehensive approach:

// components/ErrorBoundary.js
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    // Log to error tracking service
    errorTracker.capture(error, errorInfo);
    
    // Attempt recovery
    this.attemptRecovery();
  }
  
  attemptRecovery = async () => {
    try {
      // Clear problematic cache entries
      await cache.clear();
      
      // Attempt to refresh data
      await this.props.onRecovery?.();
      
      this.setState({ hasError: false, error: null });
    } catch (recoveryError) {
      // If recovery fails, stay in error state
      console.error('Recovery failed:', recoveryError);
    }
  };
  
  render() {
    if (this.state.hasError) {
      return <FallbackUI error={this.state.error} />;
    }
    
    return this.props.children;
  }
}

Monitoring and Analytics

To ensure optimal performance, implement comprehensive monitoring:

// lib/monitoring.js
export function trackPageMetrics() {
  // Track Core Web Vitals
  const vitals = {
    LCP: getLargestContentfulPaint(),
    FID: getFirstInputDelay(),
    CLS: getCumulativeLayoutShift()
  };
  
  // Track rendering strategy effectiveness
  const renderingMetrics = {
    timeToFirstByte: performance.timing.responseStart - performance.timing.requestStart,
    timeToInteractive: getTimeToInteractive(),
    revalidationSuccess: trackRevalidationSuccess(),
    cacheHitRate: calculateCacheHitRate()
  };
  
  // Send metrics to analytics
  sendToAnalytics({
    ...vitals,
    ...renderingMetrics,
    timestamp: Date.now()
  });
}

function calculateCacheHitRate() {
  const stats = cache.getStats();
  return stats.hits / (stats.hits + stats.misses);
}

Security Considerations

When implementing different rendering strategies, security must be a top priority:

// middleware.ts
import { NextResponse } from 'next/server';
import { verifyToken } from './lib/auth';

export async function middleware(request) {
  // Verify authentication for protected routes
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    const token = request.cookies.get('auth-token');
    
    try {
      await verifyToken(token);
    } catch (error) {
      // Redirect to login for invalid tokens
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
  
  // Implement security headers
  const response = NextResponse.next();
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  
  return response;
}

Building for Scale

As your application grows, consider these scaling patterns:

// lib/scaling.js
export async function createRevalidationStrategy({
  maxConcurrent = 5,
  interval = 1000,
  timeout = 30000
}) {
  const queue = new PriorityQueue();
  
  async function processQueue() {
    const batch = [];
    
    // Process items in batches
    while (batch.length < maxConcurrent && !queue.isEmpty()) {
      batch.push(queue.dequeue());
    }
    
    // Revalidate in parallel with timeout
    const results = await Promise.allSettled(
      batch.map(async (item) => {
        try {
          await Promise.race([
            revalidatePage(item.path),
            new Promise((_, reject) => 
              setTimeout(() => reject(new Error('Timeout')), timeout)
            )
          ]);
        } catch (error) {
          // Handle failed revalidation
          handleRevalidationError(error, item);
        }
      })
    );
    
    // Schedule next batch
    if (!queue.isEmpty()) {
      setTimeout(processQueue, interval);
    }
  }
  
  return {
    addToQueue: (path, priority) => queue.enqueue({ path, priority }),
    startProcessing: () => processQueue()
  };
}

This comprehensive approach to rendering strategies ensures a robust, performant, and maintainable web application. By carefully considering each aspect - from implementation patterns to security and scaling - you can build applications that provide excellent user experiences while remaining efficient and secure. Would you like me to expand on any particular aspect of these advanced implementation patterns? I can provide more detailed examples for specific areas such as caching strategies, error recovery, or performance optimization techniques.