SolidStart — Full-Stack Meta-Framework for SolidJS

Introduction

SolidStart is the official meta-framework for SolidJS, providing file-based routing, server-side rendering, server functions, and deployment adapters. It builds on SolidJS's fine-grained reactivity to deliver fast full-stack applications with minimal JavaScript shipped to the client, similar to what Next.js does for React but with SolidJS's performance advantages.

What SolidStart Does

• Adds file-system-based routing with nested layouts and route groups
• Provides server functions for type-safe RPC between client and server code
• Supports SSR, SSG, and client-side rendering modes from a single codebase
• Ships with deployment presets for Vercel, Netlify, Cloudflare, AWS, and Node.js
• Integrates Vinxi as the underlying server runtime for universal deployment

Architecture Overview

SolidStart uses Vinxi (built on Nitro and Vite) as its server runtime, enabling deployment to any JavaScript platform. File-system routing maps files in the routes directory to URL paths, with support for layouts, error boundaries, and route groups. Server functions use a compile-time transform that splits client and server code, generating RPC endpoints automatically. SolidJS's fine-grained reactivity ensures minimal DOM updates on the client.

Self-Hosting & Configuration

• Scaffold a project with npm init solid@latest and choose a template
• Configure routes by creating files in src/routes/ following file-system conventions
• Set the rendering mode in app.config.ts: SSR (default), SSG, or CSR
• Choose a deployment preset: server: "vercel", server: "netlify", or server: "node-server"
• Use "use server" directive to mark functions that run only on the server

Key Features

• Fine-grained reactivity from SolidJS means no virtual DOM diffing overhead
• Server functions with "use server" directive for type-safe client-server communication
• File-system routing with layouts, error boundaries, and route groups
• Streaming SSR sends HTML progressively for faster time-to-first-byte
• Universal deployment via Nitro adapters for any edge or server platform

Comparison with Similar Tools

• Next.js — React-based, heavier runtime; SolidStart leverages SolidJS's smaller, faster reactivity
• Nuxt — Vue meta-framework; SolidStart shares a similar DX but uses SolidJS and fine-grained signals
• Remix — focuses on web fundamentals; SolidStart adds SolidJS reactivity and signals-based state
• Astro — content-focused with island architecture; SolidStart is for fully interactive applications
• SvelteKit — Svelte meta-framework; SolidStart uses JSX with compile-time-free reactivity

FAQ

Q: Is SolidStart production-ready? A: Yes. SolidStart reached 1.0 and is used in production applications with full SolidJS ecosystem support.

Q: Can I use SolidStart for static sites? A: Yes. Set ssr: false and use SSG prerendering to generate fully static sites at build time.

Q: How do server functions work? A: Mark any function with "use server" and SolidStart compiles it into an API endpoint, generating the RPC call on the client automatically.

Q: Does SolidStart support MDX? A: Yes. MDX support is available through community plugins for content-heavy pages.

Sources

• https://github.com/solidjs/solid-start
• https://start.solidjs.com