部署 Qwik 应用
可恢复框架，懒水合，部署 Qwik City 应用到 Vercel、Cloudflare、Netlify 或 Node。
平台进阶
为什么
Qwik 可恢复性意味着零水合 JS — 浏览器从服务端中断处精确恢复。使 Qwik 成为大型交互站点最快框架，交互时懒加载。
平台即服务采用率 2024 年增长 24%，团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research)，PaaS 层捕获了大多数新工作负载。
何时使用
水合成本主导的大型交互站点（电商、门户）用 Qwik。团队不熟悉时避免 — 生态比 React/Vue 新。
如何做
1. 构建 — npm run build 生成 dist/（适配器特定）
2. Vercel — @builder.io/qwik/vercel 适配器，git push 零配置
3. Cloudflare — @builder.io/qwik/cloudflare-pages
4. Netlify — @builder.io/qwik/netlify
5. Node — @builder.io/qwik/node，运行 node server/entry.express.mjs
6. 静态 — @builder.io/qwik/static 用于 SSG
7. 组件 — 用 component$() 创建懒可恢复组件
示例
// src/routes/index.tsx — Qwik 组件
import { component$, useSignal } from "@builder.io/qwik";
export default component$(() => {
const count = useSignal(0);
return (
<button onClick$={() => count.value++}>
Count: {count.value}
</button>
);
});
// adapters/vercel/vite.config.ts
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
export default defineConfig({
plugins: [qwikCity(), qwikVite()],
});
// 部署：npm run build && vercel --prod
常见问题
- ⚠用 onClick 而非 onClick$ — 丢失可恢复性，急切加载处理 JS
- ⚠Cloudflare 构建失败 — Qwik City 适配器版本不匹配，固定兼容版本
- ⚠SSR 不工作 — 适配器未设或 vite 配置禁用 ssr
最佳实践
- ✓始终用 $ 后缀 API（component$、onClick$、useSignal）— 启用懒可恢复性
- ✓异步数据用 useResource$ 和 useTask$ — 避免瀑布流并启用流式 SSR
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求