Nodejs 第十一章(CSR SSR SEO)

简介: Nodejs 第十一章(CSR SSR SEO)

概述

在上一章的时候我们说过在node环境中无法操作DOM 和 BOM,但是如果非要操作DOM 和 BOM 也是可以的我们需要使用第三方库帮助我们jsdom

npm i jsdom

jsdom 是一个模拟浏览器环境的库,可以在 Node.js 中使用 DOM API

简单案例

const fs = require('node:fs')
const { JSDOM } = require('jsdom')
const dom = new JSDOM(`<!DOCTYPE html><div id='app'></div>`)
const document = dom.window.document
const window = dom.window
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res => res.json()).then(data => {
    const app = document.getElementById('app')
    data.forEach(item=>{
       const img =  document.createElement('img')
       img.src = item.url
       img.style.width = '200px'
       img.style.height = '200px'
       app.appendChild(img)
    })
    fs.writeFileSync('./index.html', dom.serialize())
})

运行完该脚本会在执行目录下生成html文件里面内容都是渲染好的

CSR SSR

我们上面的操作属于SSR (Server-Side Rendering)服务端渲染请求数据和拼装都在服务端完成,而我们的Vue,react 等框架这里不谈(nuxtjs,nextjs),是在客户端完成渲染拼接的属于CSR(Client-Side Rendering)客户端渲染

CSR 和 SSR 区别

  1. 页面加载方式:
  • CSR:在 CSR 中,服务器返回一个初始的 HTML 页面,然后浏览器下载并执行 JavaScript 文件,JavaScript 负责动态生成并更新页面内容。这意味着初始页面加载时,内容较少,页面结构和样式可能存在一定的延迟。
  • SSR:在 SSR 中,服务器在返回给浏览器之前,会预先在服务器端生成完整的 HTML 页面,包含了初始的页面内容。浏览器接收到的是已经渲染好的 HTML 页面,因此初始加载的速度较快。
  1. 内容生成和渲染:
  • CSR:在 CSR 中,页面的内容生成和渲染是由客户端的 JavaScript 脚本负责的。当数据变化时,JavaScript 会重新生成并更新 DOM,从而实现内容的动态变化。这种方式使得前端开发更加灵活,可以创建复杂的交互和动画效果。
  • SSR:在 SSR 中,服务器在渲染页面时会执行应用程序的代码,并生成最终的 HTML 页面。这意味着页面的初始内容是由服务器生成的,对于一些静态或少变的内容,可以提供更好的首次加载性能。
  1. 用户交互和体验:
  • CSR:在 CSR 中,一旦初始页面加载完成,后续的用户交互通常是通过 AJAX 或 WebSocket 与服务器进行数据交互,然后通过 JavaScript 更新页面内容。这种方式可以提供更快的页面切换和响应速度,但对于搜索引擎爬虫和 SEO(搜索引擎优化)来说,可能需要一些额外的处理。
  • SSR:在 SSR 中,由于页面的初始内容是由服务器生成的,因此用户交互可以直接在服务器上执行,然后服务器返回更新后的页面。这样可以提供更好的首次加载性能和对搜索引擎友好的内容。

SEO

SEO (Search Engine Optimization,搜索引擎优化)

CSR应用对SEO并不是很友好

因为在首次加载的时候获取HTML 信息较少 搜索引擎爬虫可能无法获取完整的页面内容

而SSR就不一样了 由于 SSR 在服务器端预先生成完整的 HTML 页面,搜索引擎爬虫可以直接获取到完整的页面内容。这有助于搜索引擎正确理解和评估页面的内容

说了这么多哪些网站适合做CSR 哪些适合做SSR

CSR 应用例如 ToB 后台管理系统 大屏可视化 都可以采用CSR渲染不需要很高的SEO支持

SSR 应用例如 内容密集型应用大部分是ToC 新闻网站 ,博客网站,电子商务,门户网站需要更高的SEO支持

目录
相关文章
|
存储 开发框架 自然语言处理
【Uniapp 专栏】Uniapp 的多语言支持功能详解
【5月更文挑战第14天】Uniapp是一款跨平台开发框架,提供强大多语言支持,助力开发者轻松构建支持多种语言的应用,提升用户体验和市场拓展。其特点包括灵活的语言管理、跨平台一致性。通过语言文件存储内容,切换机制让用户自由切换。注重翻译准确性和文化适应性,集成到页面和组件中,同时关注性能优化。面对翻译不一致和更新及时性等问题,Uniapp将持续发展和完善,为全球化应用开发提供强有力支持。
658 3
【Uniapp 专栏】Uniapp 的多语言支持功能详解
|
11月前
|
供应链 监控
业务连续性计划(Business Continuity Plan, BCP)
业务连续性计划(Business Continuity Plan, BCP)
|
SQL 存储 Oracle
12.Mysql 多表数据横向合并和纵向合并
12.Mysql 多表数据横向合并和纵向合并
645 3
|
Shell C++ Python
VScode 右键菜单加入使用用VSCode打开文件和文件夹【Windows】
鼠标右击文件或者文件夹,可直接用VSCode打开,非常方便。但如果我们在安装VSCode的时候没有勾选这2个选项,那就享受不到这个便捷的功能了,那么怎么办呢?此时存在2种方法进行修复:重装软件在安装的过程中勾选上这2个选项即可(肯定我们不愿意,很多配置和插件都用习惯了,再装很费事,即使是 setting sync 也免不了麻烦,尤其是配置了python或C/C++的开发环境,所以这个我们不推荐)安装勾选修改注册表右键打开文件右键打开文件夹。
2022 0
|
Kubernetes 关系型数据库 MySQL
k8s练习--通过NFS+PV+PVC+POD,部署一个MySQL服务,并将MySQL的数据进行持久化存储
本文档介绍了如何使用Kubernetes (K8s)、NFS、PersistentVolume (PV)、PersistentVolumeClaim (PVC)和Pod来部署并实现MySQL服务的数据持久化存储。Kubernetes是一个用于自动化部署、扩展和管理容器化应用的强大平台。NFS作为一种网络文件系统协议,能够使Kubernetes集群中的Pod跨节点访问共享文件。PV和PVC机制则提供了持久化的存储解决方案,确保数据即使在Pod生命周期结束后仍得以保留。
779 0
BXA
|
数据可视化 编译器 数据处理
Python优化:Cython加速
Python 作为一门高级语言具有易学、易用的特点,被广泛应用于数据处理、网站编程等领域。但与 C 和 C++ 等编译型语言相比Python 在代码的执行效率方面存在天生的不足。这使得在处理大规模数据和高性能计算等领域,Python 相对于其他语言非常劣势。
BXA
410 0
|
边缘计算 网络协议 测试技术
DoIP基础知识
DoIP基础知识
DoIP基础知识
|
索引
Office Word中题注相关的详细操作
Office Word中题注相关的详细操作
985 0
Office Word中题注相关的详细操作
|
Java Linux Maven
谁才是微服务赢家:Quarkus 与 Spring Boot
在容器时代(“ Docker 时代”),无论您是否在使用它,都不可否定java的活力。Java 在性能方面一直比较有优势,主要是因为代码和真实机器之间的抽象层,多平台的成本(一次编写,随处运行 - 还记得吗?),其中包含 JVM -between(JVM:模拟真实机器所做的软件机器)。 如今,使用微服务架构,也没有任何优势,为总是在同一个地方和平台上运行的东西(Docker 容器 - Linux) 环境构建多平台(解释)的东西。可移植性现在不那么重要了(可能比以往任何时候都重要),那些额外的抽象级别并不重要。
873 0
|
开发工具 Android开发
Android 11 替换Launcher后导致近期任务无效
Android 11 替换Launcher后导致近期任务无效
1249 0
Android 11 替换Launcher后导致近期任务无效