新闻

首页 >  新闻

介绍SSR（Server-Side Rendering，服务端渲染）

日期： 来源：蛙合游戏

介绍SSR（Server-Side Rendering，服务端渲染）

1. 什么是 SSR？

SSR（Server-Side Rendering） 指的是：
网页的 HTML 内容 在 服务器端生成，再返回给浏览器。而不是像前端 SPA（单页应用）那样，先返回一个空壳 HTML 再由 JavaScript 渲染内容。

简单来说：

传统 SPA：浏览器先拿到 index.html（几乎空的），再加载 JS，JS 再去请求数据并渲染页面。SSR：浏览器请求页面 → 服务器直接拼好完整的 HTML 页面 → 返回给浏览器 → 用户马上能看到内容。2. SSR 的工作流程用户访问某个 URL。服务器根据这个 URL，调用框架逻辑（可能还要查数据库、请求 API）。服务器渲染出完整的 HTML 页面。浏览器直接显示页面，同时加载前端 JS。JS 接管页面交互（称为 hydrate 水合，把静态 HTML 变成可交互应用）。3. SSR 的优点

✅ 更好的 SEO
搜索引擎爬虫更容易抓取完整的 HTML，而不是等 JS 执行。

✅ 首屏渲染更快
用户不用等 JS 下载和执行，直接就能看到内容。

✅ 更好的用户体验
特别是在网络差、设备性能低时，SSR 提供更快的页面加载。

4. SSR 的缺点

❌ 服务器压力大
每个请求都要服务器实时渲染 HTML，相比于直接返回静态文件要耗资源。

❌ 开发复杂度高
需要同时考虑「服务器环境」和「浏览器环境」的代码兼容问题。

❌ 缓存难度大
静态站点可以直接 CDN 缓存，SSR 页面往往需要动态生成，缓存策略要额外设计。

5. 常见 SSR 框架Next.js（React）：React 官方推荐的 SSR 方案。Nuxt.js（Vue）：Vue 对应的 SSR 框架。Remix、SvelteKit：新一代 SSR 解决方案。

总结：
SSR = 服务器生成 HTML，适合做 SEO、首屏速度要求高的网站（新闻站、电商、博客等）；而纯 SPA 更适合后台管理系统、WebApp 这类对 SEO 要求不高的应用。

相关资讯