简单的 RSC ⚛️
一个简单的 React 服务器组件实现,你可以自己构建 🙌
⭐️ 目标
- 🌊 通过简单的 Node 服务器展示 React 服务器组件如何流式传输到浏览器。
- ⚙️ 演示打包服务器组件并使用
"use client"
指令处理客户端组件的构建过程。 - 📝 通过开发者面板揭示服务器组件请求在客户端的呈现方式。
入门
首先,禁用"对等依赖"错误并安装依赖项:
npm i --legacy-peer-deps
这是由于实验版本冲突。React 服务器组件仍然相当新!
然后,启动 Node 开发服务器:
npm run dev
这应该会触发构建并在 http://localhost:3000 启动你的服务器。
项目结构
该项目分为 app/
和 server/
目录。最重要的入口点如下所示:
# 🥞 你的全栈应用
app/
page.jsx # 服务器入口点
_client.jsx # 请求并渲染 `page.jsx` 的客户端脚本
# 💿 构建并渲染 `app/` 的后端
server.js
🙋♀️ 未包含的内容
- 基于文件的路由约定。 本仓库包含一个单一的索引路由,支持处理查询参数。如果你需要多个路由,可以尝试 NextJS 的新
app/
目录。 - CSS-in-JS 的高级打包。 包含了 Tailwind 脚本 用于样式调试。
- 生产部署建议。 这是一个学习工具,用于展示 React 服务器组件的使用方法,而不是你下一个副项目的基石!有关构建生产就绪应用的建议,请参阅 React 更新的"开始新的 React 项目"指南。