React Server Components Demo
- What is this?
- When will I be able to use this?
- Should I use this demo for benchmarks?
- Setup
- DB Setup
- Notes about this app
- Built by (A-Z)
- Code of Conduct
- License
What is this?
This is a demo app built with Server Components, an experimental React feature. We strongly recommend watching our talk introducing Server Components before exploring this demo. The talk includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.
When will I be able to use this?
Server Components are an experimental feature and are not ready for adoption. For now, we recommend experimenting with Server Components via this demo app. Use this in your projects at your own risk.
Should I use this demo for benchmarks?
If you use this demo to compare React Server Components to the framework of your choice, keep this in mind:
- This demo doesn’t have an efficient bundling strategy. When you use Server Components, a bundler plugin will automatically split the client JS bundle. However, the way it's currently being split is not necessarily optimal. We are investigating more efficient ways to split the bundles, but they are out of scope of this demo.
- This demo doesn’t have partial refetching. Currently, when you click on different “notes”, the entire app shell is refetched from the server. However, that’s not ideal: for example, it’s unnecessary to refetch the sidebar content if all that changed is the inner content of the right pane. Partial refetching is an open area of research and we don’t yet know how exactly it will work.
This demo is provided “as is” to show the parts that are ready for experimentation. It is not intended to reflect the performance characteristics of a real app driven by a future stable release of Server Components.
Setup
You will need to have nodejs >=18 in order to run this demo. Node 18 LTS is a good choice! (If you use nvm
, run nvm i
before running npm install
to install the recommended Node version.)
npm install
npm start
(Or npm run start:prod
for a production build.)
Then open http://localhost:4000.
The app won't work until you set up the database, as described below.
Setup with Docker (optional)
You can also start dev build of the app by using docker-compose.
If you prefer Docker, make sure you have docker and docker-compose installed then run:
docker-compose up
Running seed script
1. Run containers in the detached mode
docker-compose up -d
2. Run seed script
docker-compose exec notes-app npm run seed
If you'd rather not use Docker, skip this section and continue below.
DB Setup
This demo uses Postgres. First, follow its installation link for your platform.
Alternatively, you can check out this fork which will let you run the demo app without needing a database. However, you won't be able to execute SQL queries (but fetch should still work). There is also another fork that uses Prisma with SQLite, so it doesn't require additional setup.
The below example will set up the database for this app, assuming that you have a UNIX-like platform:
Step 1. Create the Database
psql postgres
CREATE DATABASE notesapi;
CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';
ALTER ROLE notesadmin WITH SUPERUSER;
ALTER DATABASE notesapi OWNER TO notesadmin;
\q
Step 2. Connect to the Database
psql -d postgres -U notesadmin;
\c notesapi
DROP TABLE IF EXISTS notes;
CREATE TABLE notes (
id SERIAL PRIMARY KEY,
created_at TIMESTAMP NOT NULL,
updated_at TIMESTAMP NOT NULL,
title TEXT,
body TEXT
);
\q
Step 3. Run the seed script
Finally, run npm run seed
to populate some data.
And you're done!
Notes about this app
The demo is a note-taking app called React Notes. It consists of a few major parts:
- It uses a Webpack plugin (not defined in this repo) that allows us to only include client components in build artifacts
- An Express server that:
- Serves API endpoints used in the app
- Renders Server Components into a special format that we can read on the client
- A React app containing Server and Client components used to build React Notes
This demo is built on top of our Webpack plugin, but this is not how we envision using Server Components when they are stable. They are intended to be used in a framework that supports server rendering — for example, in Next.js. This is an early demo -- the real integration will be developed in the coming months. Learn more in the announcement post.
Interesting things to try
- Expand note(s) by hovering over the note in the sidebar, and clicking the expand/collapse toggle. Next, create or delete a note. What happens to the expanded notes?
- Change a note's title while editing, and notice how editing an existing item animates in the sidebar. What happens if you edit a note in the middle of the list?
- Search for any title. With the search text still in the search input, create a new note with a title matching the search text. What happens?
- Search while on Slow 3G, observe the inline loading indicator.
- Switch between two notes back and forth. Observe we don't send new responses next time we switch them again.
- Uncomment the
fetch('http://localhost:4000/sleep/....')
call inNote.server.js
orNoteList.server.js
to introduce an artificial delay and trigger Suspense.- If you only uncomment it in
Note.server.js
, you'll see the fallback every time you open a note. - If you only uncomment it in
NoteList.server.js
, you'll see the list fallback on first page load. - If you uncomment it in both, it won't be very interesting because we have nothing new to show until they both respond.
- If you only uncomment it in
- Add a new Server Component and place it above the search bar in
App.server.js
. Importdb
fromdb.server
and usedb.query()
from it to get the number of notes. Oberserve what happens when you add or delete a note.
You can watch a recorded walkthrough of all these demo points here (with timestamps).
Built by (A-Z)
- Andrew Clark
- Dan Abramov
- Joe Savona
- Lauren Tan
- Sebastian Markbåge
- Tate Strickland (Design)
- Alasdair McLeay (Routing and SSR)
Code of Conduct
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
License
This demo is MIT licensed.