A simple React Server Components implementation that you can build yourself ๐
Watch the live demo with Dan Abramov here!
- โ๏ธ Demo a build process to bundle server components and handle client components with the
"use client"
directive. - ๐ Show how React server components are streamed to the browser with a simple Node server.
- ๐ Reveal how a server component requests appear to the client with a robust developer panel.
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 ๐
Hint: Try editing the app/page.jsx
file to see changes appear in your browser.
This project is broken up into the app/
and server/
directories. The most important entrypoints are listed below:
app/ # ๐ฅ your full-stack application
page.jsx # server index route.
_router.jsx # client script that requests your `page.jsx`.
server/ # ๐ฟ your backend that builds and renders the `app/`
index.js # server router for streaming React server components
build.js # bundler to process server and client components
- 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.