浏览器端

浏览器入口点允许在客户端访问 doc/docs 集合。生成的输出使用异步导入进行优化，以适应浏览器环境。

约束

仅 doc 和 docs 集合可从浏览器环境访问，其他集合类型需要在服务端处理。

使用模式

标准方式包含三个步骤：

导入浏览器集合：通过 browserCollections['集合名'].raw 访问未加载的条目
创建客户端加载器：使用组件函数接收编译后的 MDX 和可选 props
实现服务端路径解析：使用服务端加载器返回页面路径，然后用 clientLoader.preload(path) 预加载

使用示例

const clientLoader = browserCollections['collection name'].createClientLoader({
  component({ default: MDX }, props: { myProp: string }) {
    return <div><MDX /></div>;
  },
});

function Page() {
  return clientLoader.useContent(path, { myProp: 'hello world' });
}

框架示例

Tanstack Start

使用 createServerFn 进行服务端页面路径解析。

React Router

实现 loader 函数并处理 404 情况。

两种框架都遵循相同的模式：在服务端解析页面路径，预加载内容，然后通过 clientLoader.useContent() 渲染。

性能提示：推荐使用 RSC（React Server Components）而非这些模式，以获得最佳客户端性能（避免 hydration）。