Server-side Rendering

Overview

Server-side rendering (SSR) generates the full HTML for a page on the server instead of in the browser, providing better performance and SEO benefits.

Implementation

1. 1

   Basic Setup

   Configure your application for SSR:

   // pages/_app.tsx
   import type { AppProps } from 'next/app'
   
   function MyApp({ Component, pageProps }: AppProps) {
     return <Component {...pageProps} />
   }
   
   export default MyApp

2. 2

   Data Fetching

   Implement server-side data fetching:

   // pages/posts/[id].tsx
   export async function getServerSideProps({ params }) {
     const res = await fetch(`https://api.example.com/posts/${params.id}`);
     const post = await res.json();
   
     return {
       props: { post },
     };
   }

Features and Benefits

SSR is often the default for authenticated dashboards and pages that must always reflect the latest data.

Performance Optimization

SSR performance depends on fast data access and avoiding repeated expensive work. Start with caching and measure slow endpoints early.

Caching

// Implement caching for expensive operations
const cache = new Map();

export async function getServerSideProps({ params }) {
  const cacheKey = `post-${params.id}`;

  if (cache.has(cacheKey)) {
    return {
      props: { post: cache.get(cacheKey) },
    };
  }

  const post = await fetchPost(params.id);
  cache.set(cacheKey, post);

  return {
    props: { post },
  };
}

Streaming SSR

import { renderToNodeStream } from 'react-dom/server'

function streamingSSR(req, res) {
  const stream = renderToNodeStream(<App />)
  stream.pipe(res)
}

Best Practices

Use these practices to keep SSR pages fast and predictable.

• Use appropriate caching strategies
• Optimize server-side data fetching
• Implement proper error handling
• Consider using streaming SSR for large pages
• Monitor server performance

Common Pitfalls

SSR bugs usually come from using browser-only APIs or from inefficient fetching that creates a waterfall of requests.

Next Steps

If you do not need per-request freshness, consider ISR. If you need high interactivity, consider CSR.

Client-side Rendering

Learn about client-side rendering and when to use it.

CSR Guide

Incremental Static Regeneration

Explore ISR for dynamic content with static benefits.

ISR Guide