This package contains the essential building blocks required on both the server and the client to create a streaming, server-side rendered, and properly hydrated RSC app. It also provides utilities needed for server-centric, client-side navigation.
To use this library in your React Server Components project, follow these high-level steps:
- Install the library along with React Canary:
npm install @mfng/core react@canary react-dom@canary react-server-dom-webpack@canary
-
Create a server entry that handles GET requests to create RSC app streams and HTML streams, as well as POST requests for creating RSC action streams. Optionally, add support for progressively enhanced forms.
-
Create a client entry that hydrates the server-rendered app and fetches RSC streams during navigation or when executing server actions.
-
Set up your webpack config as described in the
@mfng/webpack-rsc
README.
createRscAppStream
createRscActionStream
createRscFormState
createHtmlStream
routerLocationAsyncLocalStorage
hydrateApp
-
callServer
(usually not directly needed, encapsulated byhydrateApp
) -
Router
(usually not directly needed, encapsulated byhydrateApp
)
useRouter
Link
CallServerError
useRouterLocation
I would recommend taking a look at the example apps. The AWS app has a particularly clean setup.