使用 Vite 和 React 编写静态网站

卡洛斯·内维斯

TL; 博士

在这篇文章中，我谈到了 vite-ssg-react，这是一个配置 Vite 的尝试，以便我们可以使用 React 来编写静态网站。例如：

给定以下输入：

src/
├── asset/
│ └── react.svg
├── component/
│ ├── Footer/
│ │ ├── Footer.css
│ │ ├── Footer.jsx
│ │ ├── index.js
│ │ └── script.js
│ └── NavBar.jsx
├── foo/
│ └── index.html.jsx
├── index.css
├── index.html.jsx
└── public/
    ├── robots.txt
    └── vite.svg

它应生成以下输出：

dist/public/
├── asset/
│ ├── index-BX-kPJX6.css
│ ├── react-CHdo91hT.svg
│ └── script-CDOjA-R4.js
├── foo/
│ └── index.html
├── index.html
├── robots.txt
└── vite.svg

此输入-输出结构取自模板项目，您可以通过运行以下命令在本地引导该项目：

npm create vite-ssg-react@latest example.com
cd example.com
npm install
npm run dev

（替换为首选的包管理器。npm

我们保留 3 个预期的 base 命令：

• npm run dev;
• npm run build;
• npm run preview.

为什么这样做呢？

Vite 是一个很棒的引导工具，但假设的用例是你正在编写一个 SPA。如果我们有一个类似的工具来引导静态网站呢？每个入口点文件（在本例中）都“渲染”到 HTML 文件上，然后我们只提供这些文件。不应该有“路由器”抽象。路由框架只是 HTTP 和 HTML。此外，我们应该能够将重复组件作为函数去重复。正是在这项工作中，我一直在破解 vite-ssg-react。虽然我正在使用它来渲染这个网站，但目前它非常具有实验性和 WIP。index.html.jsx

我在很多地方都看到了很多对 React/JSX 的憎恨。我仍然认为它的优点大于缺点。让我详细说明说这句话的三个更大要点。在说什么之前，我们可以承认，今天大多数其他前端框架/DSL已经赶上了这些优点，所以这里可能有一篇更大的文章关于编写“图灵完备”的声明式接口......React/JSX 只是我最亲近的一个。

我说“React/JSX”，因为我指的是将 HTML/XML 嵌入到 JS 中的整个 DSL。这对我来说是第一个强项。现在我们有了整个编程语言来作数据并将其映射到 UI 的树状 XML 结构上。没有妥协（嗯......至少在理论上是这样）。没有试图反其道而行之，使用 、 等将编程语言嵌入到 XML 中。具有讽刺意味的是，React 的缺点之一是无法轻松地将 、 和 嵌入到 HTML 语法中。我们被迫求助于逻辑表达式、三元和函数。奇怪的是，粘土似乎允许这些语法结构而不妥协;使其成为一种用于编写 UI的“完美命令式”表亲 DSL。````ifswitchformap

第二个强项是“视图是状态的函数”的想法：。基本上，我们将代码划分为函数。函数处理重复数据删除，轻松组合，甚至可能是递归的。当然，在任何现实世界的业务系统中，你都可能会以多种方式打破这个想法。我想这更多的是把它作为一个指导原则记住。似乎纯粹的函数式组件在许多系统中都有其适当的位置。v = f(s)

最后但并非最不重要的一点是围绕 React 的工具生态系统。它肯定有其“兔子洞”的阴暗面，因为你可能会发现自己花费了不合理的努力来配置它;或者你只是使用社区准备的默认值（例如，通过使用它之前的 Vite 或 CRA）。对我来说，这些工具在它启用的更快的开发反馈循环中聚集在一起。

预渲染静态网站的后果vite-ssg-react

在开发过程中，它使用 SSR 渲染 HTML 并将其发送到浏览器。很酷的是，Vite 的热重载以某种方式继续适用于 JS 和 CSS 编辑。截至目前，vite-ssg-react 仅依赖于 ，而不是 或 。然而，在实现此行为后，我意识到这里可能还有更微妙的工作要做。哪一个可以实现更快的开发周期：像往常一样使用 SSR 还是客户端渲染？react-dom/serverreactreact-dom/client

使用 SSR 保持开发和生产构建工作流程简化了 React Hook 的情况。Hook 在这里没有提供太多的实用性，因为整个渲染都是一次性完成的，而且没有客户端运行时;没有水合。没有“组件生命周期”，这里的“组件”只是作为输出 HTML 的函数。

在为生产环境构建时，首先构建 SSR 后端，然后执行此后端以呈现最终的 HTML。

这样做的一些后果是：

• 我们在开发过程中使用 SSR
  • 我们仍然得到一个良好、快速的反馈循环
• 在生产环境中，HTML 已经呈现
  • 我们将 vanilla HTML/CSS/JS 交付给客户。
  • React 的客户端运行时不会发送到客户端
  • 我们的网站对 SEO 友好
  • 页面加载速度应略快一些
  • 我们可能会将 vanilla JS 发送给客户端
• 我们不能使用 React Hooks
• 我们可以将代码拆分为函数。 耶！ 🙂
• React 生态系统的一个子集仍然可用。例如：react-icons。

综上所述，vite-ssg-react 仍然存在错误和缺点。还有这个博客的代码......但现在作为一个起点应该足够了。

我将在这里留下一些进一步改进 vite-ssg-react 的想法：

• 更多更好的测试

• TypeScript （类型脚本）

• 改进 SSR 错误页面的 HTML/CSS/JS

• 修复 prop 的开发错误cssLinks

  • 访问 Vite 的模块图可能是一个解决方案

• 有没有更好的解决方案来取代我们目前做 the 和 props 的方式？htmlLinkscssLinks

• 渲染 XML 以及 JSX 中的 XML （ 变为src/foo.xml.jsxdist/public/foo.xml)

• 将 HTML 入口点列表注入到选定的 HTML 入口点中（此作已完成）

• 这将允许我们动态呈现站点地图

• 对于博客，我们可以呈现帖子表吗？

• 缩小原版 JS 脚本（已完成）

对于这个博客，我还是想做：

• 李磊
• 动态标题
• 脚注
• 只读注释
• 标签

感谢阅读。