SuperAPI AI 工具集

solid-start

通用与其它

查看项目

更新于 10-16 04:31

技能介绍

用途:本技能介绍 TanStack Start 的 Solid 专用绑定、配置与模式,建立在 start-core 基础概念之上。注意 @tanstack/solid-start 与 SolidStart(@solidjs/start)是完全不同的框架,API 不同。

主要能力:@tanstack/solid-start 重新导出 @tanstack/start-client-core 的全部内容,并提供 useServerFn(在 Solid 组件中调用服务器函数的钩子)。核心 API(createServerFn、createMiddleware、createStart、createIsomorphicFn、createServerOnlyFn、createClientOnlyFn)均可从 @tanstack/solid-start 导入;服务器工具(getRequest、getRequestHeader、setResponseHeader、setCookie、getCookie)从 @tanstack/solid-start/server 导入。

使用方式:安装命令为 npm i @tanstack/solid-start @tanstack/solid-router solid-js,以及 npm i -D vite vite-plugin-solid typescript。package.json 使用 type module 与 vite dev/build 脚本。tsconfig 需 jsx preserve、jsxImportSource solid-js。vite.config.ts 中 tanstackStart() 必须放在 solid 插件之前。需创建路由工厂、根路由(含 HydrationScript、HeadContent、Suspense、Scripts)和文件路由。useServerFn 从组件调用服务器函数并自动处理重定向。

适用场景与限制:适用于使用 TanStack Start 构建 Solid 应用。所有代码默认同构,loader 在服务端和客户端都会运行;仅服务端逻辑应使用 createServerFn。类型完全推断,不应强制转换或标注。HeadContent 与 Scripts 必须位于 body 中。多数钩子返回 Accessor,读取时须调用。缺少 Scripts 会导致客户端 JavaScript 不加载、应用无法 hydrate。常用组件包括 Outlet、Link、Navigate、HeadContent、Scripts、Await、ClientOnly、CatchBoundary。常见错误:从 @tanstack/solid-router 导入 createServerFn;忘记调用 Accessor;Vite 插件顺序颠倒。