31. What is server-side rendering in React and how does it differ from client-side rendering?

Server-Side Rendering (SSR) in React

Server-Side Rendering (SSR) is a technique used to render React components on the server rather than in the browser. This means that the server generates the full HTML for a page and sends it to the client, where the browser can display it immediately. This differs from Client-Side Rendering (CSR), where the browser downloads a minimal HTML page, loads JavaScript, and then executes the JavaScript to build the content on the client side.

Advantages of SSR

1. Improved Performance: Initial page load can be faster because the HTML is fully rendered on the server and sent to the client. Browsers can display the content without waiting for JavaScript execution.
2. SEO Optimization: Search engines can easily crawl and index content because the HTML is fully rendered.
3. Faster Initial Rendering: Users see the content faster, providing a better user experience.

Disadvantages of SSR

1. Increased Server Load: Since rendering happens on the server, it can increase the server's processing load.
2. Complexity: Implementing SSR can be more complex, involving additional tooling and configuration.

Code Example

Here's a basic example using Next.js, a popular React framework that supports SSR:

import React from 'react';

function HomePage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Page</h1>
      <p>{data}</p>
    </div>
  );
}

export async function getServerSideProps() {
  // Fetch data from an API or database
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: { data },
  };
}

export default HomePage;

In this example, getServerSideProps is used to fetch data on the server before rendering the page, ensuring that the data is available when the HTML is sent to the client.

Client-Side Rendering (CSR)

In CSR, the initial HTML is minimal, often just a shell, and JavaScript is executed in the browser to build the page. This method can be beneficial for applications that don't need SEO or have complex, dynamic interactions.

Conclusion

Choosing between SSR and CSR depends on the specific needs of your application, such as performance requirements, SEO needs, and server capacity. SSR can provide faster initial loading and better SEO, while CSR can offer more dynamic and interactive user experiences.