邂逅SSR

coderklaus
154 阅读10分钟

渲染方式

SPA

单页应用程序 (SPA) 全称是: Single-page application

SPA页面是在客户端渲染呈现的，也就是客户端渲染 (CSR, client slide render)

SPA应用默认只返回一个空HTML页面, 通过JS脚本来生成页面中的内容

常见的SPA框架有 React，Vue， Angular

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSR</title>
  <!-- 这里是一些样式文件，用于装饰整个页面 -->
</head>
<body>
    <!--
      在SPA中只有一个根节点
      在vue中是 #app
      在react中是 #root
    -->
    <div id="app"></div>

    <!-- 这里是一些JS脚本，用于在客户端动态渲染这个页面 -->
</body>
</html>

优点

  1. 只需要加载一次

    传统的页面，每次刷新 都必须刷新整个页面

    SPA只需要在首次渲染的时候加载页面，之后页面的切掉都是在客户端完成的

    因此，SPA页面加载速度要比传统 Web 应用程序更快

  2. 更好的用户体验

    SPA 提供类似于桌面或移动应用程序的体验。用户切换页面不必重新加载新页面

    切换页面只是内容发生了变化(也就是局部刷新)，页面并没有重新加载，从而使体验变得更加流畅

  3. 可轻松的构建功能丰富的Web应用程序

    • SPA的开发往往采用SPA框架来进行开发，可轻松的构建功能丰富的Web应用程序
    • SPA采用组件化开发的方式，将页面分解为多个小组件，可以提高代码的复用性和可读性
    • SPA应用往往都是前后端分离的，可以提高开发效率和代码质量

缺点

  1. 不利于SEO (search engine optimization )

    返回的是一个空的html，没有内容给搜索引擎爬取

    也没有别的页面可以供搜索引擎进行收录

  2. 首屏的渲染速度过慢

    构建复杂的项目，复杂 Web 应用程序的大文件会变得越来越大

    即使经过压缩，丑化 和 code spilting后 首屏对应的JS文件依旧很大

    首屏加载的资源过大时，会影响首屏的渲染的速度

SSR

服务器端渲染全称是: Server Side Render，在服务器端渲染页面，并将渲染好HTML返回给浏览器呈现

SSR应用的页面是在服务端渲染的，用户每请求一个SSR页面都会先在服务端进行渲染，然后将渲染好的页面，返回给浏览器呈现

在首次渲染，刷新页面和爬虫抓取的时候，会渲染返回完整的html

在其余时候，会使用和html一起返回的JS脚本，实现客户端的SPA交互

构建 SSR 应用常见的库和框架有: Vue Nuxt、 React Next.js 等(SSR应用也称同构应用)

image.png

优点

  1. 更快的首屏渲染速度
    • 浏览器显示静态页面的内容要比 JavaScript 动态生成的内容快得多
    • 当用户访问首页时可立即返回静态页面内容，而不需要等待浏览器先加载完整个应用程序
    • 无论应用是否变得越来越复杂，所需要渲染的仅仅只有当前路由所对应的页面，而不是像SPA一样需要构建整个应用
  2. 更好的SEO
    • 爬虫是最擅长爬取静态的HTML页面，服务器端直接返回一个静态的HTML给浏览器
    • 这样有利于爬虫快速抓取网页内容，并编入索引，有利于SEO
  3. SSR应用程序在 Hydration 之后依然可以保留 Web 应用程序的交互性

缺点

  1. 增加了运维成本，SSR需要在服务器调用API生成静态HTML, 而不是像SPA一样消耗客户端算力去进行渲染

    因此SSR相比SPA而言需要消耗更多的服务器资源，成本高

  2. 增加了开发成本，开发者需要维护两部分的应用逻辑，一部分是运行在客户端的，另一部分是运行在服务端的

  3. SSR 配置站点的缓存通常会比SPA站点要复杂，比如有应用级别的缓存，页面级别的缓存等

SSG

静态站点生成(SSG) 全称是:Static Site Generator，是预先生成好的静态网站

SSG 应用一般在构建阶段就确定了网站的内容，会生成一个个的完整的html

SSG适用于那些文档类网站，博客类网站这类内容不需要频繁变动的网站

构建 SSG 应用常见的库和框架有: Vue Nuxt、 React Next.js 等

优点

  1. 访问速度非常快，因为每个页面都是在构建阶段就已经提前生成好了

  2. 直接给浏览器返回静态的HTML，也有利于SEO

  3. SSG应用依然保留了SPA应用的特性

SSG在返回html的同时也会返回对应的JS文件

用户在客户端对页面进行交互的时候，实际上是通过JS脚本实现的SPA

只有在首次渲染，页面刷新，爬虫抓取的时候，才会返回完整的html页面

缺点

  • 页面都是静态，不利于展示实时性的内容(也就是动态网站)，实时性的更适合SSR

  • 如果站点内容更新了，那必须得重新再次构建和部署(是整个站点的重新构建，而不是仅仅构建变化的部分)

ISR

ISR（Incremental Static Regeneration 增量静态再生）是对SSG的一种优化

SSG在构建的时候，是在服务端生成整个网站的所有html页面

如果有内容发生了改变，就需要重新构建整个网站

而在ISR中，生成的也是整个站点的html页面

区别在于，ISR在构建的时候，只需要构建发生变化的那些页面

而不需要将整个网站进行重新构建

ISR是将静态页面划分为多个小块（chunk）

当某个小块的内容发生变化时，只需要重新生成这个小块对应的HTML代码，而不需要重新生成整个页面

这样可以避免在内容变化时重新生成整个页面所带来的性能损失，并且可以更快地更新网站内容

混合渲染

混合渲染就是指在网页开发中，不同的路由使用了不同的渲染方式

如有的页面使用了SPA，有的使用了SSR, 有的使用了SSG

预渲染

预渲染就是指先在服务端生成所需要的html页面，再返回给客户端

相当于是在后端和客户端之前 多加了一层node，用于预先渲染对应的html

SSR和SSG 都是预渲染的一种实现方式

预渲染可以提高网站的性能和SEO，提升首屏渲染速度和网站的曝光率

但也就需要更多的服务器资源和开发成本

预渲染的网站，服务端返回的是一个完整的没有html网站

此时这个网站只有页面，是不可以交互的

此时需要在页面中嵌入SPA的脚本，以便于客户端可以请求对应的SPA脚本

从而在客户端激活应用，使网站可以交互，这个过程就被称之为 水合 (hydration)

所以无论是SSG页面 还是 SPA页面 都需要进行 水合

同构应用

同构应用（Isomorphic Application）是一种可以在服务端和客户端都运行的Web应用程序

使用同一套代码和技术来实现服务器端渲染和客户端渲染，实现了前后端代码的复用

在同构应用中，服务器端会先根据请求生成HTML和CSS，并将其发送给客户端

客户端再使用JavaScript对HTML和CSS进行交互和动态效果的实现

因此，服务器端和客户端生成的代码是不一致的，但它们使用了同一套代码和技术实现了相同的逻辑和功能。

在实际运行时，同构应用需要将服务器端生成的HTML和CSS和客户端生成的JavaScript代码结合起来，以实现完整的应用程序

所以 同构应用一般需要进行水合（Hydration）操作

SEO

搜索引擎的抓取

爬虫(也称蜘蛛 Crawler)是一个自动化爬取网页信息的一个应用程序

搜索引擎通过爬虫去网络中抓取一系列的网页，并存入索引区(索引区就是一个超大型的数据库)

大多数的搜索引擎的工作流程分为 3 个阶段，并非每个网页都会经历这 3 个阶段 (这里以google为例)

image.png

数据抓取

数据抓取是指爬虫在网页中收录网页并存入索引区的过程

索引编制

索引的编制也叫做索引的建立

在这个过程中，搜索引擎会分析并提取网页中的信息

在这个过中，如果发现了新的网址，会递归去进行爬取和解析

在这个过程中

  • 如果符合爬取规则，进行网页信息的收录
  • 如果不符合规则，直接丢弃
    • 空白页面
    • 重复的页面，已经有页面被收录
    • 需要鉴权的网页 --- 需要鉴权的网页可以爬取，但一般不让爬取
    • 在robots.txt中规定的不能被收录的网页

在这个过程中，爬虫程序会分析网页上的文本、图片和视频文件等相关网页信息

并对内容类似的网页归类分组归类，建立起对应的索引(一种可以方便搜索的数据结构), 随后存储在大型数据库(索引区)中

呈现搜索结果

当用户在 Google 中搜索时，搜索引擎会根据内容的类型，选择一组网页中最具代表性的网页进行呈现

并会根据网页匹配程度和网页的权重进行相应的排序

SEO

SEO 叫做 搜索引擎优化，或叫做 Search Engine Optimization

以下是一些进行SEO的方法

  1. 尽可能使用语义化标签(标记)

    • 标题使用h1 ~ h6
    • 不要过度使用h标签，多次使用不会提升 SEO

  2. 每个页面都应该尽可能拥有 标题 + 内部链接

    如果实在没有需要加载的标题和内部链接

    可以添加每个页面对应的title，并添加一个链接指向首页

    然后通过CSS的方式进行隐藏，也就是只给爬虫进行分析

  3. 确保链接可供抓取，都是有效的

  4. 使用meta标签进行优化， 设置description keywords等 方便爬虫对网页进行分析

  5. 添加合适的文本标记和属性

    • 比如使用<em>和<strong>加粗文本的标签，以提升这些内容在网页中的权重，而不是<b>和<i>
    • 为img标签添加 alt 属性，爬虫会自动爬取这些内容

  6. 在根目录中添加robots.txt

    • 规定爬虫可访问网站上的哪些网址
    • 规则那些爬虫(如google爬虫，百度爬虫)分别可以爬取那些页面
    • 该文件可以在线生成

  7. 在根目录中添加sitemap.xml

    • 可以在sitmap.xml中编写网站的站点地图
    • 也就是该网站中所有的页面
    • 确保爬虫不会漏掉某些网页
    • 该文件可以在线生成

sitmap.xml和robots.txt 需要放置在网页的根目录中

因为搜索引擎和爬虫会首先在网站的根目录下查找这两个文件，以获取网站的结构和访问规则等信息

也就是通过http://www.example.com/sitemap.xml和http://www.example.com/robots.txt来访问这两个文件

而不需要在入口文件index.html中进行引入

常见的SSR框架

SSR框架SPA框架
Next.jsReact
Nuxt3Vue2
Nuxt.jsVue3
Anglular UniversalAngular
SapperSvelte
avatar
文章
阅读
粉丝