2024-07-23
温故知新
00
请注意,本文编写于 78 天前,最后修改于 78 天前,其中某些信息可能已经过时。

目录

简介
客户端渲染(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):如 GmailTwitter
  • 高度交互的用户界面:如各类仪表盘和实时更新的应用。
  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 的框架,支持混合渲染模式(SSRCSR)。
  • 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 框架,适合小型应用和微服务。Jinja2Flask 默认的模板引擎,用于生成 HTML 内容。适用场景: 小型项目、原型开发、微服务架构中的组件。

Go

  1. Gin + HTML 模板:

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

  1. Beego:

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

  1. Echo + HTML 模板:

Echo 是一个高性能、扩展性好的 Go Web 框架。支持多种模板引擎,如 Go 标准模板、Pongo2Django 风格模板)。适用场景: 高性能 Web 服务、API 服务。

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

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