Rendering in Next.js

• Client-Side Rendering (CSR)

  • Components are rendered on the client, unlike traditional React, which has a blank HTML root. CSR relies heavily on JavaScript for hydration and user interactivity (states, hooks).
  • Uses 'use client' directive to indicate client-rendered components.

• Server-Side Rendering (SSR) and Variants

  • Server Components: Rendered entirely on the server and sent as HTML. They don’t include JavaScript on the client unless they embed Client Components, in which case a minimal JS bundle is sent for interactivity.

    If a Server Component does not contain any Client Components, it will not include any JavaScript in the client bundle. This is ideal for static, non-interactive content and improves performance.

  • SSR with getServerSideProps: Generates pages dynamically per request, sending JavaScript for client hydration.

  • SSG with getStaticProps: Generates static HTML at build time, ideal for mostly static content.

  • ISR with revalidate: Allows periodic regeneration of SSG pages to provide fresh content at intervals.

Why Minimal JS is Sent for Server Components ?

In Next.js, Server Components (SSCs) render completely on the server, sending only HTML to the client. Client Components, marked with 'use client', require JavaScript for interactivity. When a Server Component includes a Client Component, only the JavaScript needed for that interactivity is sent, minimizing the client bundle and improving performance.

Example:

// app/page.js (Server Component)
import InteractiveComponent from './InteractiveComponent';

export default function Page({ data }) {
  return (
    <div>
      <h1>Server Rendered Content</h1>
      <InteractiveComponent /> {/* Client Component */}
    </div>
  );
}

// app/InteractiveComponent.js (Client Component)
'use client';
import { useState } from 'react';

export default function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

In this setup, Page renders on the server, streaming HTML to the client, while InteractiveComponent is a Client Component, sending only its JavaScript to enable interactivity.

Benefits of this approach:

• Smaller Client Bundles: Only necessary JavaScript is sent.
• Performance Gains: Faster loading and parsing.
• Enhanced Caching: Server Components leverage server caching without client-side interference.

Summary Table