月上老狗
一文搞懂客户端渲染和服务端渲染
2024-07-23
编程与技术
00
请注意，本文编写于 466 天前，最后修改于 466 天前，其中某些信息可能已经过时。

目录

简介
客户端渲染（Client-Side Rendering, CSR）
服务端渲染（Server-Side Rendering, SSR）
总结
其他语言服务端渲染举例
Java
Python
Go

简介

网站客户端渲染（CSR）和服务端渲染（SSR）是两种常见的网页渲染方式，它们在实现原理、优缺点和适用场景上有显著区别。

这里先说一个基础应用场景举例：

  1. 客户端渲染：各种管理系统。一般来说，用前后端分离架构开发的系统，都是客户端渲染的系统。
  2. 服务端渲染：企业官网、资讯网站、博客网站等。一些内容比较固定的网站，都是采用服务端渲染。

至于为什么会有这样的分类，建议你向下读。

客户端渲染（Client-Side Rendering, CSR）

  1. 原理：

初次加载时，服务器仅发送一个 HTML 骨架和一个包含应用逻辑的 JavaScript 文件。浏览器在接收到文件后，通过执行 JavaScript 代码来生成并显示页面内容。

  1. 优点：
  • 用户体验： 页面之间的切换通常非常快，因为大多数内容是在客户端动态生成的。
  • 带宽效率： 初次加载后，不需要频繁地从服务器请求页面数据，减少了带宽消耗。
  • 丰富的交互性： 更容易实现复杂的交互和动态效果。
  1. 缺点：
  • SEO 不友好： 由于搜索引擎爬虫有时难以执行 JavaScript，导致页面内容无法正确索引。
  • 初次加载时间长： 需要加载和执行大量 JavaScript 文件，初次加载时间可能较长。
  • 性能问题： 如果客户端设备性能较差，渲染速度会受到影响。
  1. 应用场景：
  • 单页应用（SPA）：如 Gmail、Twitter。
  • 高度交互的用户界面：如各类仪表盘和实时更新的应用。
  1. 常见开发技术：
  • React： Facebook 开发的前端库，专注于构建用户界面。
  • Vue.js： 轻量级的前端框架，易于上手和集成。
  • Angular： Google 开发的框架，适合大型应用。

服务端渲染（Server-Side Rendering, SSR）

  1. 原理：

服务器根据请求生成完整的 HTML 页面，并将其发送到客户端。浏览器直接显示从服务器接收到的完整页面。

  1. 优点：
  • SEO 友好： 生成的 HTML 是完整的内容，搜索引擎爬虫能够轻松索引。
  • 初次加载快： 由于服务器已经生成了完整的 HTML，初次加载时间较短。
  • 性能稳定： 不依赖客户端的计算能力，适合性能较差的设备。
  1. 缺点：
  • 服务器负载： 服务器需要处理更多的渲染工作，可能导致更高的服务器负载。
  • 用户体验： 页面切换时，用户可能会看到白屏或闪烁。
  • 交互性： 实现复杂交互可能会比客户端渲染更困难。
  1. 应用场景：
  • 内容丰富且需要 SEO 的网站：如博客、新闻网站。
  • 电子商务网站：如电商平台，需要快速加载和 SEO 支持。
  1. 常见开发技术：
  • Next.js：基于 React 的框架，支持混合渲染模式（SSR 和 CSR）。
  • Nuxt.js：基于 Vue.js 的框架，提供开箱即用的服务端渲染支持。

总结

  1. CSR 更适合需要复杂交互的应用，但初次加载较慢，SEO 支持不佳。
  2. SSR 更适合内容驱动的网站，初次加载快，SEO 友好，但服务器负载较大，用户体验可能略差。

其他语言服务端渲染举例

Java

  1. Spring Boot + Thymeleaf：

Spring Boot 是一个简化了 Spring 应用开发的框架，用于快速构建生产级别的独立应用。Thymeleaf 是一个现代的服务器端 Java 模板引擎，可以与 Spring 集成，用于生成 HTML 内容。适用场景： 企业级应用、大型 Web 系统、需要复杂业务逻辑的应用。

  1. JSP：

古老的 JSP 技术。

Python

  1. Django：

Django 是一个高级 Python Web 框架，鼓励快速开发和清洁、实用的设计。内置模板引擎支持，方便实现服务端渲染。适用场景： 内容管理系统（CMS）、新闻网站、电子商务平台。

  1. Flask + Jinja2：

Flask 是一个轻量级的 Python Web 框架，适合小型应用和微服务。Jinja2 是 Flask 默认的模板引擎，用于生成 HTML 内容。适用场景： 小型项目、原型开发、微服务架构中的组件。

Go

  1. Gin + HTML 模板：

Gin 是一个高性能的 Go Web 框架，类似于 Python 的 Flask。支持使用 Go 的标准模板库进行 HTML 渲染。适用场景： 高性能 Web 应用、微服务。

  1. Beego：

Beego 是一个全功能的 Go Web 框架，内置 ORM、缓存、Session 等功能。提供内置的模板引擎支持，方便进行服务端渲染。适用场景： 大型 Web 应用、企业级应用。

  1. Echo + HTML 模板：

Echo 是一个高性能、扩展性好的 Go Web 框架。支持多种模板引擎，如 Go 标准模板、Pongo2（Django 风格模板）。适用场景： 高性能 Web 服务、API 服务。

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！