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.
Real-time discussion in Discord with the React Podcast community.
New packages #
Demo App Notes #
Matt Sutkowski lead our Discord discussion group thru the demo.
He documented his findings and first impressions in this gist.
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.
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 >= 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
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
Find platform-specific instructions here.
On a mac, the quickest path to a demo is installing the Docker Desktop Mac App — which includes
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
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.
— installed Postgres with
brew install postgresql
brew services start postgresto start the Postgres daemon
brew services stop postgresto 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
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
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.
- Next: Import Modules for Side Effects
- Previous: An off-camera mic for non-nerds