这可能是最简单的改造方案了
简介
SSR是Server Side Render简称。
在服务端使用node渲染出html页面，再传输到客户端。常规单页应用html只返回极少部分dom字符串+script动态生成网页，不利于google 爬虫的抓取。因此为了google更好的搜录网页，需要在服务端（node）执行js以渲染出html给google爬虫收录。
通用代码
- 由于js会在node端执行，所以不能包含客户端浏览器植入的对象，比如window，location，localStorage，navigator,document等对象。
- 服务端避免状态污染
官网说明
解释: 下面一段代码记录当前用户发起的请求数量
export const http = axios.create({baseURL:'/api'}) let count = 0 http.interceptors.request.use((config) => { count++ return config })
- 不能在node端运行setInterval 等代码，因为此类代码对于服务端染没有任何意义，只会造成node内存泄漏，必须限制在客户端运行。
- renderToString 可以将组件渲染成html字符串（可以用renderToNodeStream等流式渲染方法）
- Suspense 组件，此组件为node端获取数据后渲染的关键，使得由此组件包裹的后代组件，可以使用
async setup函数 - vite.ssrLoadModule 利用vite将vue打包后执行，此为调试模式关键。
但还有2个问题
- 如何获取数据后渲染
- 如何将服务端的请求数据持久化，避免客户端二次请求
{{b}}
app组件：
【vite + vue3 项目ssr架构改造】服务端代码：
const ctx = {}
const html = await renderToString(App,ctx)上述html会渲染出b的数值。其中在组件中可以使用useSSRContext获取ctx。ctx.modules 含有当前所渲染页面需要的依赖js，css，图片等。可将这些依赖加入预下载，加快渲染速度。
2. 解决客户端重复请求数据 在服务端，请求数据后，将数据保存到window变量中，在客户端再次请求时，发现已经有数据了，那么就不必在此请求。直接使用window中的数据。是否删除次数据，依照情况而定。
此处附一个axios的请求做法。
ssrCache.ts
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from 'axios'
import md5 from 'md5'
type MapData = {
[k: string]: {
data: any,
count: number
}
}
let map = {} as MapData
const getKey = (config: AxiosRequestConfig) => {
const { url, data, baseURL, params } = config
let paramsStr = ''
for (let key in params) {
if (Object.prototype.hasOwnProperty.call(params, key))
paramsStr += `${key}=${params[key]}`
}
return md5(baseURL || '' + url + data + paramsStr).substring(0, 8)
}export const createProxy = (http: AxiosInstance) => {
const ssr = typeof window === 'undefined'
const request = async (config: AxiosRequestConfig) => {
const key = getKey(config)if (ssr) {
if (map[key]) {
// 只有当页面的数据请求数据做缓存。并且记录请求次数
map[key].count++
return map[key].data
}
try {
const res = await http(config)
let data = https://www.it610.com/article/res
if (res.request) data = res.data
map[key] = { data, count: 1 }
return res
} catch (err) {
return Promise.reject(err)
}}
if (window.__SSRDATA__ !== undefined) {
const map = window.__SSRDATA__
if (map[key]) {
map[key].count--
if (map[key].count === 0) {
delete map[key]
}
return map[key].data
}
}return http(config)
}
const fn = (method: string) => {
return (url: string, config: AxiosRequestConfig) => {
return request({ url, method, ...config })
}
}const set = new Set(["get", "post", "options", "delete", "put", "patch"])
// 此处做一层proxy，因为axios可以axios()使用，也可以axios.get()使用
// 需要将他们转换成一样的请求模式
return new Proxy(http, {
get(target, key: keyof AxiosInstance) {
if (set.has(key.toLowerCase())) {
return fn(key)
}
return http[key]
},
apply(v) {
return request(v)
}
}) as AxiosInstance
}export const collect =() => {
map={}
return () => ``
}使用：
const http = createProxy(axios.create({baseURL:''}))当在ssr中使用http获取数据，会将所有返回记录到map中,再将其转换为字符串潜入到html字符串中
const getScriptString = collect()
let html = await renderToString(App,ctx)
html = getScriptString() + html
