Next.js 13.1中page.tsx取Supabase 2数据时遇DYNAMIC_SERVER_USAGE错误求助

你遇到的Digest: DYNAMIC_SERVER_USAGE错误，核心原因是Next.js 13 App Router默认启用静态渲染，而你在page.tsx里的动态数据操作和这个机制冲突了。下面是具体解决步骤：

• 强制页面动态渲染
  在page.tsx最顶部添加一行代码，指定页面必须在服务器端动态运行：

  export const dynamic = "force-dynamic";
  

• 用服务器端方式初始化Supabase
  别用客户端的createClient，改用Supabase官方提供的服务器组件专用初始化方法，确保请求在服务器端执行，规避静态渲染的环境问题：

  import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
  import { cookies } from 'next/headers';
  
  export default async function Page() {
    // 基于服务器端Cookie初始化Supabase客户端
    const supabase = createServerComponentClient({ cookies });
    // 执行数据查询
    const { data, error } = await supabase.from('你的数据表名').select('*');
  
    if (error) throw error;
  
    return <div>{JSON.stringify(data)}</div>;
  }
  

• 拆分客户端与服务器逻辑
  如果你的page.tsx里同时有数据获取（服务器操作）和交互逻辑（比如useState、useEffect），必须把交互部分拆分到单独的客户端组件中，给组件加上'use client'指令，服务器组件只负责获取数据，再把数据传给客户端组件使用。

内容的提问来源于stack exchange，提问作者Pierre-Olivier