越来越多外贸建站采用 React、Vue 等框架做单页应用（SPA），交互流畅、开发高效，却给 SEO优化 埋了雷：页面主体内容靠 JavaScript 在浏览器里跑出来，搜索引擎爬虫初次来访时可能只看到空壳，收录慢甚至漏收，自然流量莫名走低，却很难定位原因。
问题到底出在哪
传统页面，HTML 里就装着文字，爬虫一读就有。SPA 的初始 HTML 常常是空的，内容要等 JS 执行后才注入。Google 虽能执行 JS，但会把它放进「渲染队列」延后处理，且并非百分百稳定、并非所有爬虫都支持。结果就是重要页面迟迟不进索引，外贸网站推广做了半天却没被搜到，技术选型在悄悄吃掉你的流量。
两波抓取机制
Google 对 JS 站点通常是「先爬后渲染」：第一波先抓原始 HTML 并发现链接，第二波才在渲染队列里执行 JS、看完整内容。这个间隔可能从几小时到几周不等，新站或低权重站尤其慢。理解这点，就不会误以为内容发了就立刻能被收。搜索引擎优化在 JS 站上更考验耐心与架构。
服务端渲染（SSR）
最直接的解法是服务器端把页面渲染成完整 HTML 再发给爬虫和用户，这就是 SSR。Next.js、Nuxt 都为此而生。这样搜索引擎优化拿到的就是实打实的内容，不必等 JS、不必赌渲染队列。代价是架构改造成本与服务器压力，但换来的是收录确定性，对内容型与电商型站点尤其划算。
预渲染（Prerender）
若改架构成本高，可对爬虫返回预渲染的静态快照。市面有预渲染服务，也可用无头浏览器自己生成。核心是：给爬虫看的版本必须有完整文字、完整链接与正确状态，而不是空白壳。注意区分真假爬虫，避免对普通用户也返回快照影响体验，也要定期刷新快照保证内容新。
正确配置内部链接
SPA 常用哈希或 JS 跳转，爬虫可能跟踪不到。应确保重要入口用可抓取的正常链接，配合 sitemap 把路由都列出来，让搜索引擎优化能顺着发现每个页面。别让关键产品藏在只有点击才加载的脚本里，爬虫不会替你点。
与 Core Web Vitals 的关系
JS 重往往拖慢交互指标，而 Core Web Vitals 本身是排名信号。做好 JS SEO 不只是为收录，也是为体验。用代码分割、懒加载、预连接等手段减负，既能让爬虫拿到内容，也能让用户打开更快，一举两得。
怎么检测是否中招
- 用 Search Console 的网址检查看 Google 抓到的真实内容；
- 用富媒体测试或渲染对比工具看「渲染版 vs 原始版」；
- 禁用 JS 后看页面还剩什么，剩下的就是爬虫基线；
- 查收录量与索引覆盖报告，找「已抓取未编入索引」的异常。
动态不等于不可见。只要让爬虫拿到完整 HTML，SPA 同样能做好搜索引擎优化，体验与收录可以兼得。
仁泽同创在出海营销服务方案里，常帮客户评估前端架构对收录的影响，避免技术选型悄悄吃掉自然流量。登录 rztc.cn 了解仁泽同创的出海营销服务方案，让动态站点既快又能被搜到，前端炫技不再以曝光为代价。
混合渲染：折中方案
若全站 SSR 成本太高，可采用混合渲染：内容页、产品页走服务端渲染保收录，后台与交互重的页面保留 SPA 体验。这样在体验与搜索引擎优化之间取得平衡，不必二选一。现代框架大多支持按路由切换渲染策略，实施门槛已大幅降低，中小团队也能落地。
监控 JS 报错
即便做了 SSR，也要监控线上 JS 是否报错，因为渲染队列执行时一旦脚本异常，内容同样取不到。用日志与真实用户监控捕捉报错，定期用站长工具复检关键页的渲染版，防止「以为好了其实没好」。搜索优化是持续动作，不是上线一次就完，尤其 JS 站更要靠巡检兜底。
渲染等待期如何自救
在等待渲染队列处理的窗口里，别干等。先把站点地图做准、把内链织密、把服务器响应压到最低，让爬虫第一次来就能拿到尽量多的信号。同时用 Search Console 的「网址检查」主动请求重新抓取重要新页，能在一定程度上缩短等待。搜索引擎优化在 JS 站上，拼的是把确定性能做的都做满，用架构确定性抵消渲染的不确定性。
About the Author: 仁泽同创
