在Next.js 15中使用Assistant-UI的注意事项

在Next.js 15项目中集成Assistant-UI时，开发者可能会遇到一个常见问题：当尝试在服务器组件中使用useChatRuntime钩子时，会出现"Attempted to call useEdgeRuntime() from the server"的错误提示。这个问题源于Next.js的服务器组件和客户端组件的边界划分。

问题本质

Next.js 15采用了React Server Components(RSC)架构，这种架构明确区分了服务器组件和客户端组件。服务器组件在服务器端渲染，而客户端组件则在浏览器端运行。useChatRuntime是一个客户端钩子，它依赖于浏览器环境中的API，因此不能直接在服务器组件中使用。

解决方案

方案一：将整个组件转换为客户端组件

最简单的解决方法是在组件文件顶部添加"use client"指令，这将告诉Next.js该组件应该在客户端渲染：

"use client";

import { useChatRuntime } from '@assistant-ui/react-ai-sdk';

export default function Home() {
  const runtime = useChatRuntime({
    api: '/api/chat',
  });
  // ...其余组件代码
}

方案二：模块化设计

如果希望保持页面的大部分内容为服务器组件，可以将使用useChatRuntime的部分提取到一个独立的客户端组件中：

// ChatRuntimeProvider.client.jsx
"use client";

import { AssistantRuntimeProvider } from '@assistant-ui/react';
import { useChatRuntime } from '@assistant-ui/react-ai-sdk';

export default function ChatRuntimeProvider({ children }) {
  const runtime = useChatRuntime({
    api: '/api/chat',
  });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}

然后在主页面组件中导入使用：

import ChatRuntimeProvider from './ChatRuntimeProvider.client';

export default function Home() {
  return (
    <ChatRuntimeProvider>
      {/* 页面内容 */}
    </ChatRuntimeProvider>
  );
}

最佳实践建议

1. 组件边界规划：在设计应用架构时，提前规划哪些部分需要客户端交互，哪些可以保持为服务器组件。

2. 性能考量：服务器组件可以减少客户端JavaScript包大小，提升首屏渲染性能。只在必要时使用客户端组件。

3. 错误处理：对于类似useChatRuntime这样的客户端钩子，确保它们只在客户端环境中使用，避免运行时错误。

4. 代码组织：将客户端特定的逻辑集中管理，便于维护和性能优化。

通过理解Next.js的组件模型和合理划分组件边界，开发者可以充分利用Assistant-UI的功能，同时保持应用的性能优势。