likes
comments
collection
share

Node 第十一章 CSR SSR SEO

作者站长头像
站长
· 阅读数 4

前章回顾

  • 在node环境中无法操作DOM 和 BOM，但是如果非要操作DOM 和 BOM 的话，通过第三方库jsdom也可以实现

SSR渲染

  • SSR渲染又叫做服务端渲染，服务器端渲染（SSR）是一种传统的网页渲染方式，其中网页的HTML内容在服务器上生成，然后发送到客户端（用户的浏览器）进行展示。这与客户端渲染（CSR）形成对比，在CSR中，HTML内容通常在客户端浏览器中动态生成。

SSR的工作原理

  1. 用户请求：用户请求一个网页。
  2. 服务器处理：服务器接收请求，运行应用的服务器端代码来生成页面内容，包括HTML、CSS和初始状态的数据。
  3. 发送HTML：服务器将生成的HTML和相关资源（如CSS、JS）发送给浏览器。
  4. 浏览器展示：浏览器接收到完整的HTML，渲染页面并展示给用户。
  5. 客户端激活：浏览器加载页面的JavaScript文件，JavaScript代码在浏览器中运行，页面变得交互式（这一步也称为“hydration”）。

SSR的优点

  • 更快的首屏时间：用户不需要等待所有JavaScript都加载和执行完毕才能看到完整的页面，因此首屏展示更快。
  • 更好的SEO：搜索引擎更容易抓取和索引服务器渲染的页面，因为内容在HTML中直接提供，而不是通过JavaScript动态生成。
  • 对低性能设备友好：服务器端已经完成了渲染工作，客户端设备的计算负担较轻。

SSR的缺点

  • 服务器负载：每次页面请求都需要服务器生成HTML，对服务器的计算资源要求更高。
  • 用户体验：页面在与服务器通信时可能会有短暂的空白期，特别是在数据更新或页面跳转时。
  • 复杂度：服务器端渲染的应用通常比纯客户端渲染的应用更复杂，因为它们需要处理客户端和服务器两端的逻辑。

使用场景

  • 服务器端渲染（SSR）：在 Node.js 环境中渲染初始的 HTML 页面，通常用于提高 SEO 和首屏加载性能。
  • 测试：用于测试需要 DOM 环境的 JavaScript 代码，尤其是在不启动浏览器的情况下进行自动化测试。
  • 网页抓取和自动化：加载和操作网页，模拟用户操作，用于爬虫或自动化脚本。
  • 网页应用原型开发：允许开发人员在没有浏览器的环境中快速构建和测试网页应用的原型。

jsdom主要作用和功能

  • jsdom 是一个纯 JavaScript 实现的 WHATWG DOM 和 HTML 标准库，它在 Node.js 环境中模拟了一个 web 浏览器的环境
npm i jsdom
  1. DOM 操作：
    • 提供一个类似于浏览器中的 document 对象，允许像在浏览器中一样创建、修改和查询 DOM 元素。
  2. CSS 解析：
    • 支持读取和应用 CSS 规则，虽然它不会渲染实际的布局，但可以理解样式信息。
  3. 事件模拟：
    • 可以在 DOM 元素上触发事件，模拟用户交互行为，如点击、输入等。
  4. Canvas 支持：
    • 通过第三方库可以模拟 <canvas> 元素的功能（jsdom 自身不包含绘图能力）。
  5. 资源加载：
    • 能够加载和执行外部脚本和资源，例如 JavaScript 文件或图片。
  6. 浏览器 API 模拟：
    • 提供浏览器全局对象如 window 和 navigator，以及其他 API 如 localStorage、XMLHttpRequest 等。
  7. 测试工具：
    • 常用于测试环境中，为在 Node.js 环境下运行的客户端 JavaScript 代码提供测试平台。

使用案例

  • 这就是一个典型的SSR渲染，因为目前所有的操作都是在服务端去完成的
    • 在jsdom库中，serialize是一个实例方法，用于将当前的JSDOM对象（也就是虚拟的DOM结构）转换成一个字符串，这个字符串是完整的HTML标记，包括DOCTYPE声明。当我们想要获取经过JavaScript操作和修改后的完整HTML内容时，这个方法就很有用。
    • 简单来说，serialize方法可以获取经过各种操作（比如添加或删除元素、修改属性等）之后的最终HTML代码，这与浏览器中查看“页面源代码”的效果相似，但是是在服务器端完成的。
// 引入 jsdom 库的 JSDOM 类
const { JSDOM } = require('jsdom');
// 引入 Node.js 的 file system 模块，用于文件操作
const fs = require('node:fs');

// 创建一个新的 JSDOM 实例，模拟一个简单的 HTML 页面
const dom = new JSDOM(`<!DOCTYPE html><div id='app'></div>`);

// 从 JSDOM 实例中获取 window 对象，该对象类似于浏览器环境中的 window
const window = dom.window;
// 从 window 对象中获取 document 对象，可以用来操作虚拟的 DOM
const document = window.document;

// 使用 fetch API （注意：在 Node.js 环境中，只有Node18版本以上才有fetch这个API）
// 获取随机猫咪图片的API，查询10张图片
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1')
  .then(res => res.json()) // 解析响应为JSON
  .then(data => {
    // 遍历响应数据，对于数组中的每个猫咪对象
    data.forEach(cat => {
        // 创建一个新的 img 元素
        const img = document.createElement('img');
        // 设置 img 元素的 src 属性为猫咪图片的 URL
        img.src = cat.url;
        // 设置图片的样式，宽和高为200像素
        img.style.width = '200px';
        img.style.height = '200px';
        // 将 img 元素添加到页面的 '#app' 元素中
        document.getElementById('app').appendChild(img);
    });

    // 将模拟 DOM 的内容序列化成字符串，然后写入到 'index.html' 文件中
    fs.writeFileSync('index.html', dom.serialize());
  });

jsdom 通过模拟足够真实的浏览器环境，让服务器端 JavaScript 应用能够处理复杂的前端逻辑，这在前后端不分离的应用或是需要在服务器端执行前端逻辑的场景中非常有用。

Node 第十一章 CSR SSR SEO

Node 第十一章 CSR SSR SEO

CSR渲染

  • CSR渲染又叫做客户端渲染，网页的内容主要是通过客户端JavaScript在用户的浏览器上动态生成的
  • 在客户端渲染过程中，浏览器首先加载一个几乎为空的HTML文件，这个文件包含了启动应用所需的JavaScript脚本(所以第一次加载会很慢)。当JavaScript被下载并执行后，它将动态地在浏览器中构建和渲染页面的元素，通常是通过操作DOM来实现的。客户端渲染通常与单页面应用（SPA）相关联，如使用React、Vue或Angular构建的应用。

客户端渲染的特点

  • 初始载入：首次加载时，服务器只发送一个简单的HTML页面和必要的JavaScript代码。
  • 交互性：页面的后续动态变化都是通过客户端JavaScript直接在浏览器中进行的。
  • 数据请求：应用的数据通常通过异步请求（如使用Ajax或Fetch API）从服务器获取，并在客户端进行处理和展示。
  • 用户体验：在应用加载后，用户可以获得流畅的交互体验，因为页面无需重新加载即可更新内容。
  • 资源利用：客户端渲染依赖用户设备的资源（CPU、内存）来处理渲染和数据交互。
  • SEO优化：客户端渲染的SPA可能需要额外的SEO优化措施，因为搜索引擎爬虫在执行JavaScript时可能不如服务器渲染的页面高效(等下还会提到)

CSR SSR的区别

  • 内容生成位置：CSR在客户端生成内容，SSR在服务器生成内容。
  • 首屏加载速度：SSR通常提供更快的首屏加载，因为HTML是预先 生成的。
  • 资源利用：CSR主要依赖客户端资源，SSR增加了服务器的计算负担。
  • SEO优化：SSR对搜索引擎抓取更友好。
  • 开发复杂度：SSR涉及更复杂的配置和构建过程，需要处理客户端和服务器两端的逻辑。

SEO

  • SEO 的全称是：（Search Engine Optimization，搜索引擎优化）

CSR与SEO的联系

  • 我们知道CSR是客户端的，通过上面的渲染特点-初始载入。我们能够认为说初次载入客户端的内容是很少的，那眼见为实，就让我们来验证一下
  • CSR典型案例：按钮 - View Design (iviewui.com)

Node 第十一章 CSR SSR SEO

  • 通过这张图片，我们能看出网页的源代码是非常少的，才七八行。也就基础的html结构、一个函数自调用和引入一点js文件，基本上就没了
  • 因为在首次加载的时候获取HTML 信息较少 搜索引擎爬虫可能无法获取完整的页面内容

SSR与SEO的联系

Node 第十一章 CSR SSR SEO

  • 通过该页面的源代码，我们能够看到，关键的信息是已经提前在服务端加载好了再丢到客户端的，跟SCR是有所不同的。所以搜索引擎爬虫可以直接获取到完整的页面内容。这有助于搜索引擎正确理解和评估页面的内容

Node 第十一章 CSR SSR SEO

TDK

  • SEO讲究三个东西，分别是TDK。DK在SEO中指的是“标题（Title）”、“描述（Description）”和“关键词（Keywords）”，这三个元素对网页的搜索引擎优化（SEO）至关重要。
  • 我认为这三个东西也可以叫做：元数据优化

标题（Title）：

  • 这是网页的标题标签（<title>），在浏览器的标题栏和搜索引擎结果页（SERP）中显示。

描述（Description）：

  • 描述是元描述标签（<meta name="description" content="...">）中的文本，虽然它对排名影响不大，但在搜索引擎结果页中显示，为用户提供了页面内容的简短摘要。

关键词（Keywords）：

  • 关键词是指明网页内容主题的词或短语，它们应该反映用户可能用来搜索你的内容的词汇。
  • 过去，<meta name="keywords" content="...">标签被用来明确指出页面的关键词，但由于滥用和过度优化，现在这个标签对大多数搜索引擎的排名几乎没有影响。

其他关键因素

  1. 高质量内容：创建有价值、相关且吸引人的内容，这是提高网站排名和吸引访问者的基石。
  2. 用户体验（UX）：确保网站易于导航，页面加载速度快，设计响应式以适应各种设备和屏幕尺寸。
  3. 移动优化：随着移动搜索的增加，一个移动友好的网站对于保持和提升SEO排名至关重要。
  4. 内链和外链建设：使用内部链接策略来帮助搜索引擎更好地理解网站结构，同时获取高质量的外部链接以增加网站的权威性。
  5. 网站结构：清晰的网站结构(HTML5中的语义化标签)和逻辑的URL结构不仅有助于用户导航，也便于搜索引擎爬虫理解网站内容。

他们分别适合做什么网站

SSR网站

  1. 内容驱动的网站：
    • 如新闻、博客、文章发布平台等，这些网站内容为王，需要良好的SEO来吸引更多流量。
  2. 电商网站：
    • 对于加载速度和SEO都有高要求的电商网站，SSR可以提供更快的首屏加载时间，提高转化率。
  3. 营销和宣传网站：
    • 对于需要优化搜索引擎排名以吸引潜在客户的网站，SSR能够确保内容被搜索引擎有效抓取。
  4. 初次访问速度要求高的应用：
    • 对首屏加载速度有严格要求的应用，SSR可以减少白屏时间，改善用户体验。

CSR网站

  1. 单页面应用（SPA）：
    • 使用React、Vue、Angular等构建的应用，用户在应用内的导航无需重新加载整个页面，提供了流畅的用户体验。
  2. 富交互应用：
    • 需要大量动态交互和即时内容更新的应用，如在线协作工具、社交网络平台。
  3. 应用程序仪表板：
    • 后台管理界面、分析仪表板等，用户登录后进行大量的数据交云和操作。
  4. 对SEO要求不高的内部系统或应用：
    • 例如企业内部管理系统、SaaS应用等，这类应用可能只对特定用户开放，不依赖搜索引擎带来流量。