-
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
Rendering Type | Key Characteristics | Data Fetching Method | Use 'use client'
|
SEO Impact |
---|---|---|---|---|
CSR | Client-rendered, interactive, ideal for dynamic UIs | Direct fetch inside component (e.g., in useEffect ) |
Yes | Limited (SEO can be challenging) |
SSR | Server-rendered per request, good for frequently changing or user-specific data | getServerSideProps |
No | Good (HTML available at request time) |
SSG | Pre-rendered at build time, best for static content |
getStaticProps and optionally getStaticPaths
|
No (except for interactive components) | Excellent (very fast and fully pre-rendered) |
Top comments (0)