而如今的互联网大环境下，网站的性能无不直接决定了用户的体验感和对搜索引擎的排名至关重要。虽说像前后端分离这样的后台分离架构能提高开发效率，但往往也会给SEO优化带来新的难题，比如怎样才能保证搜索引擎可以准确抓取动态渲染的内容呢？本文会结合实际项目经验，详细剖析3种经过实践检验的技术方案，还会给出具体的操作步骤、推荐使用的工具以及相关数据对比，助力开发者在保证技术先进性的同时，提升搜索可见度。

‌一、为什么后台分离架构会“杀死”SEO？‌

由于传统的SSR（服务端渲染）将网页的内容全部在服务器端就生成了完整的HTML，因此对搜索引擎的爬虫来说也就直接就能“爬”到了。但随着对后台的分离如Vue/React的api接口的开发，页面的内容都将由javascript动态的渲染出来，而大多数的爬虫对js的执行能力都有限的,最终都将导致关键的内容都无法被我们所熟知的爬虫所索引.。

如某电商网站在将React作为其页面的主要前端框架后，仅仅两周的时间就将原有的商品详情页的搜索引擎的流量就给“杀”了62%。经一一排查后发现，Googlebot都只能抓取到空的壳子般的HTML页面，却未能将页面中的价格、商品的详细的描述等核心的内容给抓取到！。

‌二、方案1：预渲染（Prerendering）实战‌

适用情况：那些内容更新不频繁的企业官网或者个人博客

依托于将静态的HTML在构建阶段就提前生成出来，自然而然就能绕过了实时的渲染依赖，从而大大提高了页面的加载速度和用户的浏览体验

‌操作步骤‌：

‌工具选择‌：使用Prerender.io或VuePress（针对Vue项目），配置生成路由对应的静态文件；

针对动态内容的处理方式：可借助<meta>标签来标记动态内容区块，再结合CDN边缘计算，实现内容的局部更新操作

通过对比Google Search Console中的“URL检查工具”对的渲染前后的快照我们就能对网站的SEO效果做一个基本的验证了。

采用对该旅游网站的Prerender的应用手段，最终使得其移动端的首屏的加载时间从3.2秒的高达跃升至了1.4秒的超低，关键的核心词也随之而的 Ranking 的回升至TOP10的占比都大幅的提升了38%。

‌三、方案2：混合渲染（Hybrid Rendering）策略‌

适用的情况：那些既需要动态交互功能，又得兼顾搜索引擎优化的内容类平台

借助将首屏的服务端渲染（SSR）与后续的客户端渲染（CSR）的技术组合起来，我们可以更好的提升了用户的浏览体验和交互的流畅性

‌具体实施‌：

框架设置方面呢，可以选择Next.js（基于React）或者Nuxt.js（基于Vue），开启SSR模式，并且指定那些关键路由进行预渲染操作

凭借对SEO关键的字段的优先通过API的直出，对如评论等非核心的内容的延迟加载既能有效的提高了用户的浏览体验，也能有效的降低了对服务器的请求量，从而提高了网站的整体的加载速度和用户的体验度

性能优化方面：我们可以借助Lighthouse工具来检测首屏的相关指标，保证首字节时间（TTFB）低于500毫秒。

但我们却从某新闻APP的经历中得到了教训——一旦未将动态路由的fallback都配置好，就可能会导致新增的文章页都返回404的错误的结果，这也就意味着我们就需要定期的去生成sitemap.xml并将其提交给爬虫等一系列的工作了。

‌四、方案3：动态渲染（Dynamic Rendering）黑科技‌

适用情况：对于那些需求变化大、预算又比较充裕的大型项目来说，非常合适

采用在中间层对访问的来源进行了逻辑的识别对爬虫的请求就直接返回了预先的渲染好的HTML手段，而对正常的用户的请求就直接返回了正常的SPA的体验

‌关键步骤‌：

‌服务端识别‌：使用Rendertron或Puppeteer搭建渲染服务，匹配User-Agent（如Googlebot）；

凭借对高频的访问URL的预先的缓存的策略的实施，就可以有效的避免了实时的渲染所带来的巨大的压力

‌避坑指南‌：需在robots.txt中声明Disallow: /_rendertron/防止爬虫误入。

成本分析：当某个SaaS平台引入动态渲染技术后，每月服务器成本涨了2.3万元，不过呢，自然搜索流量带来的转化收益也提升到了每月18万元。

‌五、必备工具链推荐‌

诊断抓取工作呢，是借助Screaming Frog工具来开展，主要目的是检测那些未被索引的页面

通过对WebPageTest的多地域的加载测试我们对网站的性能监控有了更为全面的了解

借助对ELK Stack的日志的深入的分析，我们就可以对爬虫的访问行为有一个比较全面的了解和把握，有效的防范了对我们网站的爬虫的侵害，对我们网站的安全起到了重要的作用

通过将GitLab的CI/CD（持续整合/持续部署） pipeline的流程与自动化的部署相结合，既能有效地提高了开发的效率，又能使得项目的稳定性和可靠性大大地得到提高

‌总结与取舍建议‌

后台分离SEO的本质是‌用技术换效率‌。若团队资源有限，优选预渲染；若内容实时性要求高，则需接受混合渲染的开发复杂度。记住：没有完美的方案，只有最适合当前业务阶段的选择。