与服务器端渲染堆栈反应

Posted 2023-02-22

【中文标题】与服务器端渲染堆栈反应

【英文标题】：React with Server Side Rendering Stack

【发布时间】：2020-04-19 09:25:13

【问题描述】：

在过去的几年里，我一直在使用老式的堆栈，但对我的用例来说非常有效。堆栈是 Node + Express.js + Angular.js 1.x。 基本上，后端渲染视图（通过 dot.js 或 Handlebars，任何模板引擎），然后在前端安装 Angular 应用程序。

用例需要SEO 友好，因此内容必须在后端生成并直接提供。此外，UI 有其功能、形式等。它不仅仅是虚拟文本。

目前对于具有相同用例的新项目，我想更新我的堆栈（使用 s-s-r 又名服务器端渲染），其中应用程序不需要是 SPA（单个 Web 应用程序）。基本堆栈仍然相同（Node + Express.js），我唯一要更新的是前端库/框架。

我正在寻找一个具有大型社区的框架/库，以及一种跨项目共享组件和代码库的简单方法。这就是为什么我首先想到的是 React。

我发现的第一件事是 Next.js，当我阅读和调查时，它超出了我的需要。这是一个相当大的框架，有太多我不需要的东西，我不想给我的应用程序增加开销，我无法按照自己的意愿自定义它。

我继续研究，发现了一个名为“express-react-views”的 express 包，它是 express 的模板引擎，但它不允许在客户端安装 React 应用程序。 浏览包的Github issues，我发现很多人都在问这些，他们最终都回答说 Next.js 是要走的路。

我的疑虑/担忧如下：

React 是这个用例的正确工具/库吗？ 如果不是，您有什么建议？ 作为正确的选择，是否有任何基于 React 和 Express 的包/工具可以帮助我解决 s-s-r 并允许我进行所需的自定义？

我不想再依赖于 jQuery 或 Angular.js 1.x 等旧的或过时的工具，因为跨项目的维护和代码共享既复杂又烦人。

【参考方案1】：

无需深入研究 Next.js，最简单的解决方案是使用原生 React 功能 ReactDOMServer：

https://reactjs.org/docs/react-dom-server.html#reference

它实际上很容易使用，您只需将 HTML 作为字符串提供并安装您的 React 应用程序客户端，如果您想使用 React Router 处理请求。

【讨论】：

谢谢！我知道 ReactDOMServier，但它需要大量手动和定制的代码才能让它工作。我想知道是否有一些精简的包或框架可以在 Express.js 之上作为中间件或渲染函数补丁工作，从而避免编写样板代码的开销。

我明白了.. 我不知道（至少在主要场景中）。如果你找到了请告诉我！ ?

你查看 Gatsby.js 了吗？