为什么没有人谈论 Razzle？

我和大多数人一样热爱使用 React，我从 Create-React-App (CRA) 开始。
这为我提供了很大的缓冲，让我可以直接开始工作，无需设置环境。我想我们大多数人都会同意，如果我们可以打开编辑器，直接编写 JSX，而无需设置 babel/webpack，那将使我们的生活更加简单。我最喜欢 React 的一点是使用 react-router-dom 进行客户端路由。在寻找服务器端渲染 (SSR) 解决方案时，我注意到市场迫使我放弃自己的路由方式，这意味着我无法从路由器免费提供的所有 API 中受益。这对我来说是一个很大的障碍，我不得不重新思考我现有的项目，它们已经达到了一定程度的复杂性，并重新构建所有内容以适应 Next 的路由方式或 Gatsby 使用模板处理静态内容的方式。

我不喜欢那些强迫你绕着它们思考、阻碍你发挥创造力的工具，这也是我在 Angular v2 发布后放弃它的主要原因之一。
所以，对我来说，SSR 有一段时间对我来说是个致命伤，我需要它带来的 SEO 优势，但我不会为了它而重构我的整个应用。

我需要我的工具拥有更大的灵活性。于是我开始研究，最终发现了Razzle，一个同构的服务器端渲染 (SSR) 解决方案。Razzle 甚至有自己的命令行界面 (CLI) Create-Razzle-App（也是 CRA？），这意味着我只需像使用原始的 Create-React-App 一样调用它即可开始使用。我很快就喜欢上了 Razzle，它的免配置模式让我可以像使用 CRA 一样快速开始原型设计，同时又拥有我所需的所有可扩展性，无需调整我的工作流程。

.eslintrc如果我想更改 ESLint 配置，只需向项目添加一个文件即可；babel 配置也可以用同样的方式更改，添加一个带有 的插件.babelrc，Razzle 会将其选中并添加到默认配置中；如果我需要修改 webpack 配置，只需添加一个razzle.config.js文件即可，这提供了一个轻松、可扩展的默认 webpack 配置。我不需要购买新的框架，也不需要（太多）重构我的整个应用程序。我可以继续使用 React-router-dom，就像我使用 CRA 一样，所以学习曲线基本上不存在。事实上，现在为了在我的应用程序中添加 SEO，我唯一要做的就是从 Gatsby 复制粘贴 SEO 组件，仅此而已。

由于 Razzle 的工作方式，您可以将其与 Vue、Angular 或 React 一起使用。
默认情况下，Razzle 附带 React 的配置，但您可以轻松更改配置以使用任何其他前端框架。

那么 Razzle 是如何工作的呢？

Razzle 使用两个不同的 webpack 实例，并行运行并启用热模块替换 (Hot Module Replacement) 功能，打包客户端和服务器代码。服务器端打包并运行在 src/index.js 中指定的端口上（默认端口为 3000），而客户端代码包（即入口点 src/client.js）则通过 webpack-dev-server 在另一个端口上提供服务（默认端口为 3001），其 publicPath 显式设置为 localhost:3001（而不是像许多其他设置那样设置为 /）。

Razzle 由 Jared Palmer（Formik、Backpack 和 After.js 的幕后推手）创建，并得到了 Dan 'the man' Abramov、Jari Zwarts 等众多杰出开源软件贡献者的支持。快来尝试 Razzle，相信您一定会爱上它！