Server Components

⏱ Estimated reading time: 2 min

Server Components are a key feature of the Next.js App Router that allow parts of your UI to be rendered on the server instead of the client. This improves performance, reduces JavaScript bundle size, and enhances SEO.

1. What Are Server Components?

• Rendered on the server by default.

• Can fetch data directly without exposing it to the client.

• Do not include JavaScript in the client bundle.

• Can be combined with Client Components for interactivity.

In Next.js App Router, components are Server Components by default unless marked 'use client'.

2. Creating a Server Component

// app/page.js
export default async function HomePage() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

Key points:

• Data fetching happens on the server

• No client-side JS is sent for this component

• Improves page load speed and SEO

3. Client vs Server Components

4. Using Client Components Inside Server Components

Sometimes you need interactivity in server-rendered pages.
Wrap client-side parts with 'use client'.

'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Then include in a server component:

import Counter from './Counter';

export default function Page() {
  return (
    <div>
      <h1>Server-rendered Page</h1>
      <Counter /> {/* Client component */}
    </div>
  );
}

5. Benefits of Server Components

• Faster load times: Less JS sent to client

• Better SEO: Content is rendered on server

• Secure data fetching: Secrets never exposed to browser

• Simplified architecture: No need for separate backend API for SSR

6. Limitations

• Cannot use React hooks (useState, useEffect)

• Cannot access browser APIs (window, document)

• Must delegate interactive UI to Client Components

7. Best Practices

• Use Server Components for content-heavy or static pages

• Use Client Components only where interactivity is needed

• Combine both for optimal performance

• Fetch data in Server Components for SEO and security

Conclusion

Server Components in Next.js are powerful and efficient, allowing you to render pages on the server while sending minimal JavaScript to the client. Combined with Client Components, they provide a flexible architecture for building modern web applications.