部署 SolidStart 应用
细粒度响应式 SolidJS 应用,SolidStart 元框架,部署到 Vercel、Netlify、Cloudflare 或 Node。
平台进阶
为什么
SolidJS 用细粒度响应式(signals)无虚拟 DOM,接近原生性能。SolidStart 加文件路由、SSR 和服务端函数,部署适配器类似 Astro/Nuxt。
平台即服务采用率 2024 年增长 24%,团队从虚拟机管理转向 git push 部署。the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research),PaaS 层捕获了大多数新工作负载。
何时使用
性能关键且 React 重渲染模型是瓶颈的应用选 Solid。需要路由和 SSR 的全栈应用用 SolidStart。
如何做
1. 构建 — npm run build 输出 dist/(适配器特定)
2. Vercel — @solidjs/start/vercel 适配器,git push 自动部署
3. Netlify — @solidjs/start/netlify 适配器
4. Cloudflare — @solidjs/start/cloudflare,运行于 Workers
5. Node — @solidjs/start/node,运行 node dist/server/entry.mjs
6. 静态 — @solidjs/start/static 全 SSG
7. 服务端函数 — "use server" 指令创建 RPC 端点
示例
// app.config.ts — Vercel 适配器
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
ssr: true,
adapter: "vercel",
});
// src/routes/index.tsx — signal 组件
import { createSignal } from "solid-js";
export default function Home() {
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(c => c + 1)}>{count()}</button>;
}
// src/routes/api.ts — 服务端函数
"use server";
export async function getData() {
return await db.query("SELECT * FROM items");
}
// 部署:npm run build && vercel --prod
常见问题
- ⚠水合不匹配 — signal 服务端客户端初始化不同,确保一致初始化
- ⚠服务端函数未找到 — 忘记 'use server' 指令或导入路径错误
- ⚠适配器未设 — 默认 Node,无正确适配器部署 Vercel/CF 失败
最佳实践
- ✓用 createSignal/createMemo 管状态 — 避免 React 式 useState 模式丢失细粒度响应
- ✓app.config 显式设适配器 — 生产部署不依赖自动检测
- ✓设置健康检查和优雅关闭 — 处理 SIGTERM 以在退出前排空进行中的请求