Files
zhuangang/topics/frontend/ssr/examples/next-ai-chat/app/page.tsx
T

37 lines
1.0 KiB
TypeScript

// 不自动运行
// 服务端组件(默认):在服务器上取数和渲染,HTML 直接包含常见问题,对 SEO 友好;不会把这段代码发到浏览器。
import { Chat } from "./chat";
interface Faq {
id: number;
q: string;
a: string;
}
async function getFaqs(): Promise<Faq[]> {
// 真实项目:await fetch("https://cms.example.com/faqs", { next: { revalidate: 300 } })(缓存策略以官方文档为准)
return [
{ id: 1, q: "多久内可以退货?", a: "签收 7 天内可以无理由退货。" },
{ id: 2, q: "怎么开发票?", a: "在订单详情页申请电子发票。" },
];
}
export default async function Page() {
const faqs = await getFaqs();
return (
<main>
<h1>帮助中心</h1>
<section>
{faqs.map((f) => (
<details key={f.id}>
<summary>{f.q}</summary>
<p>{f.a}</p>
</details>
))}
</section>
{/* 交互部分是客户端组件,只有它的 JS 会发到浏览器 */}
<Chat />
</main>
);
}