CSR-客户端渲染
1.client side render: 客户端渲染
SPA :single page app
优点：页面只需要加载一次，首屏渲染快
缺点：不利于seo,(初次加载只渲染了个空页面)
2.seo的爬取原理：
a.通过自动化爬取工具爬取页面
b.建立索引：通过页面中的title a img h1-h6去筛选页面，不满足的从临时库中删掉，其他的进入索引中
c.呈现搜索结果
3.给网页做seo优化：
a.使用语义化的标签
b.加title标签 meta标签的keyword description
c.img alt属性，a标签正确的链接地址，b标签的使用
d.项目根目录下添加robots.txt(网上自动生成这个文件)， 规定爬虫可访问您网站上的哪些网址
e.项目根目录下添加sitemap.xml站点地图：在站点地图上列出所有网页，确保爬虫不会落掉某些网页
SSG-静态站点生成
ssg: static site generate，是预先生成好的静态网站。
构建ssg应用常见的库和框架： vue nuxt、react next.js
优点：访问速度快，直接给浏览器返回静态的html,也有利于seo
缺点：页面是静态的，不利于展示实时性的内容，实时性的更适合ssr。如果站点更新了，那必须得重新再次构建和部署
SSR-服务端渲染
在服务端渲染页面，并将渲染好的HTML返回给浏览器呈现，客户端请求js资源实现水合，页面可以实时交互，也叫同构应用
步骤：
用户打开浏览器访问服务器，服务器生成一个html返回给浏览器，浏览器渲染静态页面，但是目前是没有交互的，发现页面有一些js资源，去请求，请求来之后就可以激活应用程序，才变成可交互的页面
优点： 更快的首屏渲染速度，更好的seo
缺点：增加了一定的开发成本，消耗更多的服务器资源
Node Server的实现
// 初始化项目
npm install webpack webpack-cli nodemon express webpack-node-externals
// src/index.js
const express = requie('express')
const app = express()
app.get('/', (req, res) => {res.send('hello world~')
})
app.listen(3000, () => {console.log('3000端口启动成功！')
})
// package.json配置启动，验证上面是否启动成功
"scripts": {"dev": "nodemon ./src/index.js" // 实时监听这个文件的变化
}// config/webpack.config.js 打包后端服务
const path = require('path')
const webpackNodeExternals = require('webpack-node-externals')
module.exports = {target: 'node', // 默认是web-浏览器环境 作用是解析遇到node的内置模块（path, fs）就不会被打包进去mode: 'production',entry: './src/index.js'，output: {filename: 'server_bundle.js',path: path.resolve(__dirname, '../build/server')}externals: [webpackNodeExternals()] // 不需要打包进bundle.js的库
}// 使用webpack打包试试
// 配置一下打包脚本 package.json
"script": {..."build:server": "webpack --config ./config/webpack.config.js ./src/index.js --watch", // --watch是webpack的脚本命令"start": "nodemon ./build/server.js" // node 没有--watch, 所以用了nodemon
}
