phase 5 part 1: typescript, vue, react, ssr(Next.js 16) topics with lessons, scenarios, interviews, verified examples

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

@@ -0,0 +1,36 @@
+// 不自动运行
+// 服务端组件（默认）：在服务器上取数和渲染，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>
+  );
+}