全书目录

第四十一篇:Qwik 完全指南 —— 可恢复瞬启城区宇宙

第十章:它和 React / Next / Astro 到底差在哪

3 分钟 965 字 第 802 / 962 个阅读单元

这一段最容易说混,直接看表。

技术 核心思路 首屏后怎么变成交互页面 关键差别
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 心智是:

text
服务器先输出 HTML
        ↓
浏览器 hydrate
        ↓
React 接管 DOM

Qwik 的心智则是:

text
服务器先输出 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 的岛屿模型非常适合内容型站点:

text
大片静态海洋 + 少量交互岛屿

但 Astro 的“岛”本质上还是:

选中某个交互区域,再对它进行 hydration。

Qwik 更激进:

不把页面切成“静态海 + 少数岛”这个前提当成必须,而是整座城都按 resumability 来设计。

所以两者不是谁完全替代谁,而是启动哲学不同:

  • Astro:把交互缩到少数岛
  • Qwik:让交互恢复变成细粒度按需行为