【Node.js】CSR、SSR、SEO

SSR 和 CSR

SSR (Server-Side Rendering)服务端渲染,请求数据和拼装都在服务端完成,相当于在服务端直接完成html。

而 Vue,react 等框架,是在客户端完成渲染拼接的,属于CSR(Client-Side Rendering)客户端渲染。

CSR 和 SSR 区别

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

SEO

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

CSR应用对SEO并不是很友好。因为在首次加载的时候获取HTML 信息较少,主要都是依靠js进行动态获取数据。搜索引擎爬虫可能无法获取完整的页面内容。

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

SEO 主要根据 TDK(title,description,keywords)。这些都是可以被爬虫爬取的。此外,语义化标签可有助于爬虫爬取。

CSR 应用:例如 后台管理系统,大屏可视化。

SSR 应用:例如 新闻网站 ,博客网站,电子商务,门户网站

相关推荐
渔夫正在掘金3 小时前
Cordis 插件热插拔能力深度解析
后端·node.js
嘟嘟07179 小时前
NestJS 入门:从 NestFactory 入口到 Module/Controller/Service 模块化结构一次讲清
typescript·node.js·nestjs
breeze jiang11 小时前
NestJS MVC 实战:用 hello 项目 7 个文件讲清分层、装饰器、依赖注入与错误处理
node.js·mvc·js
m0_3807438721 小时前
从零调用 Claude 教程
开发语言·python·node.js
烬羽1 天前
从 nest new 到 Hello World:一个最小 NestJS 项目,讲透工厂 + 装饰器 + 模块化
设计模式·node.js·nestjs
渔夫正在掘金1 天前
Cordis 中文教程:渐进式构建插件化应用
前端·node.js·ai编程
大家的林语冰1 天前
✌️ 让 Rust 再次伟大,pnpm 12 抛弃 TypeScript,移植 Rust 原地起飞!
前端·javascript·node.js
抓不住时间的沙1 天前
butterfly主题美化,打造属于自己的个性博客
java·开发语言·前端·javascript·node.js·github
抓不住时间的沙1 天前
N1搭建Hexo个人博客,部署到Github
python·docker·node.js·debian·github·arm
必须会一定会1 天前
Node.js Agent Handoff 仓库扫描 MVP:忽略规则、include 通配与稳定输出实现
人工智能·node.js·ai编程