Server-side Rendering (SSR) vs. Client-side Rendering (CSR) in React

In the world of modern web development, choosing the right rendering approach for your React applications is crucial. Server-side Rendering (SSR) and Client-side Rendering (CSR) are two prominent methods for delivering content to users. Each approach has its own set of advantages, disadvantages, and use cases. In this article, we'll dive deep into the differences between SSR and CSR in React, exploring their benefits, drawbacks, and best practices, including how to fetch data in each approach.

Introduction

Before delving into the specifics, let's understand the fundamental concepts of SSR and CSR. Both techniques relate to how the content of a web page is generated and delivered to the user's browser.

• Server-side Rendering (SSR): With SSR, the initial HTML is generated on the server and sent to the client's browser. This means that the user receives a fully-rendered page right from the start, which can improve perceived loading speed and search engine optimization (SEO).

• Client-side Rendering (CSR): In CSR, the initial HTML is minimal, often containing only a loading script. The majority of the content is generated on the client side using JavaScript. This approach allows for dynamic content updates without full-page reloads, resulting in a smoother user experience.

The Differences

Initial Page Load

• SSR: When a user requests a page, the server generates the complete HTML for that page, including data fetched from APIs or databases. This pre-rendered HTML is sent to the client's browser, providing a fast initial loading experience.

• CSR: The initial HTML sent to the browser is minimal and includes JavaScript bundles. The page's content is fetched and rendered on the client side after JavaScript execution. This may lead to a slower initial load, especially on slower devices or connections.

SEO and Social Sharing

• SSR: Search engines can easily crawl and index the content, as it's available in the initial HTML response. This can lead to better SEO and improved social sharing previews.

• CSR: Search engines may have difficulties indexing dynamic content that is generated on the client side. Special techniques like server-side rendering for specific routes are often required to ensure proper indexing.

Performance

• SSR: The user gets a fully-rendered page on the first load, which can result in a faster perceived performance. However, subsequent interactions might involve more round trips to the server.

• CSR: While the initial load might be slower, subsequent interactions within the app can be faster, as only the necessary components are updated without full-page reloads.

Fetching Data in SSR

In SSR, fetching data is often done on the server side, as part of the initial rendering process. This data can then be included in the pre-rendered HTML that is sent to the client. Here's a simplified example of how you might fetch data in an SSR setup using React and Next.js:

// pages/index.js (Next.js page)
import React from 'react';

function HomePage({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

export async function getServerSideProps() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  return {
    props: {
      data,
    },
  };
}

export default HomePage;

In this example, the getServerSideProps function is called on the server side before rendering the page. It fetches data from an API and includes it in the props that are passed to the HomePage component.

Fetching Data in CSR

In CSR, data fetching typically happens on the client side, often triggered by user interactions or component lifecycle events. This allows for dynamic content updates without requiring a full page reload. Here's a basic example of data fetching in a CSR scenario using React's useEffect hook:

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

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

export default PostList;

In this example, the useEffect hook is used to fetch a list of posts from an API after the component mounts. The fetched data is then used to update the component's state.

Conclusion

Understanding how to fetch data in both Server-side Rendering (SSR) and Client-side Rendering (CSR) scenarios is crucial for building robust and performant React applications. SSR involves fetching data on the server side during the initial rendering, while CSR involves fetching data on the client side as part of user interactions or component lifecycle events. By choosing the appropriate approach based on your application's needs, you can ensure a smooth and efficient user experience.