Astro中client:only="react" hydration策略失效问题

我有一个在客户端获取名言的React组件quote.tsx：

// quote.tsx
import React, { useEffect, useState } from "react";

const Quote = () => {
    const [quote, setQuote] = useState("");

    async function _fetchQuote() {
        const res = await fetch('https://api.adviceslip.com/advice');
        const data = res.json();
        const quote = data['slip']['advice'];
        setQuote(quote);
    }

    useEffect(() => {
        _fetchQuote();
    }, []);

    return <h1>
        <span>Quote: </span>
        <span>{quote}</span>
    </h1>;
}

export default Quote;

在Astro组件quote-page.astro中引入该组件并使用client:only="react" hydration策略：

// quote-page.astro
---
import Base from "../layouts/Base.astro";
import Quote from "./components/quote";
---

<Base title="Qutoes">
    <Quote client:only="react" />
</Base>

运行时出现错误：

06:39:24 PM [astro] reload /src/pages/quote-page.astro
 error   Unable to render `Quote`. When using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer.
  Hint:
    Did you mean to pass `client:only="react|preact|solid-js|vue|svelte|lit"`? See https://docs.astro.build/en/reference/directives-reference/#clientonly for more information on client:only
  File:
    /home/.../src/page/quote-page.astro

已尝试将quote.tsx改为quote.jsx，问题未解决。当前astro.config.ts配置：

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

import vercel from "@astrojs/vercel/serverless";

export default defineConfig({
  site: "https://url",
  markdown: {
    syntaxHighlight: "prism"
  },
  integrations: [sitemap()],
  output: 'server',
  adapter: vercel(),
});

package.json依赖：

"devDependencies": {
    "astro": "^2.3.0",
    "path-browserify": "^1.0.1"
},
"dependencies": {
  "@astrojs/react": "^2.1.1",
  "@astrojs/rss": "^0.2.0",
  "@astrojs/sitemap": "^0.1.0",
  "@astrojs/vercel": "^3.2.4",
  "sass": "^1.52.1"
}

1. 在Astro配置中注册React集成 #

你已安装@astrojs/react依赖，但未在astro.config.ts的integrations数组中注册该集成，这是Astro无法识别React渲染器的核心原因。修改配置文件：

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import react from '@astrojs/react'; // 导入React集成
import vercel from "@astrojs/vercel/serverless";

export default defineConfig({
  site: "https://url",
  markdown: {
    syntaxHighlight: "prism"
  },
  integrations: [sitemap(), react()], // 将react()添加到集成列表
  output: 'server',
  adapter: vercel(),
});

2. 修复fetch请求的异步处理错误 #

res.json()是异步操作，必须添加await，否则data会是Promise对象，无法直接读取slip字段。同时建议添加异常处理：

async function _fetchQuote() {
    try {
        const res = await fetch('https://api.adviceslip.com/advice');
        const data = await res.json(); // 添加await关键字
        const quote = data['slip']['advice'];
        setQuote(quote);
    } catch (err) {
        console.error('获取名言失败:', err);
        setQuote('获取失败，请重试');
    }
}

3. 验证组件引入路径 #

确认quote-page.astro中组件的引入路径正确，比如quote.tsx在src/components/目录下，而quote-page.astro在src/pages/目录时，import Quote from "../components/quote";的路径是正确的。

完成以上修改后，重启Astro开发服务器即可解决问题。

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