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.
Update (March 2023): This demo has been updated to match the latest conventions.
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.
If you use this demo to compare React Server Components to the framework of your choice, keep this in mind:
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.
You will need to have Node 18 LTS in order to run this demo. (If you use nvm
, run nvm i
before running npm install
to install the recommended Node version.)
npm install --legacy-peer-deps
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.
You can also start dev build of the app by using docker-compose.
⚠️ This is completely optional, and is only for people who prefer Docker to global installs!
If you prefer Docker, make sure you have docker and docker-compose installed then run:
docker-compose up
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.
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:
psql postgres
CREATE DATABASE notesapi;
CREATE ROLE notesadmin WITH LOGIN PASSWORD 'password';
ALTER ROLE notesadmin WITH SUPERUSER;
ALTER DATABASE notesapi OWNER TO notesadmin;
\q
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
Finally, run npm run seed
to populate some data.
And you're done!
The demo is a note-taking app called React Notes. It consists of a few major parts:
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.
await fetch('http://localhost:4000/sleep/....')
call in Note.js
or NoteList.js
to introduce an artificial delay and trigger Suspense.
Note.js
, you'll see the fallback every time you open a note.NoteList.js
, you'll see the list fallback on first page load.App.js
. Import db
from db.js
and use await db.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. (Note: this recording is slightly outdated because the repository has been updated to match the latest conventions.)
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.
This demo is MIT licensed.