Skip to content

A simple React Server Components implementation that you can build yourself ๐Ÿ™Œ

Notifications You must be signed in to change notification settings

bholmesdev/simple-rsc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

89 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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.

About

A simple React Server Components implementation that you can build yourself ๐Ÿ™Œ

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •