要点

这条路线面向想把 SolidJS 学到”能独立做出全栈小应用”的人，共五个阶段，按每天 1-2 小时业余时间口径约五到六周走完。它本身就是一条”串站内文章的线”：每个阶段的资源优先指向本站 Solid 系列（开山篇、路由与数据、参考字典、看板实战），站内没有的才引官方资源。版本基调先说死：学 1.9 稳定线——solid-js 1.9.x 与 SolidStart 1.2.x 的官方文档，Solid 2.0 与 SolidStart 2.0 尚在 experimental/alpha 阶段，不作为学习目标。

这张路线适合谁

前置知识一句话说死：会 HTML/CSS，会现代 JavaScript（const/let、箭头函数、解构、数组方法），并且真正写过 async/await 与 ES 模块的 import/export——不会的话先补这三篇再回来：Node.js 环境搭建与工具链（你需要 Node 跑构建链）、Node.js 模块与 ESM、Node.js 异步与 Promise。Solid 的 JSX 看着像 React，但响应式与模块系统全是 JS 功底的直接映射，前置不牢阶段一就会卡住。有 React 经验不必”先卸载心智”，但要带着警惕学：组件函数只跑一次、props 不能解构、没有 useEffect 的依赖数组、状态更新不经过”重渲染组件”这个环节——每一条都和 React 直觉相反，阶段一会逐个拆。带着对照学的好处是快，代价是旧直觉会反复回来，所以阶段 1 的验收标准里专门有一条”列表重排不串值”，专门检验你有没有真的换心智。

总览

阶段 0：前置，不写一行 Solid

学什么：ESM 的导入导出与模块解析；Promise 与 async/await 的错误传播；数组 map/filter/sort 的不可变用法——Solid 的派生值大量依赖”返回新数组”的习惯。产出验收：命令行待办清单支持增删、列出、存取 JSON 文件，异常退出后数据不丢。卡点：回调与 Promise 混写导致时序混乱——统一 async/await 一种写法，异步与 Promise 一篇够用。

阶段 1：响应式核心（1 周）

学什么（具体到知识点）：createSignal 的取值函数心智、createMemo 派生缓存、createEffect 与 onCleanup 清理、createResource 异步资源；控制流的 Show/For/Index/Switch——尤其 For 与 Index 的分野；props 保持活性的原则（不解构）。资源：先用开山篇建立”组件只跑一次”的心智，再走官方 tutorial（docs.solidjs.com/tutorial），条目查证用参考字典的前三组。产出：番茄钟计时器——倒计时状态、进度派生值、完成后触发副作用（响一声或改标题），正好各用一次 signal/memo/effect。验收：计时进行中组件树刷新不串值；对象数组列表重排后输入框不丢内容。卡点：把 createEffect 当 computed 用，更新循环警告刷屏——能算出来的一律 createMemo；网上教程带着 React 习惯（解构 props、组件里 return 前做副作用）——凡是教”props 解构”的资料直接关掉，认准官方文档。

阶段 2：路由与数据（1-2 周）

学什么：src/routes 文件树、动态段与 rest 段、与目录同名文件的布局机制、app.tsx 的 Router/root/Suspense 装配、query 的请求级缓存、createAsync 接组件、Suspense 流式渲染。资源：路由与数据详解一篇覆盖主线，官方 docs 的 solid-start v1 章节当手册查。产出：三页小站——文章列表（query 取数）、动态段详情（[slug]）、任意路径兜底（[…all] 的 404 页）。验收：列表跳详情无整页刷新；直接粘贴不存在的详情 URL 看到兜底页而非白屏；view-source 里详情正文是服务端渲染好的 HTML。卡点：root 里漏了 Suspense，页面报 hydration 错误——那一行不是装饰；query 的 key 重名导致串数据，两个取数函数必须用不同的 key。

阶段 3：全栈写路径（1 周）

学什么：API 路由的方法名导出（GET/POST 与 APIEvent）；action(fn, "name") 的三种触发方式（表单、useAction 编程调用、with 预绑定）；useSubmission 的 pending/result/error/input 四态回执；"use server" 的安全边界；action 成功后自动 revalidate 的机制。资源：跟做看板实战，然后脱离文章独立重写一遍（换主题：留言板、书签、记账都行）；API 细节随查参考字典。产出：一个有持久层的 CRUD 应用。验收：空表单提交不入库且提示就地出现；action 成功后列表自动更新（Network 里能看到 query 重取）；把存储代码写进非”use server”上下文时能在客户端产物里搜到——然后修掉它。卡点：客户端又建一份 createStore 复制全量状态——query 是唯一客户端缓存，第二份状态就是漂移的开始。

阶段 4：打磨与上线（1 周）

学什么：Suspense 边界的粒度与 deferStream 选项（慢数据如何不阻塞首屏）；ErrorBoundary 错误兜底；createStore 的路径更新与 reconcile；app.config.ts 的 server.preset——node-server 产物在 .output/server/index.mjs，vercel/netlify 等预设换部署目标，行为以官方部署文档为准。资源：参考字典的控制流组与工程组条目。产出：把阶段 3 的应用加上错误边界与更细的 Suspense 分段，部署到 VPS 或平台，用真域名访问一次。验收：人为抛错后边界展示兜底 UI 而非整页崩溃；慢接口的字段以流式补上，首屏不等它。卡点：preset 选错导致产物路径与预期不符——先确定部署目标再选 preset，本地验证跑 npm run build 后直接 node 启动产物。

避坑清单

• 不要按 React 教程学 Solid。解构 props、组件函数重跑、useEffect 心智在 Solid 里全部不成立，混学的产出是”能跑但处处丢更新”的代码；判断资料新旧最快的办法是看它怎么处理 props。
• 不要用 createEffect 保存可计算的值。那是 createMemo 的职责；effect 只留给外部世界（标题、打点、第三方桥接），混用会造出级联更新循环。
• 不要在 onMount 里 fetch 绕开 query/createAsync。首屏 HTML 缺数据、无请求去重、丢流式渲染，SEO 抓到的还是空壳；数据读取只有 query + createAsync + Suspense 一条正路。
• 不要把服务端代码裸放进组件文件。只有”use server”标记的函数体留在服务端，其余代码都会进客户端产物；数据库连接与密钥出现一次就是事故，验收标准是产物里搜不到。
• 不要现在押注 2.0。Solid 2.0 处于 experimental 线、SolidStart 2.0 刚出 alpha（2025-11），API 会变；学习资料与本文全部锚定 1.9/1.2 文档，等 2.0 出正式候选再迁移不迟。

学完之后

四个阶段做完，你手里有一个跑在生产环境的全栈应用和一套可复用的判断（何时 query、何时 action、何时 memo），这已覆盖 Solid 日常开发的八成场景。往深走两条路：一是给看板实战继续加功能（全文检索、多列拖拽、多人协作），在真实需求里撞问题；二是对照本站已发布的Svelte 学习路线——两条”没有虚拟 DOM”路线的学习路径逐阶段对读，对前端响应式的理解会立体很多。工具层面想横向扩展的，本站 Node 系列（异步、ESM、HTTP 路由）与阶段 0 的三篇是同一条后端主线的延伸。

版本核实（以官方文档为准）：截至本文（2025-12-11）稳定线为 solid-js 1.9.10、SolidStart 1.2.0、@solidjs/router 0.15.4（均为 npm 实查版本）；Solid 2.0 处于 2.0.0-experimental 预发布线，SolidStart 2.0 首个 alpha 发布于 2025-11-24，本路线不依赖任何 2.0 特性；官方脚手架与部署产物路径（vinxi 系列、.output/server/index.mjs）为 SolidStart 1.x 文档约定，部署预设行为以官方文档为准。安装命令不钉版本号。