SSR with HydrationBoundary doesn't work, client fetches the data

What I expect: /feedback page loads with prefetched data on the server, meaning the data is in the page source code and there is no additional network request to /api/feedback on the client.

I am importing this into the page and wrapping the page with it.

const PrefetchBoundary = async ({ children }: { children: React.ReactNode }) => {
    // Create a new QueryClient for server-side prefetching
    const queryClient = new QueryClient()
    
await queryClient.prefetchQuery({
      queryKey: config.queryKey,
      queryFn: config.queryFn
    })
    

    return (
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    )
  }

const PrefetchBoundary = async ({ children }: { children: React.ReactNode }) => {
    // Create a new QueryClient for server-side prefetching
    const queryClient = new QueryClient()
    
await queryClient.prefetchQuery({
      queryKey: config.queryKey,
      queryFn: config.queryFn
    })
    

    return (
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    )
  }

In the feedback page.tsx

export default async function FeedbackPage() {
  return (
    <PrefetchBoundary>
      <div className="min-h-screen bg-primary-light/50">
        ...some JSX

          <FeedbackForm />
          <FeatureRequests />
        </main>
      </div>
    </PrefetchBoundary>
  );
}

export default async function FeedbackPage() {
  return (
    <PrefetchBoundary>
      <div className="min-h-screen bg-primary-light/50">
        ...some JSX

          <FeedbackForm />
          <FeatureRequests />
        </main>
      </div>
    </PrefetchBoundary>
  );
}

and in FeatureRequests.tsx I call useQuery and render the data

const { data: featureRequests, isLoading, error } = useFeatureRequestsQuery();

const { data: featureRequests, isLoading, error } = useFeatureRequestsQuery();

Now when I load this page and show source code, the feature requests are not there and the loading spinner shows. I thought the whole point of SSR should be this doesnt happen, I load the page with the data already.

What am I missing here?

TanStack•13mo ago•

16 replies

then-purple

SSR with HydrationBoundary doesn't work, client fetches the data

const PrefetchBoundary = async ({ children }: { children: React.ReactNode }) => {
    // Create a new QueryClient for server-side prefetching
    const queryClient = new QueryClient()
    
await queryClient.prefetchQuery({
      queryKey: config.queryKey,
      queryFn: config.queryFn
    })
    

    return (
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    )
  }

const PrefetchBoundary = async ({ children }: { children: React.ReactNode }) => {
    // Create a new QueryClient for server-side prefetching
    const queryClient = new QueryClient()
    
await queryClient.prefetchQuery({
      queryKey: config.queryKey,
      queryFn: config.queryFn
    })
    

    return (
      <HydrationBoundary state={dehydrate(queryClient)}>
        {children}
      </HydrationBoundary>
    )
  }

In the feedback page.tsx

export default async function FeedbackPage() {
  return (
    <PrefetchBoundary>
      <div className="min-h-screen bg-primary-light/50">
        ...some JSX

          <FeedbackForm />
          <FeatureRequests />
        </main>
      </div>
    </PrefetchBoundary>
  );
}

export default async function FeedbackPage() {
  return (
    <PrefetchBoundary>
      <div className="min-h-screen bg-primary-light/50">
        ...some JSX

          <FeedbackForm />
          <FeatureRequests />
        </main>
      </div>
    </PrefetchBoundary>
  );
}

and in FeatureRequests.tsx I call useQuery and render the data

const { data: featureRequests, isLoading, error } = useFeatureRequestsQuery();

const { data: featureRequests, isLoading, error } = useFeatureRequestsQuery();

SSR with HydrationBoundary doesn't work, client fetches the data

Similar Threads

SSR with HydrationBoundary doesn't work, client fetches the data

Similar Threads

Similar Threads

Similar Threads