Nextjs renders client component statically so query stucks at loading

[enszrlu]

Hi all, I am using latest nextjs version (15.1.6) with app router. I have a client component that uses Tanstack Query to fetch data from supabase on client side. Below is my page which client component 'PostComposer' is rendered. When I work on dev environment, my app works fine. But when I build, it builds this page as static so my tanstackQuery stucks at loading state. Why is this? I thought next would not statically render client routes?

'use client';

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>
  );
}

'use client';

import { Database } from '@/types_db';
import { createClient } from '@/utils/supabase/client';
import { useQuery } from '@tanstack/react-query';

export const getConnectedAccounts = async () => {
  const supabase = createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) throw new Error('No user found');

  const { data, error } = await supabase
    .from('x_accounts')
    .select('*')
    .eq('user_id', user.id);

  if (error) throw error;
  return data.map(account => ({
    platform: 'x',
    account_data: account
  }));
};

export default function useGetConnectedAccountsQuery(options = {}) {
  return useQuery({
    queryKey: ['connectedAccounts'],
    queryFn: getConnectedAccounts,
    ...options
  });
}

Am I missing something?

[TkDodo]

client components are rendered on the server as well.