Next.js 15.1.6客户端组件静态渲染致Tanstack Query加载异常求助

核心原因 #

Next.js App Router 中，'use client' 仅标记组件在浏览器端执行，但页面的渲染策略默认仍为静态生成（SSG）——Next.js 会尽可能静态化所有页面以优化性能。你的页面依赖用户会话（supabase.auth.getUser()），而静态生成是在构建阶段完成的，此时无法获取当前用户的会话信息：

• 开发环境下，Next.js 默认采用动态渲染，每次请求都会重新处理，因此能正常获取用户数据；
• 构建后静态生成的页面中，supabase.auth.getUser() 会返回 null，导致你的查询抛出错误，TanStack Query 因错误重试或未正确处理状态，表现为持续加载。

解决方案 #

在你的页面组件顶部添加强制动态渲染的配置，告诉 Next.js 该页面必须在每次请求时动态处理，而非静态生成：

'use client';

// 添加这一行，强制页面动态渲染
export const dynamic = 'force-dynamic';

import PostComposer from '@/components/features/post-composer/PostComposer';
import React from 'react';

export default function AppPage() {
  return (
    <div className="flex w-full h-full flex-col">
      <PostComposer />
    </div>
  );
}

补充说明 #

• 除了 force-dynamic，你也可以根据需求选择其他动态渲染策略：
  • 'auto'（默认）：Next.js 自动判断是否静态生成，若页面有动态依赖则转为动态渲染；但你的页面依赖的用户会话属于客户端侧动态数据，Next.js 构建时无法检测到，因此需要显式指定；
  • 'force-static'：强制静态生成，不适合你的场景；
• 同时建议在查询逻辑中添加错误处理，比如当用户未登录时显示登录提示，避免查询持续重试导致的加载状态：

  // 在 useGetConnectedAccountsQuery 中添加错误处理
  export default function useGetConnectedAccountsQuery(options = {}) {
    return useQuery({
      queryKey: ['connectedAccounts'],
      queryFn: getConnectedAccounts,
      onError: (error) => {
        if (error.message === 'No user found') {
          // 处理未登录逻辑，比如跳转登录页或提示
        }
      },
      ...options
    });
  }
  

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