Client component statically rendered even though tanstack query

[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?

[icyJoseph]

use client is just a way to mark code as, client code, that means it'll be send to the client, just as any other component did up to the release of Server Components. The new concept are Server Components, which only render Server Side.

Client Components are SSR'd: reactwg/server-components#4