如何在Astro 5（beta10）的.tsx组件中实现服务器端数据获取？

你的思路完全正确，父Astro组件获取数据后通过props传递给TSX组件是推荐且稳妥的方案，同时也有更简洁的方式在TSX组件内部实现服务器端数据获取，以下是具体说明和代码示例：

一、父Astro组件传props（推荐方案） #

Astro的.astro组件在output: "server"模式下默认在服务器端执行，能安全访问敏感API Token（存在环境变量中，无需暴露给客户端）。你可以在这里完成数据获取，再将数据通过props传给React组件，同时React组件可以按需添加客户端指令实现交互。

实现步骤： #

1. 父Astro组件中获取数据

---
// src/components/Layout.astro
import Navbar from './Navbar.tsx';
import type { NavbarTab } from '../types';

// 服务器端执行，可直接访问环境变量中的STRAPI_TOKEN
const navbarTabs = await strapiFetch({
  endpoint: "navbar-tabs",
  wrappedByKey: "data",
});
---

<!-- 将数据通过props传递给React组件 -->
<Navbar tabs={navbarTabs} />

2. 修改TSX组件接收props
   去掉原有的useState和useEffect，直接使用传入的props数据；如果需要客户端交互，添加对应的client:指令即可：

import type { NavbarTab } from '../types';

const Navbar: React.FC<{ tabs: NavbarTab[] }> = ({ tabs }) => {
  // 如需客户端交互，添加client指令（比如client:load）
  console.log(tabs.length);

  return (
    <nav>
      {tabs.map(tab => (
        <a key={tab.id} href={tab.url}>{tab.title}</a>
      ))}
    </nav>
  );
};

export default Navbar;

二、在TSX组件内部实现服务器端数据获取 #

Astro 5支持React Server Components（RSC），可以直接在TSX组件中编写异步代码实现服务器端数据获取，无需依赖父组件传值。

实现方式： #

将TSX组件改为异步函数，直接在组件内部执行数据获取（服务器端执行，安全访问Token），注意这种组件默认不会在客户端hydrate，因此不能使用useState、useEffect等客户端hooks；如果需要交互，可拆分出单独的客户端组件。

1. 纯静态RSC组件（无交互）

import type { NavbarTab } from '../types';

// 异步组件，服务器端执行
const Navbar = async () => {
  const navbarTabs = await strapiFetch({
    endpoint: "navbar-tabs",
    wrappedByKey: "data",
  });

  console.log(navbarTabs.length); // 仅在服务器端打印

  return (
    <nav>
      {navbarTabs.map(tab => (
        <a key={tab.id} href={tab.url}>{tab.title}</a>
      ))}
    </nav>
  );
};

export default Navbar;

2. 带交互的混合方案
   如果需要客户端交互，将交互逻辑拆分为单独的客户端组件，用'use client'标记：

// src/components/Navbar.tsx（RSC，服务器端数据获取）
import type { NavbarTab } from '../types';
import NavbarInteractive from './NavbarInteractive.tsx';

const Navbar = async () => {
  const navbarTabs = await strapiFetch({
    endpoint: "navbar-tabs",
    wrappedByKey: "data",
  });

  return <NavbarInteractive tabs={navbarTabs} />;
};

export default Navbar;

// src/components/NavbarInteractive.tsx（客户端组件，处理交互）
'use client';
import type { NavbarTab } from '../types';
import { useState } from 'react';

const NavbarInteractive: React.FC<{ tabs: NavbarTab[] }> = ({ tabs }) => {
  const [activeTabId, setActiveTabId] = useState(tabs[0]?.id);

  return (
    <nav>
      {tabs.map(tab => (
        <button
          key={tab.id}
          onClick={() => setActiveTabId(tab.id)}
          className={activeTabId === tab.id ? 'active-tab' : ''}
        >
          {tab.title}
        </button>
      ))}
    </nav>
  );
};

export default NavbarInteractive;

为什么你的原有代码不生效？ #

• 未添加client:指令时，React组件在Astro中默认是静态渲染，不会在客户端hydrate，因此useEffect不会执行，数据获取代码自然不会被调用。
• 添加client:load后，组件会在客户端hydrate，useEffect执行但数据获取在浏览器端进行，无法访问服务器端的敏感Token（环境变量默认仅服务器端可见，前缀PUBLIC_的变量才会暴露给客户端，但Token不能这么做）。

内容的提问来源于stack exchange，提问作者NeitoFR