SuperAPI AI 工具集

tanstack-solid-start

前端与建站

查看项目

更新于 10-16 12:59

技能介绍

TanStack Start 的 Solid 绑定包(@tanstack/solid-start)建立在 start-core 之上,阅读前应先掌握 start-core 的基础概念。该技能覆盖 Solid 专属的绑定、项目配置与使用模式。

用途方面,该包用于在 Solid 应用中集成 TanStack Start 的服务端能力与路由体系。它从 @tanstack/start-client-core 重新导出所有核心 API,包括 createServerFn、createMiddleware、createStart、createIsomorphicFn、createServerOnlyFn、createClientOnlyFn,并新增 Solid 专用的 useServerFn 钩子,用于在组件中调用服务端函数。服务端工具(getRequest、getRequestHeader、setResponseHeader、setCookie、getCookie、useSession)需从 @tanstack/solid-start/server 导入。

主要能力与使用方式上,项目初始化需要安装 @tanstack/solid-start、@tanstack/solid-router、solid-js 以及 devDependencies 中的 vite、vite-plugin-solid、typescript。package.json 需设置 type 为 module,并提供 dev、build、start 脚本。tsconfig 需配置 jsx 为 preserve、jsxImportSource 为 solid-js、moduleResolution 为 Bundler、module 为 ESNext、target 为 ES2022、skipLibCheck、strictNullChecks。vite.config.ts 中 tanstackStart() 插件必须排在 solidPlugin() 之前。需要创建 router 工厂(src/router.tsx)、根路由(src/routes/__root.tsx,含 HydrationScript、HeadContent、Scripts、Suspense)以及索引路由示例。useServerFn 用于在组件中调用服务端函数并自动处理重定向,与 React 版本不同,它不对返回函数做 memoization 包装。Solid 专属路由组件包括 Outlet、Link、Navigate、HeadContent、Scripts、Await、ClientOnly、CatchBoundary。Hooks 大多返回 Accessor<T>,需调用后读取,例如 useRouterState、useSearch、useParams、useLoaderData、useMatch、useRouteContext,以及 Route.useLoaderData()、Route.useSearch()。

适用场景为使用 Solid 与 TanStack Start 构建同构应用(服务端渲染 + 客户端水合)的开发者,尤其涉及路由、服务端函数调用、中间件、会话与服务端请求/响应处理的场景。

限制与注意事项:所有代码默认同构,loader 在服务端和客户端都会运行,仅服务端逻辑应使用 createServerFn;类型完全推断,不应强制转换或注解推断值;不要将 @tanstack/solid-start 与 SolidStart(@solidjs/start)混淆,二者框架与 API 完全不同。常见错误包括:从错误包导入(createServerFn 应来自 solid-start 而非 solid-router)、忘记调用 Accessor、根路由 body 缺少 Scripts 组件导致无法水合、Vite 配置中 Solid 插件排在 Start 插件之前。