浅谈：服务器端渲染（SSR）

最新推荐文章于 2024-10-11 19:03:40 发布

憨吃不胖嘻嘻嘻

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量323

点赞数 5

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/wxzs9999/article/details/140790181

版权

什么是SSR(服务端渲染)

服务端渲染：页面的HTML内容在服务器端生成，然后发送到客户端（浏览器）。

对比客户端(CSR)渲染?

CSR执行流程：浏览器加载html文件 -> 浏览器下载js文件 -> 浏览器运行vue代码 -> 渲染页面
SSR执行流程：浏览器加载html文件 -> 服务端装填好内容 -> 返回浏览器渲染

SSR优点?(何时该使用SSR?):

SEO友好：搜索引擎优化（SEO）更容易实现，搜索引擎的爬虫爬取你的页面信息，因为大多数爬虫并不支持等待前端获取数据后再爬取数据的，而有了SSR以后，这些抓取工具就可以立刻得到完整的HTML结构化数据，从而被纳入搜索引擎。
更短的白屏时间：服务端渲染并不需要加载和执行大量的js脚本, 直接渲染服务端给出的html字符串, 从而缩短首屏加载时间。
更好的性能：对于性能较差或网络连接较慢的设备，服务器端渲染可以提供更快的加载时间。
减轻客户端负担：对于资源受限的设备，服务器端渲染可以减少客户端JavaScript的解析和执行负担。

SSR缺点：

更高的服务器负载：SSR需要在服务器端执行渲染逻辑，这会增加服务器的计算和内存资源消耗，特别是当大量用户同时访问时。
更复杂的架构：实现SSR需要在服务器端集成更多的前端逻辑，增加了项目复杂性。
延迟交互：虽然首屏加载速度快，但后续页面交互和动态更新通常依赖JavaScript，这意味着用户可能需要等待脚本执行才能进行交互，这可能会降低用户体验。
额外的网络开销：服务器需要发送完整渲染的HTML页面，页面大小可能比纯静态HTML更大，导致更大的数据传输量。
不利于迭代和更新
调试难度：由于部分渲染逻辑发生在服务器端，调试可能变得更加复杂，需要在服务器环境中重现问题。
安全风险：将更多业务逻辑放在服务器端可能增加暴露敏感信息或遭受攻击的风险。
开发成本

Vue.js 项目不算SSR，Nuxt是如何做到SSR的？

Nuxt.js 能够启动服务器端渲染（SSR）模式，是因为它在 Vue.js 的基础上增加了许多针对 SSR 的优化和抽象。
当您使用 Nuxt.js 启动一个项目时（例如使用 nuxt start 命令），实际上是启动了 Nuxt.js 的内置 Node.js 服务器，这个服务器将处理每个 HTTP 请求，并在服务器端渲染 Vue 组件，然后将生成的 HTML 发送到客户端。这就是为什么 Nuxt.js 启动的项目可以是 SSR 的原因。

相比之下，一个标准的 Vue.项目通常使用前端构建工具（如 webpack）来创建一个单页应用（SPA），所有的渲染工作都在客户端完成，服务器仅作为静态资源的提供者。因此，标准的 Vue项目不包含 SSR 的特性。如果您希望在 Vue.js 中实现 SSR，您需要手动设置服务器端渲染逻辑，或者使用 Nuxt.js 或其他类似的框架。