DEV Community

Cover image for Building a Simple Full-Stack Application with React Server Components
HexShift
HexShift

Posted on

Building a Simple Full-Stack Application with React Server Components

#react #tutorial #frontend #ux

React Server Components are an exciting new feature that allows for rendering components on the server, enabling faster initial page loads, improved SEO, and a better user experience. In this tutorial, we'll build a simple full-stack application that demonstrates how to integrate server components with a React frontend.

Step 1 - Setting Up the Project

To get started, we’ll need to create a new React project with server components enabled. First, set up your project using Create React App:

npx create-react-app react-server-components-demo
cd react-server-components-demo
npm install react-server-dom
Enter fullscreen mode Exit fullscreen mode

Next, enable server-side rendering (SSR) and React Server Components in the project. You’ll need to configure webpack or use frameworks that support SSR, like Next.js.

Step 2 - Create a Server Component

Create a new file called ServerComponent.js. This file will contain our server-rendered component, which will fetch data and render it on the server:

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

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

  const data = fetchData();

  return (
    <div>
      <h1>Server Rendered Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

In this step, the data fetching logic runs on the server and is passed to the client as pre-rendered HTML.

Step 3 - Create a Client Component

Now, we’ll create a client-side component that will interact with the server component. This component will be responsible for rendering the server component:

// App.js
import React, { useEffect, useState } from 'react';
import ServerComponent from './ServerComponent';

function App() {
  const [isServerComponentLoaded, setIsServerComponentLoaded] = useState(false);

  useEffect(() => {
    setIsServerComponentLoaded(true);
  }, []);

  return (
    <div className="App">
      <h1>React Server Components Demo</h1>
      {isServerComponentLoaded ? <ServerComponent /> : <p>Loading...</p>}
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

In the App.js file, we conditionally render the server component when it is ready, providing a smooth transition from server-side rendering to client-side rendering.

Step 4 - Performance Optimization and SSR

With React Server Components, the goal is to optimize performance by reducing JavaScript sent to the client. By rendering parts of the page on the server, we minimize the initial JavaScript bundle size and improve load times.

React Server Components support streaming, so you can render parts of the page progressively and handle them asynchronously to further optimize the performance.

Use Case Scenario

This setup is ideal for applications where you need to fetch dynamic data from the server but want to avoid large client-side bundles or unnecessary JavaScript execution. For example, a product catalog or blog where content is pre-rendered on the server but interacts with the client for seamless user engagement.

✅ Pros and ❌ Cons

✅ Pros:

  • ⚡ Faster page loads due to server-side rendering
  • 📈 Improved SEO because of server-rendered HTML
  • 🛠️ Reduced client-side JavaScript bundle size

❌ Cons:

  • 🧩 Requires a specific server setup, such as SSR with Next.js
  • 🔄 Server rendering adds complexity to the development process
  • 💻 Some parts of the application may still need client-side hydration

Summary

React Server Components provide a powerful way to optimize full-stack applications. By rendering content on the server and delivering a minimal JavaScript bundle to the client, you get the best of both worlds: performance and dynamic interactivity.

For a comprehensive guide on using React Server Components and integrating them into your applications, check out my full 22-page PDF:

Mastering React Server Components: A Pro Guide to Modern Full-Stack React – just $5.

If this was helpful, you can also support me here: Buy Me a Coffee ☕

</article

Top comments (0)