React Server Components for Fastly Compute

A library meant to help you run React Server Components hosted on Fastly Compute.

React Server Components is a new paradigm for using React, defining both client-side and server-side roles, as well as a mechanism of communication between the two.

The library wraps some common React patterns used in React Server Components and groups them by role.

The Roles

When using React Server Components, it’s useful to think about React in three roles:

• Origin

  • React mode: server
  • React APIs: React (server mode), ReactServerDOMServer
  • Server components run and generate markup. Client components are added to the component tree, but not run or rendered.
  • Responds to Server actions.
  • Notes:
    • Has access to platform features and services available to the server, such as the DB.
    • Server components are rendered to HTML, based on props. They do not hold state. They can be async.
    • Client components are instantiated only, and included as part of the component tree.
    • Components and responses are serialized into flight data.

• SSR

  • React mode: client
  • React APIs: React (client mode), ReactDOMServer, ReactServerDOMClient
  • React components are instantiated from the component tree in the flight data.
  • This role “emulates” the client to render the data to HTML.
  • Notes:
    • Components are rendered to HTML only, and in their initial state.
    • Lifecycle methods are allowed, but not run.

• Client

  • React mode: client
  • React APIs: React (client mode), ReactDOMClient, ReactServerDOMClient
  • React components are instantiated from the component tree in the flight data.
  • React components render and run interactively.
  • If SSR is used, the HTML markup is hydrated.
  • Notes:
    • “Traditional” React
    • Components are interactive and hold state.
    • Lifecycle methods are allowed and run.

While the client role generally runs in the browser, the origin and SSR roles can run anywhere (server, edge) and in separate services or together in a single service.

Bundling

React Server Components defines a server/client boundary (using the 'use client' and 'use server' directives) which must be applied using a custom loader. Additionally, the react library used on either side of the boundary is different, specified using condition names (named exports).

This boundary is applied either at runtime or by using a bundler, but usage in Fastly Compute necessarily requires a bundler because it's not currently possible to apply custom named conditions or source transformations at build or runtime.

React provides a react-server-dom-webpack package that is designed for running applications that uses Webpack to apply the boundary, so this library uses this package and requires your application to apply this strategy for setting the server/client boundary.

When creating the three bundles to use React Server Components with Fastly Compute, set up Webpack with the following plugins and loaders.

• Client and SSR bundles:

  • React itself provides react-server-dom-webpack/plugin, which helps the bundler discover the 'use client' components and includes them into the client and SSR role bundles.

• Client bundle:

  • Use webpack-manifest-plugin to output a manifest file 'entrypoint-manifest.json' during the build, which lists the CSS and JS files that have been generated for each chunk

• Origin bundle:

  • This library provides @h7/compute-js-rsc/webpack-plugin, which outputs a manifest file 'react-server-manifest.json' during the build, which is used by origin application to resolve server references.
  • This library provides @h7/compute-js-rsc/webpack-loader, which is a loader that applies the following transformations to source files:
    • Finds server actions and registers them as server references.
    • Finds client components and functions exported by those files to ensure they don't get called at on the server.

This library exports functions that are useful in each of these roles, as well as a Web

What's this?

In December 2020, there was

But at the time I didn't quite understand the concept

And in October 2023 the team announced their that Server Actions was in Canary and that it's ready for implementation in frameworks.

And a few days later, Next.js announced that Server Actions were stable in their newest release.

If you think back to your early experiences with React, your first application was probably a tree of React components, possibly notated in JSX, that ran completely on the browser.

react, react-dom

At some point in the future you may have experimented with Server-Side Rendering (SSR), in which your application would build the React component tree once on the server, pre-render it to HTML, and send that to the client, usually along with some representation of the application state. The client would then use the application state to rebuild the React component tree, and then "hydrate" the HTML so that it would become interactive.

react, react-dom

React Server Components is an additional advancement in this area. It allows your application to start and render to HTML on the server by default, but still refer to some components as "client components" that will run on the client and accept user interaction.

Components that run on the server are able to await promises as they fetch data, but they cannot use interactive hooks such as setState because they are meant just to render directly to HTML. On the other hand, client components, and all the components that they import, are interactive, and do hold state.

React introduces

This is possible by It does this by introducing what's referred to as a "flight stream", which is a serialized representation of the DOM

t react, react-dom, react-server-dom-webpack

While this did add a "server-side" aspect to React, it was still primarily a UI library, and many of these server-related concerns were still left to the application developer. In particular, state management, data fetching, waterfalling, were always tough problems.

Frameworks such as React and Remix would show up to solve these problems, but

It's used by a lot of websites and frameworks, but it's still kind of up to your server application code how to send package and send this application state over, whether it be some JSON object or a snapshot of your redux store.

License

MIT.