Deploying SolidStart Apps
Fine-grained reactive SolidJS apps with SolidStart meta-framework, deploy to Vercel, Netlify, Cloudflare, or Node.
PlatformsIntermediate
Why
SolidJS uses fine-grained reactivity (signals) without virtual DOM, achieving near-vanilla performance. SolidStart adds file-based routing, SSR, and server functions with deploy adapters similar to Astro/Nuxt.
Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.
When
Choose Solid for performance-critical apps where React's re-render model is a bottleneck. Use SolidStart for full-stack apps with routing and SSR.
How
1. Build — npm run build outputs dist/ (adapter-specific)
2. Vercel — @solidjs/start/vercel adapter, git push auto-deploys
3. Netlify — @solidjs/start/netlify adapter
4. Cloudflare — @solidjs/start/cloudflare, runs on Workers
5. Node — @solidjs/start/node, run node dist/server/entry.mjs
6. Static — @solidjs/start/static for full SSG
7. Server functions — "use server" directive creates RPC endpoints
Example
// app.config.ts — Vercel adapter
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
ssr: true,
adapter: "vercel",
});
// src/routes/index.tsx — signal-based component
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 — server function
"use server";
export async function getData() {
return await db.query("SELECT * FROM items");
}
// Deploy: npm run build && vercel --prod
Common Problems
- ⚠Hydration mismatch — signals initialized differently on server vs client, ensure consistent init
- ⚠Server function not found — forgot 'use server' directive or wrong import path
- ⚠Adapter not set — defaults to Node, deploy to Vercel/CF fails without correct adapter
Best Practices
- ✓Use createSignal/createMemo for state — avoid React-style useState patterns that lose fine-grained reactivity
- ✓Set adapter explicitly in app.config — don't rely on auto-detection for production deploys
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit