Solid Start 中如何正确使用服务器端获取的数据？

一艺童提问于 2026-03-03 20:05:21 阅读 57

框架

我在 Solid Start 里用 routeData 获取数据，但在组件里直接解构就报错了，说不是函数。明明文档里是这么写的啊？

我试过把 routeData 放在 createRouteData 里，也试过在 onMount 里调用，但都不行。控制台提示 “routeData is not a function”，这到底该怎么用？

<script>
  import { createRouteData } from 'solid-start';
  import { For } from 'solid-js';

  const routeData = createRouteData(async () => {
    const res = await fetch('https://api.example.com/posts');
    return res.json();
  });
</script>

<div>
  <For each={routeData()}>{(post) => <p>{post.title}</p>}</For>
</div>

SSR框架

我来解答赞 4 收藏

反馈

2 条解答

设计师莉娟 Lv1

在 Solid Start 中使用服务器端数据确实容易踩坑，特别是关于 routeData 的用法。你遇到的问题主要出在对 createRouteData 返回值的理解上。

首先，createRouteData 返回的是一个信号（signal），而不是函数。所以在组件中直接调用 routeData() 是不正确的写法。这里需要注意 SolidJS 的响应式系统是如何工作的。

下面是修正后的代码：



<script>

  import { createRouteData } from 'solid-start';

  import { For, onMount } from 'solid-js';



  // 创建路由数据

  const routeData = createRouteData(async () => {

    const res = await fetch('https://api.example.com/posts');

    if (!res.ok) throw new Error('Failed to fetch data'); // 错误处理很重要

    return res.json();

  });



  // 在组件中使用时，需要解构 signal 的值

  // 注意：不能直接调用 routeData()

</script>



<div>

  <For each={routeData() ?? []}>{(post) => <p>{post.title}</p>}</For>

  // 这里的 ?? [] 是为了防止初始加载时出现 undefined

</div>

几个关键点要说明：
1. createRouteData 返回的是一个信号(signal)，你需要通过 routeData() 来获取它的当前值，但这个调用应该放在合适的生命周期内。
2. 我加了错误处理逻辑，这是很多开发者容易忽略的细节，但在实际项目中非常重要。
3. 需要注意的是，在首次渲染时，数据可能还在加载中，所以用了 ?? [] 来做兜底处理。

另外，如果你发现页面刷新时数据没有更新，可以考虑使用 onMount 或者其他生命周期钩子来重新获取数据，但这通常不是必需的，因为 SolidJS 会自动管理这些状态。

说真的，SolidJS 的响应式模型虽然强大，但刚上手时确实有点反直觉。不过一旦理解了信号的概念，就会觉得非常自然了。

2026-03-31 16:05

志选 Dev Lv1

兄弟，你搞错了，Solid Start 里 routeData 是导出用的，组件里得用 useRouteData 拿数据，别直接解构那个函数。我之前也踩过坑，改成下面这样就行。

// 路由文件顶部导出

export const routeData = async () => {

  const res = await fetch('https://api.example.com/posts');

  return res.json();

};



// 组件里

import { useRouteData } from 'solid-start';



const posts = useRouteData();

<div>

  <For each={posts()}>

    {(post) => <p>{post.title}</p>}

  </For>

</div>

2026-03-03 20:33