React Server Components Demo

• What is this?
• When will I be able to use this?
• Setup
• DB Setup
  • Step 1. Create the Database
  • Step 2. Connect to the Database
  • Step 3. Run the seed script
• Notes about this app
  • Interesting things to try
• 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.

Preferences

sh preferences.sh

Required:

• credentials.js

• settings.js

  cp credentials.js.default ../credentials.js
  vi ../credentials.js
  
  cp settings.js.default ../settings.js
  vi ../settings.js
  

Option:

• fullchain.pem

• privkey.pem

  cp fullchain.pem.default ../fullchain.pem
  vi ../fullchain.pem
  
  cp privkey.pem.default ../privkey.pem
  vi ../privkey.pem
  

Setup

You will need to have nodejs >=14.9.0 in order to run this demo. Node 14 LTS is a good choice!

npm install
npm start

(Or npm run start:prod for a production build.)

Then open https://localhost .

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.

⚠️ 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

(Clean: docker system prune --volumes)

(Build: docker-compose up --build)

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

(Read: scripts/seed.js .)

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.

Built by (A-Z)

• Andrew Clark
• Dan Abramov
• Joe Savona
• Lauren Tan
• Sebastian Markbåge
• Tate Strickland (Design)

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.