# SolidStart — Full-Stack Meta-Framework for SolidJS

> The official meta-framework for SolidJS that adds file-based routing, server functions, SSR, and deployment adapters for building full-stack web applications.

## Install

Save as a script file and run:

# SolidStart — Full-Stack Meta-Framework for SolidJS

## Quick Use
```bash
npm init solid@latest my-app
cd my-app
npm install
npm run dev
```
```tsx
// src/routes/index.tsx
export default function Home() {
  return <h1>Hello SolidStart!</h1>;
}

// src/routes/api/hello.ts
export function GET() {
  return new Response(JSON.stringify({ message: "hello" }));
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-899aeefa
Author: Script Depot