Waku website

Minimal Practice

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:

import { defineEntries } from "waku/server";

export default defineEntries(
  // getEntry
  async (id) => {
    switch (id) {
      case "App":
        return import("./src/App.js");
      default:
        return null;
    }
  }
);

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:

import { createRoot } from "react-dom/client";
import { serve } from "waku/client";

const root = createRoot(document.getElementById("root")!);
const App = serve<{ name: string }>("App");
root.render(<App name="Waku" />);

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 props. Here's an example just to illustrate the idea:

import { useState, useEffect } from "react";
import { serve } from "waku/client";

const App = serve<{ name: string }>("App");

const ContrivedRefetcher = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setCount((c) => c + 1), 5000);
    return () => clearInterval(id);
  }, []);
  return <App name={'count' + count} />;
};

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:

import { defineEntries } from "waku/server";

export default defineEntries(
  // getEntry
  async (id) => {
    switch (id) {
      case "App":
        return import("./src/App.js");
      default:
        return null;
    }
  },
  // getBuildConfig
  async () => {
    return {
      "/": {
        elements: [["App", { name: "Waku" }]],
      },
    };
  }
);

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.