Integrating React Server Components with Next.js 16

React Server Components (RSC) offer a way to render parts of a React application on the server, allowing for improved performance and reduced client-side JavaScript bundle sizes. With Next.js 16, integrating React Server Components into your application is more straightforward, leveraging Next.js's built-in support for server-side rendering and static site generation.

In this tutorial, we will integrate React Server Components into a Next.js 16 application to take advantage of these performance benefits.

Prerequisites

Before starting, ensure you have the following installed on your machine:

• Node.js (version 14 or later)
• npm or Yarn

You can install Node.js from the official website. Once Node.js is installed, you can verify the installation by running:

node -v
npm -v

If you prefer using Yarn, you can install it globally using npm:

npm install --global yarn

Project Structure

Let's set up the basic structure for our Next.js project with React Server Components. Run the following commands to create a new Next.js application:

npx create-next-app@latest next-rsc-demo
cd next-rsc-demo

Once the project is created, your directory structure should look like this:

next-rsc-demo/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── _app.js
│   ├── index.js
├── package.json
└── next.config.js

Step 1: Install Required Packages

First, we need to ensure that our project has the necessary dependencies to support React Server Components. By default, create-next-app sets up a project with React and Next.js, but let's make sure everything is up-to-date:

npm install react react-dom next@latest

This command ensures that you have the latest versions of React, React DOM, and Next.js.

Step 2: Configure Next.js for Server Components

Next.js 16 has built-in support for React Server Components, but we need to set up our project to use them. Update your next.config.js to enable experimental server components:

// next.config.js
module.exports = {
  experimental: {
    serverComponents: true,
  },
};

This configuration enables the use of server components in your Next.js application.

Step 3: Create a Server Component

Now, let's create a simple React Server Component. Server components are typically used for rendering data fetched from a database or an API on the server. Create a new directory called components and add a file named ServerComponent.js:

mkdir components
touch components/ServerComponent.js

In ServerComponent.js, define a server component that fetches data from an API:

// components/ServerComponent.js
import React from 'react';

export default async function ServerComponent() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

This server component fetches data from a placeholder API and renders it directly on the server. The fetch call is made on the server-side, meaning the client receives the fully rendered HTML without making additional requests.

To use this component, update pages/index.js to import and render ServerComponent:

// pages/index.js
import dynamic from 'next/dynamic';

const ServerComponent = dynamic(() => import('../components/ServerComponent'), {
  ssr: true,
});

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with React Server Components</h1>
      <ServerComponent />
    </div>
  );
}

The dynamic import with ssr: true ensures that ServerComponent is rendered on the server. When you run your Next.js application, you should see the data from the API rendered on the homepage.

To start the development server, run:

npm run dev

Open http://localhost:3000 in your browser to see the result.

In this section, we have set up a basic Next.js project, enabled server components, and created a simple server component that fetches and renders data on the server. This lays the groundwork for more advanced usage of React Server Components in your application.

Step 4: Add Client-Side Interactivity

While server components are great for reducing client-side JavaScript, there are scenarios where you need interactivity that requires client-side components. Let's create a simple client-side component to demonstrate how it works alongside a server component.

Create a new file ClientComponent.js in the components directory:

// components/ClientComponent.js
import React, { useState } from 'react';

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

  return (
    <div>
      <h2>Client-Side Counter</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

This component uses React hooks to manage state and provides a button to increment a counter. Now, update the pages/index.js to include this client-side component:

// pages/index.js
import dynamic from 'next/dynamic';

const ServerComponent = dynamic(() => import('../components/ServerComponent'), {
  ssr: true,
});
const ClientComponent = dynamic(() => import('../components/ClientComponent'), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with React Server Components</h1>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

Here, ClientComponent is dynamically imported with ssr: false, ensuring it runs only on the client side. This setup allows you to combine server-rendered content with interactive client-side logic.

Step 5: Optimize and Deploy

Before deploying your application, ensure it's optimized for production. Run the following command to build your Next.js app:

npm run build

This command compiles your application and prepares it for deployment. You can then run:

npm start

This starts the server in production mode. For deployment, follow the instructions provided by your hosting provider, such as Vercel or Netlify.

Complete Working Example

Here's the complete code for the main files in our project:

next.config.js

module.exports = {
  experimental: {
    serverComponents: true,
  },
};

pages/index.js

import dynamic from 'next/dynamic';

const ServerComponent = dynamic(() => import('../components/ServerComponent'), {
  ssr: true,
});
const ClientComponent = dynamic(() => import('../components/ClientComponent'), {
  ssr: false,
});

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with React Server Components</h1>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

components/ServerComponent.js

import React from 'react';

export default async function ServerComponent() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

components/ClientComponent.js

import React, { useState } from 'react';

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

  return (
    <div>
      <h2>Client-Side Counter</h2>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Common Errors and Fixes

• Error: Module not found: Can't resolve '../components/ServerComponent'
  Fix: Ensure the file path and name are correct. Check for typos in the import statement.

• Error: TypeError: fetch is not a function
  Fix: This can occur if you're trying to use fetch in a non-server context. Ensure that ServerComponent is only used server-side.

• Error: Unexpected token 'export'
  Fix: This might happen if your Node.js version is outdated. Ensure you are using Node.js 14 or later.

Conclusion

In this tutorial, we integrated React Server Components into a Next.js 16 application, demonstrating how to use server-side rendering for data fetching and client-side components for interactivity. This approach helps in optimizing performance by reducing the client-side JavaScript bundle while maintaining essential interactivity.

Sources

• Next.js Documentation
• React Server Components
• Node.js Official Website