SPA项目SEO方案

ssr服务端渲染

对已有的SPA项目来说改造成本非常大

预渲染

如prerender-spa-plugin、react-snap，不适用数据经常变化的页面，也不适用路由非常多的页面

rendora方案

不用改造已有的项目，但是是go语言，对前端不太友好

另做一套简易版网站

没有样式，只有符合seo规范的html标签和对应的数据

 

技术方案

koa：创建ssr服务

react：实现服务端渲染要展现给搜索引擎蜘蛛的内容，用renderToString读取为字符串

path-to-regexp：匹配路由的插件

renderTemplate：解析模板，并根据配置数据渲染出最终的页面，自己实现的方法

koa-static：静态服务，当不是蜘蛛请求时返回正常的页面内容

http-proxy-middleware：代理插件，将接口请求代理到后端服务

nodemon：热更新node服务，检测文件改变即重启node服务

babel：用babel支持es6模块及其他es语法，包括插件@babel/core，@babel/preset-env，@babel/preset-react，@babel/register，babel-polyfill

rollup：用rollup打包之后用于生产环境，使用插件@rollup/plugin-babel，@rollup/plugin-commonjs，@rollup/plugin-node-resolve，rollup-plugin-copy，rollup-plugin-delete

cross-env：跨平台改变环境变量为develop或product