JS面试题17-比较一下服务端渲染与客户端渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/129483737

本文探讨了服务端渲染（SSR）和客户端渲染（CSR）的差异。SSR提供更快的首次加载时间，更好的SEO，以及在慢网络和设备上的优势，但可能增加代码复杂性。CSR则在页面交互和动画效果上有优势，但可能不利于SEO。两者各有适用场景，开发者应根据需求选择合适的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

服务端渲染（Server-Side Rendering，SSR）是指在服务器端生成完整的HTML页面并将其返回给浏览器，与传统的客户端渲染方式相反。

在传统的客户端渲染中，浏览器首先接收到一个空的HTML页面，在页面加载期间，浏览器使用JavaScript来动态生成页面内容。而在服务端渲染中，服务器端负责构建整个HTML页面，包括将数据和组件渲染为HTML，然后将整个HTML页面返回给浏览器。

服务端渲染的优势包括：

更快的首次加载时间：由于浏览器直接接收到完整的HTML页面，网页可以更快地呈现给用户。
更好的SEO：搜索引擎爬虫可以直接抓取到完整HTML页面的内容，不需要通过JavaScript解析。
更好的性能：对于复杂的应用程序，服务端渲染可以分担客户端的负载，减轻浏览器的负担，并提供更流畅的体验
SSR 的响应性在服务端是不必要的，因为没有用户交互和 DOM 更新。为了更好的性能，默认情况下响应性在 SSR 期间是禁用的
在 SSR 期间，只有 beforeCreate 和 created 这两个生命周期钩子会被调用，其他像mounted或 updated 这样的生命周期钩子不会在 SSR 期间被调用，而只会在客户端运行。因此，我们应该避免在 beforeCreate 和 created 钩子中使用会产生副作用且需要被清理的代码
SSR 适用于需要更快的到达时间的场景，优势在于慢网络和运行缓慢的设备场景。相比传统的 SPA，SSR 服务器渲染标记在服务端渲染 HTML 后即可显示，用户会更快的看到首屏渲染页面
SSR 不适用于同构资源的处理。在使用三方 API 时必须保证运行不报错，需要特殊处理使其支持服务端和客户端都可运行。结合 Vue 的钩子来说，能在 SSR 中调用的生命周期只有 beforeCreate 和 created
VNode 是 Vue 中用来描