大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

什么是 Waku

Waku 号称是最小的 React 框架。

?? The minimal React framework. Waku means "frame" in Japanese. Waku-Waku means being excited.

Waku 是一个支持 React 服务器组件 (RSC) 的 React 框架，这是一项将在未来版本（React 18 ）的 React 中提供的新功能。 RSC 允许开发人员在服务器上渲染 UI ，从而提高性能并启用服务器端功能。 要使用 RSC，需要一个前端框架来进行打包，支持可选的服务器、路由等等。

Waku 采用简约的方法，提供最小的 API，允许多种功能实现并鼓励生态增长。 例如，最小的 API 不依赖于特定的路由。 这种灵活性使得构建新功能变得更加容易。

Waku 在内部使用 Vite，虽然 Vite 仍在开发中，但最终将支持 Vite 的所有功能，Waku 甚至还可以作为 Vite + React 客户端组件的替代品。 虽然 RSC 是可选的，但强烈建议开发者使用以改善用户和开发人员的体验。

为什么要开发 React 框架 Waku

很多开发者都有一个信仰，即：React 服务器组件 (RSC) 是 React 的未来。 而开发者面临的挑战在于无法仅将 RSC 与 React 库结合使用。 相反，开发者至少需要一个 React 框架来进行打包。

'use client'
 // next.js中使用此声明启动客户端渲染
// 服务端渲染使用 'use server'
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

目前，只有少数 React 框架支持 RSC，而且通常比 RSC 提供更多功能。 因此，业界迫切需要一个实现 RSC 的最小框架，从而有助于了解 RSC 的工作原理。

如何使用 Waku

实例化项目

首先实例化一个项目：

npm create waku@latest
// npm
yarn create waku
// yarn
pnpm create waku
// pnpm

Server API

要在 Waku 中使用 React Server Components，需要在项目根目录中创建一个 entries.ts 文件，其中包含返回服务器组件模块的 renderEntries 函数。

import { lazy } from 'react';
import { defineEntries } from 'waku/server';

const App = lazy(() => import('./components/App.js'));

export default defineEntries(
  // renderEntries
  async (input) => {
    return {
      App: <App name={input || 'Waku'} />,
    };
  }
);

id 参数是要在服务器上加载的 React Server 组件的 ID。

客户端 API

要在客户端上渲染 React 服务器组件，开发者可以使用 waku/client 中的 Root 和 Slot 组件以及 RSC ID 来创建包装器组件。

import { createRoot } from 'react-dom/client';
import { Root, Slot } from 'waku/client';

const rootElement = (
  <StrictMode>
    <Root>
      <Slot id="App" />
    </Root>
  </StrictMode>
);

createRoot(document.getElementById('root')!).render(rootElement);

可以将 initialInput 属性传递给根组件，覆盖默认输入“”。开发者还可以使用新输入重新渲染 React 服务器组件。

import { useRefetch } from 'waku/client';

const Component = () => {
  const refetch = useRefetch();
  const handleClick = () => {
    refetch('...');
  };
  // ...
};

附加服务器 API

除了 renderEntries 函数之外，开发者还可以选择在 entries.ts 中指定 getBuildConfig 函数。

import { defineEntries } from 'waku/server';

export default defineEntries(
  // renderEntries
  async (input) => {
    return {
      App: <App name={input || 'Waku'} />,
    };
  },
  // getBuildConfig
  async () => {
    return {
      '/': {
        entries: [['']],
      },
    };
  }
);

getBuildConfig 函数用于构建时优化，其在构建过程中渲染 React 服务器组件以生成将发送到客户端的输出。 请注意，此处的渲染意味着生成 RSC 有效 payload 而不是 HTML 内容。

更多关于 Waku 的用法示例可以参考文末资料，本文不再过多展开。

部署 Waku 项目

如果是 Cloudflare，可以通过下面命令部署：

npm run build -- --with-cloudflare
rm -r node_modules
npm install --omit=dev --omit=peer
npx wrangler dev # or deploy

如果是 Deno 可以改成如下方式：

npm run build -- --with-deno
DENO_DEPLOY_TOKEN=... deployctl deploy --project=... --prod serve.ts --exclude node_modules

参考资料

https://github.com/dai-shi/waku?ck_subscriber_id=2172713154

https://waku.gg/

https://www.youtube.com/watch?v=-sGIPwXZT70

https://twitter.com/razorbelle

https://medium.com/@sebastienlorber/this-week-in-react-166-server-components-waku-react-forget-react-native-expo-million-b9154a1409b7