Waku项目中的Minimal API详解：构建轻量级React Server Components应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00276/article/details/148505229

Waku项目中的Minimal API详解：构建轻量级React Server Components应用

waku ⛩️ The minimal React framework 项目地址: https://gitcode.com/gh_mirrors/wa/waku

前言

在现代Web开发中，React Server Components(RSC)作为一种新兴技术，正在改变我们构建应用的方式。Waku项目提供了一个轻量级的实现方案，其Minimal API专为库作者设计，让我们能够以最小的开销使用RSC功能。本文将深入解析Waku的Minimal API，帮助开发者理解其核心概念和使用方法。

核心概念

React Server Components基础

React Server Components允许在服务端渲染组件，然后将结果发送到客户端。这种方式带来了几个显著优势：

减少客户端包体积
直接访问服务端资源
自动代码分割

Waku的Minimal API定位

Waku的Minimal API提供了最精简的接口，让开发者能够快速集成RSC功能到自己的库或框架中。它剥离了不必要的功能，保留了核心能力，非常适合需要高度定制化的场景。

服务端API详解

基本配置

要使用Waku的Minimal API，首先需要在项目根目录创建entries.tsx文件，并使用defineEntries函数处理服务端请求：

import { unstable_defineEntries as defineEntries } from 'waku/minimal/server';
import App from './components/App.js';

export default defineEntries({
  handleRequest: async (input, { renderRsc, renderHtml }) => {
    // 处理组件请求
    if (input.type === 'component') {
      return renderRsc({ App: <App name={input.rscPath || 'Waku'} /> });
    }
    // 处理自定义路由请求
    if (input.type === 'custom' && input.pathname === '/') {
      return renderHtml({ App: <App name="Waku" /> }, <Slot id="App" />, '');
    }
  },
  handleBuild: () => null,
});

关键点解析

RSC ID：在renderRsc和renderHtml中传递的对象键名(如App)被称为RSC ID，它用于标识组件
请求类型：
- component类型：处理React Server Components请求
- custom类型：处理自定义路由请求(如SSR)
SSR可选：如果不需要服务端渲染，可以省略input.type === 'custom'的条件判断

生产构建配置

handleBuild函数用于生成生产环境构建，它需要返回一个构建指令的异步可迭代对象：

handleBuild: ({
  renderRsc,
  renderHtml,
  rscPath2pathname,
  unstable_generatePrefetchCode,
}) =>
  createAsyncIterable(async () => {
    const moduleIds = new Set<string>();
    const generateHtmlHead = () =>
      `<script type="module" async>${unstable_generatePrefetchCode(
        [''],
        moduleIds,
      )}</script>`;
    const tasks = [
      async () => ({
        type: 'file' as const,
        pathname: rscPath2pathname(''),
        body: renderRsc(
          { App: <App name="Waku" /> },
          { moduleIdCallback: (id) => moduleIds.add(id) },
        ),
      }),
      async () => ({
        type: 'file' as const,
        pathname: '/',
        body: renderHtml({ App: <App name="Waku" /> }, <Slot id="App" />, {
          rscPath: '',
          htmlHead: generateHtmlHead(),
        }).then(({ body }) => body),
      }),
    ];
    return tasks;
  }),

客户端API详解

基本用法

在客户端渲染React Server Component，需要使用Root和Slot组件：

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

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

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

高级功能

自定义初始路径：可以通过initialRscPath属性覆盖默认的rscPath

<Root initialRscPath="/custom-path">
  <Slot id="App" />
</Root>

动态重渲染：使用useRefetch钩子可以动态更新RSC内容

import { useRefetch } from 'waku/client';

const Component = () => {
  const refetch = useRefetch();
  const handleClick = () => {
    refetch('/new-path');  // 触发组件重渲染
  };
  return <button onClick={handleClick}>Reload</button>;
};