• 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