⇠ chan.dev / posts

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

server-components-demo

{% youtube-video “https://youtu.be/TQQPAU21ZUw” %}

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:

Introduce folks to an experimental feature
Illuminate areas where framework builders (Next.js, Remix, etc…) can start integrating

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)

UPpublishDate: Docker is optional. It’s available for folks who prefer to run Postgres in a cointainer. The README has been uppublishDated 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 Postgress.app.

Personally, I manage a Postgres installation with Homebrew.

(with brew command available) — installed Postgres with brew install postgresql — run brew services start postgres to start the Postgres daemon — run brew services stop postgres to stop the Postgres daemon

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

React Server Components by Addi Osmani

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.