SolidStart入门 #

一、SolidStart 概述 #

1.1 什么是 SolidStart #

SolidStart 是 Solid.js 的官方全栈框架，提供路由、SSR、SSG 等功能。

text

SolidStart 特性
├── 文件系统路由
├── 服务端渲染（SSR）
├── 静态站点生成（SSG）
├── API 路由
├── TypeScript 支持
├── 流式渲染
└── 零配置部署

1.2 与其他框架对比 #

特性	SolidStart	Next.js	Nuxt
框架基础	Solid	React	Vue
运行时	极小	较大	中等
响应式	细粒度	虚拟DOM	虚拟DOM
SSR	支持	支持	支持
学习曲线	低	中	低

二、创建项目 #

2.1 使用 CLI #

bash

# 创建新项目
npm create solid@latest my-app

# 进入项目目录
cd my-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

2.2 项目结构 #

text

my-app/
├── src/
│   ├── routes/          # 路由文件
│   │   ├── index.tsx    # 首页
│   │   └── about.tsx    # 关于页面
│   ├── components/      # 组件
│   ├── entry-client.tsx # 客户端入口
│   ├── entry-server.tsx # 服务端入口
│   └── root.tsx         # 根组件
├── public/              # 静态资源
├── app.config.ts        # 配置文件
└── package.json

三、路由系统 #

3.1 文件系统路由 #

text

src/routes/
├── index.tsx           → /
├── about.tsx           → /about
├── blog/
│   ├── index.tsx       → /blog
│   └── [slug].tsx      → /blog/:slug
└── user/
    └── [id].tsx        → /user/:id

3.2 动态路由 #

tsx

// src/routes/blog/[slug].tsx
import { createRouteData } from 'solid-start';

export function routeData({ params }) {
  return createRouteData(async () => {
    const post = await fetchPost(params.slug);
    return post;
  });
}

export default function BlogPost() {
  const post = useRouteData();

  return (
    <article>
      <h1>{post().title}</h1>
      <p>{post().content}</p>
    </article>
  );
}

四、数据加载 #

4.1 createRouteData #

tsx

import { createRouteData, useRouteData } from 'solid-start';

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('/api/users');
    return response.json();
  });
}

export default function Users() {
  const users = useRouteData();

  return (
    <ul>
      <For each={users()}>
        {(user) => <li>{user.name}</li>}
      </For>
    </ul>
  );
}

五、服务端渲染 #

5.1 SSR 模式 #

tsx

// 默认启用 SSR
export default function Page() {
  return <h1>Server Rendered</h1>;
}

5.2 客户端渲染 #

tsx

// 仅客户端渲染
export const csr = true;

export default function ClientPage() {
  return <h1>Client Rendered</h1>;
}

5.3 静态生成 #

tsx

// 静态生成
export const prerender = true;

export default function StaticPage() {
  return <h1>Static Generated</h1>;
}

六、总结 #

6.1 SolidStart 核心 API #

API	说明
`createRouteData`	路由数据加载
`useRouteData`	使用路由数据
`createServerData$`	服务端数据
`A`	链接组件
`useNavigate`	导航钩子

6.2 最佳实践 #

使用文件系统路由
合理选择渲染模式
使用服务端函数处理敏感操作
利用 SSR 提升首屏性能