在服务器端模板引擎上使用 React 或 Vue

Posted 2023-02-22

【中文标题】在服务器端模板引擎上使用 React 或 Vue

【英文标题】：use React or Vue over server side template engines

【发布时间】：2019-03-02 05:32:39

【问题描述】：

对于 Web 开发，React 或 Vue 似乎是必须具备的框架。目前我刚刚对 NodeJs 和 Handlebars 有了一些经验。

我知道 Handlebars 运行服务器端渲染，Vue 和 React 运行客户端渲染。使用 Vue 或 React 使可重用组件成为可能。使用服务器端模板引擎需要基础布局。

假设我有一个带有一些路由的网站/网络应用程序。为什么我应该为 html 组件使用 Vue 而不是 Handlebars HTML？

到目前为止，我学到的是，只要我可以

改进我的 SQL 语句，在代码操作数据之前做它 在客户端做一些服务器可以做的事情，在服务器做，因为它有更多的权力

现在大家都在使用 Vue 或 React，我为什么要离开旧的结构并开始将代码外包给客户端？

【问题讨论】：

您实际上可以同时使用两者，但需要编写为同构应用程序。查看 nuxt.js 的 vue 或 next.js 的 react。

【参考方案1】：

我相信您的问题与服务器端渲染和客户端渲染的概念更相关。

服务器端渲染有几个要点，您在评估问题时应该考虑：

在服务器中呈现页面比在客户端中更快 对于 SEO（搜索引擎优化）来说要好得多，因为爬虫可以抓取整个页面。由于有些爬虫没有 评估/运行 javascript，SPA（单页应用程序）可能会 导致空白页。尽管谷歌已经改进了很多 使用 SPA SEO，服务器端渲染仍然是最佳选择。

使用 SPA 的客户端渲染具有不同的优势：

在客户端操作和维护用户状态要好得多，因为您可以将网页分解为 组件。 第一次加载后交互/页面更改更快，因为在大多数情况下，整个应用程序会在第一次请求中立即加载。

因此，考虑到这一点，您必须考虑您想要做什么。如果您正在构建一些反映更像页面结构的网站，例如新闻或博客，那么服务器端渲染可能是最好的方法。 另一方面，如果您正在构建一个具有大量用户交互和状态管理的成熟应用程序，那么客户端渲染（或 SPA）可能是最佳选择。

如果不先评估您的问题，就没有理由将您的代码外包给客户端。这实际上取决于您要解决的问题。

【参考方案2】：

我可以推荐您到this article。如您所见，它并非全是黑白的。来自引用的文章..

服务器端专家：

搜索引擎可以抓取网站以获得更好的 SEO。 初始页面加载速度更快。 非常适合静态网站。

服务器端的缺点：

频繁的服务器请求。 整体页面呈现缓慢。 重新加载整页。 非富网站交互。

客户端专家：

丰富的网站互动 初始加载后快速呈现网站。 非常适合 Web 应用程序。 强大的 JavaScript 库选择。

客户端缺点：

如果没有正确实施，搜索引擎优化会降低。 初始加载可能需要更多时间。 在大多数情况下，需要外部库。

但是，有一些框架可以进行通用渲染，例如 next.js 和 nuxt.js（分别围绕 react 和 vue 构建），它们可以利用客户端和服务器的强大功能，因此您可以两者兼得世界。这通常涉及将初始有效负载中完全呈现的应用程序从服务器发送到浏览器，然后在浏览器端加载应用程序代码。