43. What are React Server Components?
hard

React Server Components (RSC) are a new type of React component that render on the server, not in the browser. They enable you to build parts of your application that run ahead of time or per request, reducing the load on the client-side.


Key Benefits

  • Reduced bundle size: Libraries used in server components are never sent to the client.
  • Faster load times: Data and HTML are prepared on the server, making first-page loads faster.
  • Improved developer experience: Fetch data directly from the server without writing separate APIs.

Example: Basic React Server Component

async function Page({page}) {
  const content = await file.readFile(`${page}.md`);
  return <div>{sanitizeHtml(marked(content))}</div>;
}

In this example, the server component Page reads markdown content from the server and renders it as HTML. This reduces the work that needs to be done on the client.


Example Use Cases

  • Static content: Fetch and render markdown files or static assets on the server.
  • Dynamic data: Load related entities, such as blog posts with author data, all on the server.

Core Concepts of React Server Components

  • Async Components: RSCs can use async/await natively for data-fetching.
  • Client and Server Composition: Combine RSCs with client components to handle both static and interactive UI needs.
  • Streaming and Suspense: RSCs integrate with React's Suspense to stream partial content as data loads.

Conclusion

React Server Components allow developers to shift data-fetching and heavy logic to the server, leaving the client responsible only for interactivity. This results in faster apps, leaner bundles, and a better user experience overall.

PreviousNext