Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bholmesdev/simple-rsc
A simple React Server Components implementation that you can build yourself 🙌
https://github.com/bholmesdev/simple-rsc
react video
Last synced: 1 day ago
JSON representation
A simple React Server Components implementation that you can build yourself 🙌
- Host: GitHub
- URL: https://github.com/bholmesdev/simple-rsc
- Owner: bholmesdev
- Created: 2023-03-29T16:50:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-22T12:33:35.000Z (10 months ago)
- Last Synced: 2024-10-22T14:34:54.677Z (23 days ago)
- Topics: react, video
- Language: JavaScript
- Homepage: https://www.youtube.com/watch?v=Fctw7WjmxpU
- Size: 206 KB
- Stars: 698
- Watchers: 7
- Forks: 60
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple RSC ⚛️
> A simple React Server Components implementation that you can build yourself 🙌
[Watch the live demo with Dan Abramov here!](https://www.youtube.com/watch?v=Fctw7WjmxpU)
## ⭐️ 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:
```bash
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:
```bash
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:
```sh
# 🥞 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.](https://beta.nextjs.org/docs/routing/defining-routes)
- **Advance bundling for CSS-in-JS.** [A Tailwind script](https://tailwindcss.com/docs/installation/play-cdn) 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](https://react.dev/learn/start-a-new-react-project) for advice on building production-ready apps.