Client vs Server Components in Next.js

In this version of Next.js, we will explore what client and server components are, their differences, when to use each one, and provide practical examples to help you implement them in your projects.

What are Client and Server Components in Next.js?

In Next.js, there is a clear distinction between Client Components and Server Components. This separation allows you to make better decisions about where and how to process code, directly impacting performance and user experience.

Client Components

Client Components run in the browser, allowing interactivity and access to browser APIs like window or document. They are ideal for managing the dynamic interface of your application and responding to user actions.

Key Characteristics:

• Run in the browser (client).
• Have access to hooks like useState or useEffect.
• Used to handle dynamic interactions like forms or buttons.
• Essential when you need to respond quickly to user actions.

Example of a Client Component:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

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

  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count value is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

This classic example is a counter that allows the user to interact directly with the page. The 'use client'; directive tells Next.js that this component should be executed in the browser.

Server Components

Server Components are a new feature in Next.js architecture. These components are processed on the server and send the already-rendered HTML to the browser. This reduces the amount of JavaScript that reaches the client, speeding up the initial page load.

Key Characteristics:

• Rendered on the server.
• Do not have access to browser APIs like window or document, nor to React hooks like useState.
• Can interact directly with databases or external APIs.
• Optimize performance by sending HTML instead of JavaScript to the client.

Example of a Server Component:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>Data from the Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

In this example, the component is rendered on the server, retrieves data from an API, and then returns the rendered HTML. This means the data-fetching logic does not reach the client, improving performance.

New Features in Next.js

Next.js refines how server and client components interact. Here are some of the most notable improvements:

1. Server Components by Default

Components are now Server Components by default. This means your application automatically optimises by sending less JavaScript to the browser, unless you explicitly need a Client Component.

2. Optimised Streaming

Streaming allows components to load in parts. This is useful for large or data-heavy pages, as sections of the page can load as they become ready, without waiting for all content to be available.

3. Granular Control

Next.js makes it easier to decide whether a component will run on the server or the client, giving you more control over how to optimise your application.

4. Improved Hydration

Hydration is the process that turns static HTML sent from the server into an interactive page on the client. With Next.js, hydration is more efficient and selective, only occurring where absolutely necessary.

When to Use Client vs Server Components

Use Client Components When:

1. User Interactivity: When you need to handle interactions like forms or buttons that respond in real-time.
2. State Management: Ideal for managing local states that change dynamically, such as a shopping cart.
3. Animations and Visual Effects: When relying on animations or effects that update based on user interaction.

Use Server Components When:

1. Database Queries: When you need to fetch data from a database before displaying content.
2. Static Content: Ideal when the content doesn’t change frequently and does not require interactivity.
3. SEO Improvement: Server-rendered content is more accessible to search engines, enhancing SEO.

Example of Combining Client and Server Components:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search product"
      />
      <p>Searching for: {search}</p>
    </div>
  );
}

In this example, the server renders the list of products and sends it to the client, while the search component is interactive and managed on the client side.

Conclusion

Next.js represents a turning point in how we develop web applications, optimising both performance and user experience. Efficient use of Server Components and Client Components allows you to build fast, dynamic applications with a lighter initial load.

Choosing correctly between a Server Component and a Client Component is crucial to fully leverage the framework’s capabilities. With these new improvements, it’s easier to make informed decisions and create applications that are not only fast but also interactive and scalable.