这一段最容易说混,直接看表。
| 技术 | 核心思路 | 首屏后怎么变成交互页面 | 关键差别 |
|---|---|---|---|
| Qwik | resumability + lazy execution | 按需恢复具体交互点 | 不要求整页先 hydrate |
| React | 组件树渲染 + hydration | 客户端用 hydrateRoot 接管现有 HTML |
典型心智仍是先 attach/hydrate 再完整互动 |
| Next.js | React + Server Components + Client Components | Client Components 仍需 hydration | 先减少客户端 JS,但客户端边界里依然 hydrate |
| Astro | islands / selective hydration | 只让交互岛屿 hydrate | 岛屿外很轻,但岛内仍是 hydration 思路 |
#1. Qwik vs React
React 的典型 SSR 心智是:
服务器先输出 HTML
↓
浏览器 hydrate
↓
React 接管 DOMQwik 的心智则是:
服务器先输出 HTML + 恢复线索
↓
浏览器不整树重演
↓
用户碰哪里,哪里恢复所以如果你脑子里还是:
- 组件先在客户端重新跑一遍
- 再把事件挂上
- 页面才算活
那你还在 React 世界里。
#2. Qwik vs Next.js
Next.js App Router 已经把“服务端先做更多事”推进很多了:
- Server Components 放服务端
- Client Components 才进客户端 bundle
- 首屏可以先给 HTML 和 RSC payload
但官方文档同样明确:
Client Components 还是要 hydrate。
所以差别不是“谁更现代”,而是启动策略不同:
- Next.js:尽量把更多东西留在服务端,只把需要互动的组件交给客户端 hydrate
- Qwik:连互动那部分也尽量不预先整块 hydrate,而是把执行推迟到真实交互时
#3. Qwik vs Astro
Astro 的岛屿模型非常适合内容型站点:
大片静态海洋 + 少量交互岛屿但 Astro 的“岛”本质上还是:
选中某个交互区域,再对它进行 hydration。
Qwik 更激进:
不把页面切成“静态海 + 少数岛”这个前提当成必须,而是整座城都按 resumability 来设计。
所以两者不是谁完全替代谁,而是启动哲学不同:
- Astro:把交互缩到少数岛
- Qwik:让交互恢复变成细粒度按需行为