请教如何基于React Router V6实现React SSR，求教程及示例仓库

核心实现逻辑 #

• 服务端侧：用createStaticHandler替代客户端的createBrowserRouter，负责匹配请求对应的路由、执行loader预取数据
• 渲染阶段：通过renderToPipeableStream（推荐）或renderToString将匹配到的路由组件渲染为HTML字符串，同时把预取的loader数据注入到页面中
• 客户端激活：用hydrateRoot配合createBrowserRouter初始化客户端路由，读取服务端注入的数据完成hydration，保证路由交互正常

关于的解惑 #

return (<StaticRoutes>是React Router V6专门为SSR场景设计的路由容器，核心作用是**让服务端和客户端复用同一份路由结构定义**，不用重复写两遍路由表：
- 它本身不做路由匹配，只是把所有路由配置包裹起来，供`createStaticHandler`（服务端）和`createBrowserRouter`（客户端）解析
- 典型用法：
  ```jsx
  // src/routes.jsx
  export default function AppRoutes() {
    return (
      <StaticRoutes>
        <Route path="/" element={<HomePage />} />
)

<Route path="/movies" element={<MovieList />} loader={fetchMovieList} />
    <Route path="/movies/:id" element={<MovieDetail />} loader={fetchMovieDetail} />
  </StaticRoutes>
);

}

服务端通过`const handler = createStaticHandler(AppRoutes)`生成路由处理器，调用`handler.query(req)`拿到匹配结果和loader数据；客户端则用`createBrowserRouter(AppRoutes)`初始化路由系统。

## 参考资源（GitHub仓库）
- **remix-run/remix**：React Router官方团队开发的全栈框架，底层完全基于React Router V6，SSR是其核心能力，源码里的路由处理、数据预取逻辑都是最佳实践
- **reactjs/react-router**：官方仓库的v6分支下，examples目录里有完整的SSR示例，直接看代码就能明白流程
- **vercel/next.js**：虽然不是纯React Router实现，但Next.js的App Router和React Router V6设计思路高度契合，其SSR的数据预取、路由渲染逻辑值得参考

## 关键注意点
- 确保loader函数是同构的，避免在loader里调用服务端专属API（比如Node.js的fs模块）
- 服务端渲染时要把loader预取的数据注入到HTML的全局变量中，客户端初始化时读取这些数据传递给路由，避免重复请求
- 优先用`renderToPipeableStream`替代`renderToString`，流式渲染能大幅提升大页面的SSR性能

内容的提问来源于stack exchange，提问作者Ivan Bliminse