bholmesdev / simple-rsc

A simple React Server Components implementation that you can build yourself 🙌

Simple RSC ⚛️

A simple React Server Components implementation that you can build yourself 🙌

Watch the live demo with Dan Abramov here!

⭐️ Goals

• 🌊 Show how React server components are streamed to the browser with a simple Node server.
• ⚙️ Demo a build process to bundle server components and handle client components with the "use client" directive.
• 📝 Reveal how a server component requests appear to the client with a developer panel.

Getting started

First, install dependencies with "peer dependency" errors disabled:

npm i --legacy-peer-deps

This is due to experimental version conflicts. React Server Components are still quite new!

Then, start the Node development server:

npm run dev

This should trigger a build and start your server at http://localhost:3000.

Project structure

This project is broken up into the app/ and server/ directories. The most important entrypoints are listed below:

# 🥞 your full-stack application
app/ 
  page.jsx # server entrypoint.
  _client.jsx # client script that requests and renders your `page.jsx`.

# 💿 your backend that builds and renders the `app/`
server.js

🙋‍♀️ What is not included?

• File-based routing conventions. This repo includes a single index route, with support for processing query params. If you need multiple routes, you can try NextJS' new app/ directory.
• Advance bundling for CSS-in-JS. A Tailwind script is included for playing with styles.
• Advice on production deploys. This is a learning tool to show how React Server Components are used, not the bedrock for your next side project! See React's updated "Start a New React Project" guide for advice on building production-ready apps.