CSR SSR SEO```js node中无法操作dom和bom，如果非要操作可以使用jsdom const { JS

node中无法操作dom和bom，如果非要操作可以使用jsdom

const { JSDOM } = require('jsdom');
const root = new JSDOM(`<!DOCTYPE html><div id="app"></div></html>`);

const axios = require('axios');
const fs = require('fs');

const window = root.window
const document = window.document;
axios.get('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(data => {
    data.data.forEach(item => { 
        const img = document.createElement('img');
        img.src = item.url;
        img.style.width = '200px';
        img.style.height = '200px';
        document.getElementById('app').appendChild(img);
    })
    // console.log(root.serialize());
    fs.writeFileSync('./index.html', root.serialize());
});
// 上面属于SSR，服务端渲染请求数据和拼装都在服务端完成
// Vue react是在客户端渲染的，属于CSR

CSR和SSR区别
1.页面加载方式:
CSR: 服务器返回一个初始的html页面，然后浏览器下载并执行js文件，
js负责动态生成并更新页面内容，这意味着初始页面加载时，内容较少，
页面结构和样式可能存在一定延时

SSR: 服务器在返回给浏览器之前，会预先在服务器端生产完整的html页面，
包含了初始页面内容，浏览器接收的是已经渲染好的页面，初始加载速度快

2.内容生产和渲染
CSR:在CSR中，页面的内容生成和渲染是由客户端的js脚本负责，当数据变化时，js会生成新的dom，
这种方式使得前端开发更加灵活，可以创建复杂的交互和动画效果

SSR: 服务器渲染页面时会执行应用程序的代码，生产最终的html页面，页面的初始内容是由
服务器生成，对于一些静态或少变的内容，可以提供更好的首次加载

SEO: 搜索引擎优化
CSR对SEO并不友好，因为首次加载的时候获取的html信息较少，搜索引擎爬虫可能无法获取完整的
页面内容，而SSR在服务器端预先生成了完整的html页面，搜索引擎爬虫可以直接获取完整的页面内容，
有利于SEO

CSR: toB后台管理系统 大屏可视化 渲染不需要很高的SEO支持
SSR: toC新闻网站，博客网站，电子商务门户网站，需要更高的SEO支持