Server API
To use React Server Components in Waku, you need to create an entries.ts
file in the project root directory with a getEntry
function that returns a server component module. Here's an example:
The id
parameter is the ID of the React Server Component that you want to load on the server. You specify the RSC ID from the client.
Client API
To render a React Server Component on the client, you can use the serve
function from waku/client
with the RSC ID to create a wrapper component. Here's an example:
The name
prop is passed to the React Server Component. We need to be careful to use serve
to avoid client-server waterfalls. Usually, we should use it once close to the root component.
You can also re-render a React Server Component with new input. Here's an example just to illustrate the idea:
Note that this is a little tricky and the API may be revisited in the future.
Additional Server API
In addition to the getEntry
function, you can also optionally specify getBuildConfig
function in entries.ts
. Here's an example:
The getBuildConfig
function is used for build-time optimization. It renders React Server Components during the build process to produce the output that will be sent to the client. Note that rendering here means to produce RSC payload not HTML content.
How to try it
If you create a project with something like npm create waku@latest
, it will create the minimal example app.