bholmesdev / simple-rsc

A simple React Server Components implementation that you can build yourself 🙌

Simple RSC ⚛️

A simple React Server Components implementation that you can build yourself 🙌

Watch the live demo with Dan Abramov here!

⭐️ Goals

• 🌊 Show how React server components are streamed to the browser with a simple Node server.
• ⚙️ Demo a build process to bundle server components and handle client components with the "use client" directive.
• 📝 Reveal how a server component requests appear to the client with a developer panel.

Getting started

First, install dependencies with "peer dependency" errors disabled:

npm i --legacy-peer-deps

This is due to experimental version conflicts. React Server Components are still quite new!

Then, start the Node development server:

npm run dev

This should trigger a build and start your server at http://localhost:3000.

Project structure

This project is broken up into the app/ and server/ directories. The most important entrypoints are listed below:

# 🥞 your full-stack application
app/ 
  page.jsx # server entrypoint.
  _client.jsx # client script that requests and renders your `page.jsx`.

# 💿 your backend that builds and renders the `app/`
server.js

🙋‍♀️ What is not included?

• File-based routing conventions. This repo includes a single index route, with support for processing query params. If you need multiple routes, you can try NextJS' new app/ directory.
• Advance bundling for CSS-in-JS. A Tailwind script is included for playing with styles.
• Advice on production deploys. This is a learning tool to show how React Server Components are used, not the bedrock for your next side project! See React's updated "Start a New React Project" guide for advice on building production-ready apps.

simple-rsc's Issues

Integrating styled-components with React Server Components example

I've been exploring the simple-rsc repo and I'm interested in integrating styled-components with React Server Components. I wanted to get your thoughts on whether it's a good direction to take.

src/Title.js:

'use client';

import styled from "styled-components";

const Title = styled.h1``;

export default Title;

Then, we can update the page.jsx file to use the Title styled-component:

src/page.jsx:

import { Suspense } from "react";
import { getAll, getById } from "../db/fetch.js";
import SearchableAlbumList from "./SearchableAlbumList";
import Title from "../client/Title";

export default async function ServerRoot({ search }) {
  return (
    <>
      <Title>Welcome to server components?</Title>
      <h2>Search results for "{search}"</h2>
      <Suspense fallback={<h2>Loading...</h2>}>
        <Albums search={search} />
      </Suspense>
    </>
  );
}

async function Albums({ search }) {
  const albums = await getAll();
  return (
    <SearchableAlbumList search={search} albums={albums} />
  );
}

Would you consider this a viable approach to add styled-components to React Server Components?

I'd appreciate your insight and any recommendations on best practices for this integration, especially since integrating styled-components with SSR can be challenging to begin with.

Cheers!

Integrate SSR

Hello! Firstly, thank you for your effort. I found your explanation on how to integrate RSC into a common project very helpful in understanding the process better. Currently, I am working on an example which is fairly simple, but I am trying to figure out how to combine RSC with SSR. You can see the demo here: https://github.com/sviridoff/rsc-webpack-swc-fastify-demo. I have replicated the RSC result hardcoded in the HTML file here: https://github.com/sviridoff/rsc-webpack-swc-fastify-demo/blob/main/public/page.html#L12. However, when I try to hydrate it (https://github.com/sviridoff/rsc-webpack-swc-fastify-demo/blob/main/src/bootstrap.tsx#L16), it throws an error because it does not match the result. I'm not sure if the strategy I am attempting is correct, as I haven't found any examples to follow. Do you have any suggestions on a better strategy to hydrate an HTML with the result of the RSC? Thank you.

Cannot get the repo started on local

I am on windows node v18.14.1, I cloned the repo but cannot get it started.
It gives an error of
Error: Objects are not valid as a React child (found: [object Promise])

I think Page.js is not treated as a server component, hence you are not allowed to have the async component. Do you mind giving more details on the environment? Thank you

Support Webpack

Hi! So exciting to see a new RSC demo in the wild, we've needed something like this for a while.

Curious if there's any plans to support React's RSC webpack plugin in the demo? I like how this is a bit more vanilla, but it would also be cool to see a version that uses more official tooling.

Integrating styled-components with React Server Components example

I've been exploring the simple-rsc repo and I'm interested in integrating styled-components with React Server Components. I wanted to get your thoughts on whether it's a good direction to take in this example project.

I propose creating a separate client-side file for the Title styled-component as shown below:

client/Title.js:
`'use client';

import styled from "styled-components";

const Title = styled.h1``;

export default Title;
`

Then, we can update the page.jsx file to use the Title styled-component:

`import { Suspense } from "react";
import { getAll, getById } from "../db/fetch.js";
import SearchableAlbumList from "./SearchableAlbumList";
import Title from "../client/Title";

export default async function ServerRoot({ search }) {
return (
<>
<Title>Welcome to server components?</Title>

Search results for "{search}"

<Suspense fallback={

Loading...

}>


</>
);
}

async function Albums({ search }) {
const albums = await getAll();
return (

);
}
`
In this example, I replaced the

tag with a Title styled-component imported from a separate client-side file. Would you consider this a viable approach to add styled-components to React Server Components in this project?

I'd appreciate your insight and any recommendations on best practices for this integration, especially since integrating styled-components with SSR can be challenging to begin with. If you believe this approach is a good direction for the project, please let me know, and I look forward to hearing your thoughts.

Cheers!