React Server Components Announcement Notes

Three weeks after the announcement of React Server Components, I finally sat down with friends to watch the event.

These notes are just a few ideas and links I'd like to hold onto for my next pass thru the demo app.

Announcement #

Announcement Post


Discussion #

Real-time discussion in Discord with the React Podcast community.

New packages #

Name Use Source Package
react-fetch fetch wrapper GitHub npm
react-fs Postgres wrapper GitHub npm
react-pg Node.js fs wrapper GitHub npm

Demo App Notes #

Matt Sutkowski lead our Discord discussion group thru the demo.
He documented his findings and first impressions in this gist.

Complications #

When exploring this demo, remember that it has two goals:

I'm in that first group of people.
If you're also in that group, stick to the Interesting Things to Try section of the README.
This section gently introduces you to the proposed developer workflow.

If you go too far off course, you'll notice quickly that there is no Router.
This is where frameworks will pick up.

Setup #

Because this is a full stack app, you'll need to setup a full stack environment.
The steps are detailed in the Setup and DB Setup sections of the README.

I'll re-iterate a comple points with some added practical details.

Node #

You need node >= 14.9.0.

If you need to manage different versions of Node.js, consider nvm.
It's what I use to jump between projects with different node requirements.

With nvm, run nvm install 14 in the project root and you're good to go.

Docker (optional) #

UPDATE: Docker is optional. It's available for folks who prefer to run Postgres in a cointainer. The README has been updated to make this even clearer.

If you prefer not to install Postgres globally, you can use docker-compose to run the server-components-demo.
Find platform-specific instructions here.

On a mac, the quickest path to a demo is installing the Docker Desktop Mac App — which includes docker-compose.

Postgres Setup (only necessary if you didn't use Docker) #

(if you don't want to endure this step, Rodrigo Pombo has a DB-less fork of server-components-demo)

DB Setup instructions are here.

Platform-specefic installation instructions here.
On a mac, the quickest path to a demo is installing

Personally, I manage a Postgres installation with Homebrew.

With Postgres setup, follow the remaining istructions to setup and seed a database for you demo app.

Location oddities #

Something to keep in mind is that navigate and location have nothing to do with url.

The user's "location" in the app is held in state and communicated as a query parameter to server-side requests — to provide the correct data.

This clearly a void that would be filled by a meta-framework and the implementation in the DEMO is a mimimum-required effort to prove the concept.
This is not what real code would look like.
Same sentiment for inline Postgres queries in .server.js components.

Deployable demos #

Other references #

First impressions #

All things considered, this is an enjoyable experiment.
If you stick to the Interesting Things to Try section, there's a lot to be learned.
I'm grateful to the React Team for openly sharing these experiments with a workable public demo.