使用像 Vue 这样的框架时对客户端渲染和服务器端渲染感到困惑答案

【问题标题】：Confused about client side rendering and server side rendering when using a framework like Vue使用像 Vue 这样的框架时对客户端渲染和服务器端渲染感到困惑
【发布时间】：2021-06-11 18:49:58
【问题描述】：

在使用 Vue 之类的框架时，我试图了解 SSR 与 CSR 的区别。难道它总是是 CSR，因为你会使用 Vue Router 或类似的机制来导航？

当我想到 SSR 时，我想到了 Rails 之类的东西，其中服务器加载了不同的路由并加载了一个 ERB 文件来显示。有没有关于如何设置 SSR 和 vue 的示例？

【问题讨论】：

看看 Nuxt.js (nuxtjs.org) 它会为你解释一切。 :)
我现在可以告诉你的是：前端框架正如你所说的通常构建在客户端并在客户端处理所有内容。带有像 Vue 这样的框架的 SSR 的工作方式如下：您的站点将由服务器生成，并将被预处理然后您从服务器获得的作为用户是已经构建的完整 DOM。动态的东西当然仍然依赖客户端，但初始加载能力现在切换到服务器而不是用户:)

标签： vue.js server-side-rendering

【解决方案1】：

Vue 主要是客户端框架 - 渲染是由运行在客户端浏览器中的 JS 完成的。您的应用程序（通常）只有一个index.html。该html文件几乎不包含html。它只加载大量的 JS...

这带来（至少）两个挑战：

爬虫（谷歌，还有 Twitter/FB 等用于共享）不执行 JS（或者如果他们这样做，在您的网站被索引之前会有很大的“排队等待”惩罚）所以他们看不到 任何内容。这是个问题...
当正在加载的页面非常重要（使用大量组件/组件渲染大量 HTML/组件，这需要来自 API 的一些额外数据），初始渲染仍然需要相当长的时间。这是糟糕的用户体验 - 页面加载后，用户什么也看不到，过了一段时间，内容出现了......

为了解决这个问题，引入了 SSR。第一个页面请求在服务器上预先呈现，因此客户端（无论是爬虫还是用户）接收到对索引/查看有意义的内容，之后，Vue 获得控制权，其他一切都只发生在客户端上......

【讨论】：

谢谢！关于上面列出的#2，关于一个网站的初始渲染需要很长时间。我认为这就是将 JS 拆分为块、延迟加载、动态加载组件等背后的全部原因，对吧？ SSR 只是解决更快渲染的一种替代方法吗？
您提到的技术仅有助于减少第一次加载时下载和解析的 JS 代码量。如果您有很多组件或向页面呈现非平凡的 HTML（或页面正在等待来自 AJAX 调用的一些数据），它对您没有帮助。这还需要时间。因此，在服务器上进行预渲染可以让您更快地进行首次内容绘制 (FCP)