Server-Side Rendering

SSR with Next.js, streaming SSR, hydration, and SEO optimization.

Overview

SSR renders React components on the server, improving performance and SEO.

Key Concepts

• Hydration — Attaching event handlers to server-rendered HTML
• Streaming SSR — Progressive HTML delivery with Suspense
• SEO — Server-rendered content for search engines
• Initial Data — Pass data from server to client
• Error Handling — Graceful degradation on server errors

Code Examples

// Next.js App Router SSR
async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  
  if (!product) {
    notFound();
  }

  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>${product.price}</span>
      <AddToCartButton productId={product.id} />
    </article>
  );
}

// Streaming with Suspense
function ProductPage({ params }) {
  return (
    <div>
      <Suspense fallback={<ProductSkeleton />}>
        <ProductDetails id={params.id} />
      </Suspense>
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews id={params.id} />
      </Suspense>
    </div>
  );
}

async function ProductDetails({ id }) {
  const product = await getProduct(id);
  return <h1>{product.name}</h1>;
}

// Client hydration
'use client';
function AddToCartButton({ productId }) {
  const [adding, setAdding] = useState(false);
  
  return (
    <button onClick={() => addToCart(productId)} disabled={adding}>
      {adding ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

Practice

Implement streaming SSR with multiple Suspense boundaries and measure TTFB improvement.