如今前后端分离的单页应用已经是主流，无论你是用 React 还是 Vue 框架，不可否认，开发效率和质量确实提升了，相比传统的 HTML + Jquery 开发的方式。

可是当你完成项目后，你还是得面对项目的推广问题，SPA 项目只有一个 HTML 页面，而且里面一般都没有太多文字描述，只有一堆 Js 和 CSS 代码，这个非常不利于搜索引擎爬取和索引数据。怎么做 SPA 项目 的搜索优化，这个已经成为目前我认为 React 框架的最大软肋。 也许这个不是 SPA 框架的问题，而是搜索引擎的问题。不过，目前看来，最实际的还是从 SPA 框架入手。

目前比较主流的做法有两种，一种是 SSR，也就是服务端渲染，因为 Js 代码是可以在服务端运行的，前后端分离的代码都在服务器运行，用户通过网址请求后，服务器返回渲染后的 HTML 代码。另外一种是静态页面生成，就是在服务器上存储的静态文件不是 React 的脚本，而是渲染后的 HTML 加样式。它和第一种的主要区别在于，它是纯静态的，在浏览器运行，而第一种实际上是后端生成页面，是需要 nodejs 环境的。

这两种方法各有优缺点，我的博客现在使用的是第二种。因为我认为完全不需要后端环境的前端代码，才是最经济和实惠的。如果 SPA 项目使用了上面两种方法，那么搜索引擎优化的问题就不存在了，直接使用传统方式优化即可。

但是，如果你的 SPA 项目暂时没法做到渲染后再发布。那确实对 SEO 会有些影响。当然也有一些弥补的办法，不过使用没有渲染后发布的效果好，而且也不能做到很细致的优化。办法如下：

1、优化 index.html 

   对 SPA 项目来说，能优化的只有主页这一页，其它页面都是 Js 代码运行后的效果，一般搜索引擎是没办法获取到的，即便是获取到了，也有可能不是页面逻辑想展现的。

2、针对搜索引擎提供定制的 sitemap 或者是 渲染后的页面

   有些搜索引擎支持定制爬虫的索引，所以我们可以单独给爬虫提供爬取内容

至于具体需要优化什么什么内容，我们下次单独写篇文章再聊。这里不再细谈。