技术选型体验站

四种渲染策略、3D 代价、边缘节点——每个决策点做成可交互的页面, 用体感和 DevTools 对照建立直觉。

开始第一次对照 →
LIVE · 渲染时钟对照采样 0 次
  • SSG构建时刻 · 不重建不变采样中…
  • SSR每次请求现算 · 刷新必变采样中…
  • ISR静态缓存 · 约 30 秒一跳采样中…
  • CSRHTML 空壳 · 数据由 /api 到达采样中…
每 6 秒重新请求本站四个真实端点

选型不该停在文章和 benchmarks。这里把每个决策点做成能刷新、 能 view-source、能开 Network 的真实页面,让差别自己显形。

给谁用自用站:写代码前把选型直觉磨利。不对外、非产品、不追流量。

看什么view-source 的时间戳、Network 的传输量、首屏是空壳还是整页。

怎么逛主站 Next.js 全家桶;右上角随时跳 Astro 真·零 JS 对照站。

多少成本规则引擎纯函数、LLM 可选开关,运行时不花一分钱。

怎么看

不用记结论:打开 view-source 和 Network,数字自己对你说。以下是本站四个真实端点的实测。

view-source · /rendering/ssg
<main>
  <h1>SSG — 静态生成</h1>
  …
  <dt>页面生成时间(构建时刻)</dt>
  <dd>2026-10-28T08:49:24.000Z</dd>
  …
  <h3>示例卡片 01</h3>
  <p>这张卡片用于对比…</p>
卡片和时间戳都在 HTML 里——这就是 SSG。
Network · 实测传输量
  • /rendering/ssg20.8 KB整页含 16 张卡
  • /rendering/csr10.4 KB空壳,无卡片
  • /api/cards1.5 KBCSR 的数据后到
  • /three 首屏 JS568 KB3D 的体积代价
同为卡片页:SSG 一次 20.8 KB 拿全;CSR 10.4 KB 壳 + 1.5 KB 数据分两次。

四种时间

构建时,它一次写定。

SSG页面生成时间(构建时刻)2026-10-28T08:49:24.000Z已定格 · 不重建不变

请求时,它每次现算。

SSR响应时间(每次请求都变)2026-10-28T08:52:06.113Z随请求变化

缓存住,每 30 秒一跳。

ISR再生成时间(30 秒周期)2026-10-28T08:49:10.000Z周期内不变 · 跨周期跳变

浏览器里,它才真正到达。

CSR数据到达时间(客户端)2026-10-28T08:52:07.902ZHTML 空壳 · 数据后到