在Astro页面中使用JavaScript获取数据时为什么服务器端渲染报错？

东旭提问于 2026-02-05 08:16:45 阅读 48

框架

我在Astro页面里写了个获取用户信息的函数，但构建时报错说“ReferenceError: fetch is not defined”。代码在浏览器里运行没问题，为什么SSR时会这样？

我尝试过这样写：


export function loadUserData() {
  return fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log(data));
}

错误提示指向fetch这一行，但Astro文档说支持JavaScript。是不是不能在组件里直接用fetch？或者需要特殊配置？

Astro SSR框架

我来解答赞 7 收藏

反馈

1 条解答

技术柯豪 Lv1

Astro 的 SSR 环境是 Node.js，而 fetch 是浏览器 API，在 Node 里当然用不了，所以报错。你这写法在客户端没问题，但 Astro 构建时会跑 SSR，就会炸。

要在 Astro 页面里安全用 fetch，应该放在 client:load 钩子函数里，确保只在浏览器执行。比如这样改：

export default function () {

  return (

    

      

    


  );

}

或者用 Astro 提供的 onMount 钩子：

import { onMount } from 'solid-js';



export default function () {

  onMount(() => {

    loadUserData();

  });



  return 你的内容
;

}

说白了，就是得避开 SSR 阶段去调 fetch。要么用 client:load，要么用 onMount，总之不能直接在组件顶层跑浏览器专属 API。

以后写 Astro 页面，凡是 fetch、window、document 这类东西，都得小心 SSR 报错，记得包一层执行环境判断。

2026-02-05 09:00