React Router RSC Preview.

tl;dr

• React Router has preview support for RSC!
• Clone this repo to try it out
• RSC content from loaders/actions in existing routes
• RSC-first “Server Component Routes”
• Client components with "use client"
• Server Functions with "use server"

…

React Server Components in React Router framework mode! Super hype!

I’m most excited for the basic use case of returning JSX from loaders like so:

export async function loader({ params }) {
  let { contentBlocks, ...product } = await getProduct(params.productId);
  return {
    product,
    content: (
      <div>
        {contentBlocks.map((block) => {
          switch (block.type) {
            case "image":
              return <ImageBlock {...block} />;
            case "gallery":
              return <GalleryBlock {...block} />;
            case "video":
              return <VideoBlock {...block} />;
            case "text":
              return <TextBlock {...block} />;
            case "markdown":
              return <MarkdownBlock {...block} />;
            default:
              throw new Error(`Unknown block type: ${block.type}`);
          }
        })}
      </div>
    ),
  };
}

export default function Article({ loaderData }) {
  return (
    <ProductLayout product={loaderData.product}>
      {loaderData.content}
    </ProductLayout>
  );
}

Being able to portal JSX from serverside to clientside is nice, honestly it makes the boundary between the two feel more explicit, and works for Suspense and such just fine as well.

They’re cooking on this, lets hope for a soon and stable release candidate / release.