Exploring React Server Component Fundamentals - Daishi Kato, React Day Berlin 2023

Discover React Server Component fundamentals, learn how to handle any JavaScript value, renderer-independence, bundling, dynamic sites, client-server integration, and more with this comprehensive overview.

Key takeaways
  • RSC is a new feature in React that allows server-side rendering without needing a Node.js server.
  • RSC can handle any JavaScript values, including objects, arrays, strings, and numbers.
  • RSC is renderer-independent, meaning it’s not tied to React DOM.
  • For static sites, a bundler is enough, but for dynamic sites, a server is required.
  • RSC allows client components to be interleaved with server components.
  • RSC uses a bundler to resolve client references and create a manifest object.
  • The RST payload is designed as a string, sending data step by step.
  • RST serialization results in a stream.
  • RST doesn’t always need a server, but a router can help optimize its use.
  • RSC is used to serialize JSX elements, transfer them as a stream, and deserialize them on the client-side.
  • RSC uses promises, which can’t be serialized, but it also supports serialization of promise values.
  • RSC is available in the React-canary package.