Skip to content
扫码开始移动端阅读

SSR

SSR

SSR全称是Server Side Rendering,代表的是服务端渲染。与客户端渲染不同的是,SSR输出的是一个渲染完成的HTML,整个渲染过程是在服务器端进行的。例如传统的JSP、PHP、Nuxt.js都是服务端渲染。

SSR优缺点

优点

  • 🌐 有利于SEO: 由于页面在服务器生成,搜索引擎直接抓取到最终页面结果。
  • 🚀 有利于首屏渲染: HTML所需要的数据都在服务器处理好,直接生成HTML,首屏渲染时间变短。

缺点

  • 🔨 占用服务器资源: 渲染工作都在服务端进行,可能占用较多服务器资源。
  • 🐌 用户体验不佳: 每次跳转到新页面都需要重新服务端渲染整个页面,不能只渲染可变区域。

示例技术 Next Nuxt Angular Universal

  • Next.js: 一个React框架,支持SSR,使得React应用可以在服务器端进行渲染,提高了性能和SEO。
  • Nuxt.js: 一个Vue框架,专注于Vue应用的SSR,提供了简单配置和插件系统,便于构建服务端渲染应用。
  • Angular Universal: Angular官方的SSR解决方案,允许在服务器端渲染Angular应用,提供更好的性能和SEO支持。

BSR

BSR

BSR全称是Browser Same Rendering,代表的是浏览器同构渲染。BSR是一种前端技术,通过在服务器端和客户端同时执行JavaScript代码,以提高Web应用程序的性能和用户体验。

BSR优缺点

优点

  • 🚀 性能提升: 通过在服务器端和客户端同时执行JavaScript,提高Web应用程序的性能。
  • 🔄 同构渲染: 服务器端和客户端使用相同的渲染代码,确保一致的渲染结果。
  • 🌐 有利于SEO: 由于在服务器端进行渲染,有利于搜索引擎抓取页面内容。

缺点

  • 🔨 构建和维护成本较高: 同构渲染需要保持服务器端和客户端的代码一致,可能增加构建和维护的成本。
  • ⚠️ 客户端运行时复杂性: 部分渲染逻辑需要在客户端执行,增加了客户端运行时的复杂性。
  • 🔄 首屏加载相对较慢: 首次加载时需要在服务器端进行渲染,可能导致首屏加载速度较慢。

示例技术:Next.js

  • Next.js: 一个React框架,支持BSR,提供了同构渲染的能力,使得服务器端和客户端可以共享相同的代码逻辑。

SSG

SSG

SSG全称是Static Site Generator,代表的是静态站点生成器。SSG是一种用于构建静态网站的工具,通过在构建时生成HTML文件,将内容提前渲染并缓存,以加速网站加载速度。

SSG优缺点

优点

  • 🚀 构建速度快: 由于提前生成HTML文件,使得网站加载速度较快。
  • 🔢 适用于静态内容: 对于内容不经常变化的网站,SSG是一个高效的选择。
  • 🌐 安全性增加: 生成的是静态文件,减少了动态渲染时的一些安全性隐患。

缺点

  • 🔨 构建和部署复杂性: 在某些情况下,构建和部署静态站点可能会变得复杂,尤其是在项目庞大复杂的情况下。
  • 🔢 不适用于动态内容: 需要重新构建整个站点以更新内容,对于经常变化的内容,不太适用。

示例技术:Gatsby、Hugo、Vite

  • Gatsby: 基于React的静态网站生成器,支持SSG,提供了丰富的插件生态系统。
  • Hugo: 快速、现代的静态网站引擎,支持SSG,采用Go语言编写,构建速度极快。
  • Vite: 一个由Vue.js官方维护的前端构建工具,支持Vue应用的SSG,具有快速的开发和热更新能力。

CSR

CSR

CSR全称是Client Side Rendering,代表的是客户端渲染。CSR是一种前端技术,通过在浏览器中使用JavaScript动态渲染内容,使Web应用更加交互且响应迅速。

CSR优缺点

优点

  • 🏆 提供更丰富的交互体验: 通过在客户端动态渲染内容,提供更丰富的交互体验。
  • 🌐 前后端分离: 前端和后端可以独立开发,提高了开发效率。
  • 🔄 无需页面刷新: 用户切换页面时无需重新加载整个页面,减少了加载时间。

缺点

  • 🐌 首屏加载速度相对较慢: 首次加载时需要在客户端进行渲染,相对较慢。
  • 📉 SEO难度增加: 由于搜索引擎难以爬取动态生成的内容,对SEO不友好。
  • 🔧 复杂的路由管理: 随着应用复杂性的增加,需要更复杂的路由管理来确保良好的用户体验。

示例技术:React、Vue、Angular

  • React: 用于构建用户界面的JavaScript库,支持CSR,提供了虚拟DOM技术以提高渲染性能。
  • Vue: 渐进式JavaScript框架,支持CSR,简单易学,适合快速开发。
  • Angular: 一款完整的前端框架,支持CSR,提供了强大的工具和功能,适用于大型应用的开发。

ISR

ISR

ISR全称是Incremental Static Regeneration,代表的是增量静态再生。ISR结合了SSR和CSR的优点,首屏使用SSR,在客户端使用CSR进行进一步的交互渲染,实现更好的性能和用户体验。

ISR优缺点

优点

  • 📈 结合了SSR和CSR的优点: 既有利于SEO又提供了良好的交互体验。
  • 🌐 灵活的页面更新: 允许在不重新构建整个站点的情况下更新特定页面,提高了灵活性。
  • ✅ 自动化更新: ISR允许在一段时间后自动重新生成静态页面,确保内容的实时性。

缺点

  • ⚙️ 实现较为复杂: ISR的实现相对复杂,可能增加开发难度。
  • 🔄 首屏加载相对较慢: 与CSR相比,首屏加载时仍需要依赖服务器生成的HTML。
  • ⏰ 不适用于实时性要求高的场景: 对于需要实时性较高的内容,ISR的自动更新可能无法满足要求。

示例技术:Next.js

  • Next.js: 一个React框架,提供了ISR的支持,使得构建和维护具有增量静态再生特性的SPA更加便捷。

SPA

SPA

SPA全称是Single Page Application,代表的是单页面应用。SPA是一种Web应用程序架构,通过动态地更新页面而不重新加载整个页面,提供更流畅的用户体验。

SPA优缺点

优点

  • 🚀 提供更流畅的用户体验: 通过动态更新页面,提供更流畅的用户体验。
  • 🌐 前后端分离: 前端和后端可以独立开发,提高了开发效率。
  • 📉 减少服务器负担: 由于只需加载一次页面,减少了对服务器的请求压力。
  • 🔄 无需页面刷新: 用户切换页面时无需重新加载整个页面,减少了加载时间。

缺点

  • 📈 SEO难度增加: 由于只有一个HTML文件,搜索引擎难以索引SPA中的特定内容。
  • 🔨 初次加载较慢: 初次加载时需要下载整个应用,加载时间相对较长。
  • 🔧 复杂的路由管理: 随着应用复杂性的增加,需要更复杂的路由管理来确保良好的用户体验。

使用SPA技术开发的一些技术栈

  • React: 使用React框架进行组件化开发。
  • Vue: 利用Vue框架实现响应式数据绑定。
  • Angular: 使用Angular框架提供的模块化和依赖注入。

技术总结

技术首屏加载用户体验前后端分离生态SEO开发难度
SSR⭐⭐⭐⭐⭐⭐⭐⭐⚠️⚠️
CSR⚠️⭐⭐⭐⚠️⚠️⭐⭐⭐
BSR⭐⭐⭐⭐⚠️⚠️⚠️⚠️⚠️
SSG⚠️⭐⭐⭐⭐⭐⭐⚠️⚠️
ISR⚠️⭐⭐⭐⭐⭐⭐⭐⚠️⚠️
SPA⭐⭐⭐⭐⭐⭐