截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引，也就是说，即使是客户端渲染，但只要是同步数据渲染（非 Ajax 获取数据，比如模板数据），搜索引擎也能抓取到相应的 HTML 片段。
（国内的百度搜索与360搜索等暂时还没有跟进动态）
但为了兼容所有的搜索引擎，可以像下面改造：
先由后端模板引擎渲染一些 HTML 片段，仅给搜索引擎抓取，不作为给用户展示的页面
然后再由客户端渲染同步或异步的数据给用户展示真正的页面
<div> <!-- 这里放置由后端模板引擎渲染的专给搜索引擎抓取的片段，用户不可见 --> </div> <script> // 接收同步数据 window.globalData = { stringValue: '${stringValueTplName}', intValue: parseInt('${intValueTplName}', 10), }; </script>
3. 导出静态 html
如果页面没有动态数据，那就好办了，直接把组件导出为静态 html，然后由客户端激活。
具体过程可以参考 官方文档。
这种方案比较好的是 nuxt.js generate 静态 HTML 文件。
目录结构：
- pages/ # 页面结构目录 - index.vue - second.vue - ... - nuxt.config.js # 配置文件 - package.json - dist # 导出静态 HTML 文件的默认目录
导出静态 HTML 文件
npx nuxt generate
如果一个项目里有多个 pages，可以这样构建：
目录结构：
- nuxt.config.js # 配置文件 - package.json - src/ - home/ # home 页面 - pages/ # 页面结构目录 - index.vue - second.vue - ... - dist # 导出静态 HTML 文件的默认目录 - about/ # about 页面 - pages/ # 页面结构目录 - index.vue - second.vue - ... - dist # 导出静态 HTML 文件的默认目录
导出静态 HTML 文件
npx nuxt generate src/home -c ../../nuxt.config.js # home 页面 npx nuxt generate src/about -c ../../nuxt.config.js # about 页面
除了上面提到的这些方式外，当然还有其他的方式，比如：
使用 Chrome Headless 模式获取组件的静态 HTML，参考 react-snap, puppeteer
官方 vue-server-renderer 导出静态 HTML
4. 总结
因为模式的改变，服务器端渲染与传统的后端模板渲染工作方式有很大的不同，所以在开发时需要与后端开发人员做好沟通，避免认知上的不同导致协作不协调。