【Next】1. 初识服务端渲染

2024-09-03 03:20
文章标签 初识 服务端 渲染 next

本文主要是介绍【Next】1. 初识服务端渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

笔记来源:编程导航

1、什么是客户端和服务端渲染?

网站渲染可以在服务端和客户端两种环境下进行。

在客户端渲染(Client-Side Rendering,CSR)中,客户端(浏览器)会先向服务器请求 HTML 文件,服务器会返回一个基础的 HTML 文件,其中包含必要的 JavaScript 脚本。这些脚本在浏览器端运行,动态请求后端的数据、生成网页内容并渲染到页面上。

服务端渲染(Server-Side Rendering,SSR) 是一种将网页在 服务器端 生成并渲染为 HTML 内容的技术。在这种方式下,当用户请求一个网页时,服务器会提前调用后端,获取数据并生成完整的 HTML 文档,然后将其发送到客户端(浏览器)。浏览器接收到 HTML 后,直接展示页面内容,不用再动态地向后端发送请求来获取数据。

服务端渲染的工作流程通常如下:

  1. 用户发送请求到服务器
  2. 服务器处理请求,调用后端获取数据,并生成完整的 HTML 页面
  3. 服务器将生成的 HTML 页面返回给客户端(浏览器)
  4. 浏览器接收到 HTML 后,直接渲染页面

2、客户端和服务端渲染的区别?

客户端渲染和服务端渲染的主要区别在于渲染过程发生的地点。

由于 Ajax、Vue、React 等新技术的崛起,大多数网站都是基于客户端渲染实现的,客户端渲染的优点主要是:

  1. 开发方便灵活:开发者不需要区分哪些数据要在服务端加载、哪些数据要在客户端加载,也不用担心哪些 API 无法在服务端使用。便于实现更加复杂和动态的用户界面,适合构建单页应用(SPA)和需要频繁交互的应用。
  2. 减少服务器压力:由于渲染工作由客户端(用户自己的电脑)完成,因此服务器的负载相对较小,只需要提供静态资源(比如使用 Nginx 就能完成部署)。

比如一个网站的首页加载请求只有一个标题和一个 js 脚本。

随后执行脚本,触发后续的数据加载,逐渐加载显示整个页面。

而服务端渲染,服务端直接返回的就是 html 文档,就已经有完整的网站数据和样式了。

服务端渲染的好处是:

  1. 减少初始加载时间:SSR 页面可以在首次加载时展示完整内容,减少白屏时间,而 CSR 通常需要等待 JavaScript 加载和执行后才能展示内容。
  2. SEO 友好:SSR 更有利于 SEO,因为搜索引擎爬虫能够直接抓取完整页面的内容,而不依赖于 JavaScript 执行。

但相应的,SSR 将渲染任务交给服务器,可能会增加服务器的负载和压力。所以 SSR 更适合追求性能和 SEO 的企业级项目。

能够实现服务端渲染的技术很多,以前有 Java 的 JSP、PHP 等等,现在有基于 React 的 Next.js 和基于 Vue 的 Nuxt.js 框架。

3、其他渲染方式 - 静态网站生成

静态网站生成(Static Site Generation,SSG)是一种在构建阶段生成静态 HTML 文件的技术。与服务端渲染不同,静态网站生成是在构建时(而不是用户请求时)生成页面,所有页面都以静态文件的形式存在。

这种方式本质上也是客户端渲染,但是不需要由客户端再动态地向后端发送请求来获取数据,这些静态文件可以直接由内容分发网络(CDN)或静态服务器提供。

优点:

  1. 高性能:由于服务器仅需提供静态文件,性能极高;而且由于数据不变化,特别适合通过 CDN 缓存加速。
  2. SEO 友好:搜索引擎最喜欢的就是静态 HTML 文件,可以轻松索引并提升 SEO 效果。
  3. 简化基础设施:无需复杂的前后端交互逻辑,静态文件的部署和维护成本较低。

缺点:

  1. 动态内容有限:SSG 适合内容变化不频繁的场景,对于需要实时更新内容的网站,生成静态页面可能不够灵活。
  2. 构建时间:生成大量静态页面时,构建时间可能较长,特别是数据量大的时候。

基于这些优缺点,静态网站生成适合内容数量有限的、内容基本不变的网站,比如个人博客。像 VuePress、Hugo、Hexo、Astro 都是主流的静态网站生成器。

随着静态网站内容越来越多,每次构建会越来越慢,这种情况下,可以采用增量静态生成技术。

增量静态生成(Incremental Static Regeneration,ISR)允许部分页面在构建之后进行更新,而无需重新构建整个站点。这种技术适用于那些大多数内容不变、但某些部分需要动态更新的网站。

工作流程:

  1. 在构建阶段,生成初始的静态页面。
  2. 当页面内容更新时,通过配置的再生成间隔,静态页面可以增量更新,而不是重新生成整个站点,大幅减少构建时间。
  3. 用户请求时,如果页面内容过期或更新,则后台自动生成新的静态页面并缓存。

这样一来,可以在享受静态网站高性能、SEO 友好特性的同时,及时更新网站的内容,并减少构建时间。

不过缺点就是架构更复杂、维护成本更高。但值得一提的是,很多大型网站为了做 SEO 优化,专门把动态网站转为静态 HTML(静态化)。

4、结合使用(推荐)

实际情况下,前面讲到的几种方式可以结合使用。

比如 部分预渲染(Partial Prerendering,PPR)是一种将服务端渲染(或静态生成)与客户端渲染结合的技术。

工作流程:

  1. 在构建阶段或请求阶段,页面的静态部分预先渲染(如导航栏、页脚等)。
  2. 页面加载时,静态部分直接显示,动态部分由 JavaScript 在客户端加载并渲染。
  3. 通过水合(Hydration)过程,客户端的 JavaScript 接管已经渲染的静态内容,并继续处理动态交互。

这样一来,兼具了 SSR 的 SEO 友好和快速初始加载、以及 CSR 灵活动态交互的优点。

在这里插入图片描述

还有一个跟部分预渲染相似的概念叫 同构渲染 ,是指同一套代码可以在服务端和客户端运行,并在服务端渲染页面的初始内容,然后在客户端接管渲染和交互。

比如 Next 就可以实现同构渲染。

这篇关于【Next】1. 初识服务端渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1131877

相关文章

Linux操作系统 初识

在认识操作系统之前,我们首先来了解一下计算机的发展: 计算机的发展 世界上第一台计算机名叫埃尼阿克,诞生在1945年2月14日,用于军事用途。 后来因为计算机的优势和潜力巨大,计算机开始飞速发展,并产生了一个当时一直有效的定律:摩尔定律--当价格不变时,集成电路上可容纳的元器件的数目,约每隔18-24个月便会增加一倍,性能也将提升一倍。 那么相应的,计算机就会变得越来越快,越来越小型化。

Java Websocket实例【服务端与客户端实现全双工通讯】

Java Websocket实例【服务端与客户端实现全双工通讯】 现很多网站为了实现即时通讯,所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发 出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏 览器需要不断的向服务器发出请求,然而HTTP

JAVA用最简单的方法来构建一个高可用的服务端,提升系统可用性

一、什么是提升系统的高可用性 JAVA服务端,顾名思义就是23体验网为用户提供服务的。停工时间,就是不能向用户提供服务的时间。高可用,就是系统具有高度可用性,尽量减少停工时间。如何用最简单的方法来搭建一个高效率可用的服务端JAVA呢? 停工的原因一般有: 服务器故障。例如服务器宕机,服务器网络出现问题,机房或者机架出现问题等;访问量急剧上升,导致服务器压力过大导致访问量急剧上升的原因;时间和

docker学习系列(一)初识docker

在第一版本上线之后公司,我们决定将之前使用的开源api文档项目转移到本公司的服务器之上,之前用的是showdoc,showdoc利用的是php技术,作为java程序员表示需要快速部署php环境以及apach容器都需要时间,所以采用第二种方法,即利用docker进行快速部署(虽然学习成本也不比php少)。 一、docker简介 docker的官网是https://www.docker.com,

OpenGL ES 2.0渲染管线

http://codingnow.cn/opengles/1504.html Opengl es 2.0实现了可编程的图形管线,比起1.x的固定管线要复杂和灵活很多,由两部分规范组成:Opengl es 2.0 API规范和Opengl es着色语言规范。下图是Opengl es 2.0渲染管线,阴影部分是opengl es 2.0的可编程阶段。   1. 顶点着色器(Vert

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数

【鸿蒙HarmonyOS NEXT】页面之间相互传递参数 一、环境说明二、页面之间相互传参 一、环境说明 DevEco Studio 版本: API版本:以12为主 二、页面之间相互传参 说明: 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面,从而实现跳转。通过页面路由模块,可以使用不同的url访问不同的页面,包括跳转到U

框架template初识

框架初识 框架就是一个别人帮我们搭好的舞台,造好了很多现成的工具供我们使用,让开发过程更快速、简洁。 Gin框架介绍 Gin 是一个用 Go (Golang) 编写的 HTTP Web 框架。 Gin是一个用Go语言编写的web框架。它是一个类似于martini 但拥有更好性能的API框架, 由于使用了 httprouter,速度提高了近40倍。 第一个Gin示例 package mai

【数据结构】--初识泛型

1. 包装类 在Java中,由于基本类型不是继承自Object,为了在泛型代码中可以支持基本类型,Java给每个基本类型都对应了一个包装类型。 1.1 基本数据类型和对应的包装类 除了 Integer 和 Character, 其余基本类型的包装类都是首字母大写。 1.2 (自动)装箱和(自动)拆箱 装箱(装包): 把 基本数据类型 变为 包装类类型 的过程 叫做装箱。 反汇编指

springboot websocket 服务端

在Spring Boot中使用WebSocket实现服务端和Java客户端的实时通信,可以分为几个步骤来完成。这里将详细介绍服务端和Java客户端的具体实现。 服务端设置 添加依赖: 在pom.xml文件中添加Spring WebSocket的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spr

初识Linux · 进度条

目录 前言: 1 缓冲区和回车换行 2 进度条 前言: 我们目前学习了些许知识,已经足够支持我们写一个非常非常小的项目了,即进度条,相信大家都有过下载游戏,等待游戏更新完成的时候,那么此时就有一个进度条,代表着游戏的更新进度,那么我们今天就来模拟实现这个过程,在此之前,我们需要一些预备知识。 1 缓冲区和回车换行 回车换行?是的,你没有看错,相信不少人对换行有一定的误解,我们