单页应用

你可能会说：

• “AI 给我搭的 React 网站，本地打开挺好，为什么发出去的链接预览是空白的？”
• “我的网站换页面不刷新、很顺滑，可为什么搜索引擎搜不到？”

它是什么

传统网站每点一个链接，服务器就送来一张做好的新页面。单页应用只在第一次送来一个几乎空白的 HTML 和一大包 JavaScript，之后换页、加载内容都由浏览器里的 JavaScript 完成，所以切换顺滑，用起来像一个 App。

代价在第一次返回的那张 HTML 上：它通常只有一个 <div id="root"></div>。人用浏览器看没问题，但任何只读 HTML、不运行 JavaScript 的访问者——很多爬虫、社交平台的链接预览——看到的都是空的。

AI 工具起项目时最常给的模板（Vite + React）默认就是单页应用。做登录后才能用的工具、后台很合适；做需要被陌生人搜到的内容站，就要换一种渲染方式。

打个比方

像寄出一个料理包加一张菜谱：收件人得自己开火才能吃上。浏览器会开火，很多爬虫不会。

在这个网站里

本站在 2026 年 9 月之前就是一个 React 单页应用，用 curl 请求任何一篇文章，拿到的都只有一个标题和空的 root 节点（第 4 课讲的就是这次事故）。现在它改成了静态生成，右键"查看网页源代码"，正文就在里面。

容易搞混的地方

你可以这样告诉 AI

接下来去哪

对比着看

• 静态生成——构建时就把每个网址对应的完整 HTML 生成好，有人访问时直接发出去。
• 服务端渲染——每次有人访问时，服务器现场运行代码，生成这一页的完整 HTML 再发回去。

接着看

• 爬虫——自动访问网页、读取内容的程序；搜索引擎、社交平台的链接预览、AI 模型都靠它了解你的网站。
• 页面元信息——写在 HTML 头部、给程序看的页面说明：标题、描述、分享图，决定搜索结果和分享卡片长什么样。

在这些课里出现

• 第 4 课 · 为什么搜索引擎看不到你的网站

相关的真实事故

• 爬虫拿到的 HTML 里，只有一个标题和一个空盒子