CSR SSR SEO

jsdom

一般情况下Nodejs环境中确实无法操作DOM和BOM，但如果确实非要操作，也可以使用jsdom库

1	npm i jsdom

jsdom是一个模拟浏览器环境的库，可以让Nodejs环境中可使用DOM API

const { JSDOM } = require('jsdom')
const fs = require('node:fs')

// 参数：HTML代码
const dom = new JSDOM(`
  <!DOCTYPE html>
  <html>
    <head></head>
    <body>
      <div id="app"></div>
    </body>
  </html>
`)

const window = dom.window
const document = window.document

const app = document.getElementById("app")

// 请求一个接口，拿到数据，填充进app
// node 18+ 才能使用fetch
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res=>res.json()).then(data=> {
  console.log(data)
  
  data.forEach(item=> {
    const img = document.createElement('img')
    img.src = item.url
    img.style.height = "200px"
    app.appendChild(img)
  })

  // dom本是个对象，将其序列化成html，并写入文件
  fs.writeFileSync('./index.html', dom.serialize())
})

CSR SSR

上述使用jsdom的操作属于SSR ( Server-Side Rendering )服务端渲染，请求数据和拼装的操作都在服务端完成

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

CSR和SSR区别

页面加载方式

CSR：服务器返回一个初始的HTML页面，然后浏览器下载并执行JavaScript文件，JavaScript负责动态生成并更新页面内容；这意味着初始页面加载时，内容较少，页面结构和样式可能存在一定的延迟
SSR：服务器在返回给浏览器之前，会预先在服务器端生成完整的HTML页面，包含了初始的页面内容；浏览器接收到的是已经渲染好的HTML页面，因此初始加载的速度较快

内容生成和渲染

CSR：页面的内容生成和渲染由客户端的JavaScript脚本负责，当数据变化时，JavaScript会重新生成并更新 DOM，从而实现内容的动态变化；这种方式使得前端开发更加灵活，可以创建复杂的交互和动画效果
SSR：服务器在渲染页面时会执行应用程序的代码，并生成最终的HTML页面；这意味着页面的初始内容是由服务器生成的，对于一些静态或少变的内容，可以提供更好的首次加载性能

用户交互和体验

CSR：一旦初始页面加载完成，后续用户交互中通常通过AJAX或WebSocket与服务器进行数据交互，然后通过 JavaScript更新页面内容；这样可以提供更快的页面切换和响应速度，但对SEO不太友好，可能需要一些额外的处理
SSR：由于页面的初始内容是由服务器生成的，因此用户交互可以直接在服务器上执行，然后服务器返回更新后的页面；这样可以提供更好的首次加载性能和对搜索引擎友好的内容