Combining SSR Prefetch with Dynamic Layouts in Next.js

[Marv963]

Hello everyone,

I'm working on a project using Next.js 14 and React-Query v5, focusing on a user management system with pages at /users and /users/< id >. I need to access a list of users across these pages, so I decided to fetch this data server-side in /users/layout.tsx and stream it to the client. This setup works well for initial data loading. However, I'm looking to enhance the user experience by loading the dashboard layout (including DashboardHeader and DashboardShell) on the client side while the users' data is still being fetched.

Here's a brief overview of my setup:

• /app/users/layout.tsx: Uses React-Query's HydrationBoundary and QueryClient to prefetch users' data server-side.
• /app/users/page.tsx: I want to load DashboardHeader and DashboardShell client-side and display them immediately, using React's Suspense for the UserTable component until the users' data is fully loaded.
• Accessing data in child components like /app/users/user-table.tsx and /app/users/[slug]/page.tsx is done using useQuery.
  My question is: Is there a way to initiate data prefetching server-side in layout.tsx, make it available across all subpages, and simultaneously allow for dynamic client-side loading of the dashboard layout components? I haven't found a solid approach to achieve this without compromising either client-side loading or maintaining a consistent suspense across all subsequent pages. Ideally, I'd like the prefetch to start, dashboard components to load immediately, and Suspense to wait until the data is ready before streaming it to the user.

I would be happy about any help. Thank you 😊🙏🏽

Here is my code:

// /app/users/layout.tsx
import React from 'react'
import {HydrationBoundary, QueryClient, dehydrate} from '@tanstack/react-query'
import { getUsers } from './getUsers'

export default async function AccountLayout({children}: React.PropsWithChildren) {
  const queryClient = new QueryClient()

  await queryClient.prefetchQuery({queryKey: ['users'], queryFn: getUsers, staleTime: 1000 * 60 * 5})

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

// /app/users/page.tsx
export default async function UsersPage() {
  return (
    <>
      <DashboardHeader fullWidht heading="Accounts" text="Manage the Accounts" />
      <DashboardShell fullHeight fullWidth>
        <React.Suspense fallback={<p>Loading...</p>}> // Suspense here
          <UserTable />
        </React.Suspense>
      </DashboardShell>
    </>
  )
}

// /app/users/user-table.tsx
export default function UserTable() {
  const {data, error, isFetching, isLoading, refetch} = useSuspenseQuery({
    queryKey: ['users'],
    queryFn: getUsers,
    staleTime: 1000 * 60 * 5,
  })

[Marv963]

Has somebody an idea?
I don't know if it's possible. But it would be nice if you could prefetch the data in layout.tsx so that the data is then available for all sub pages. But each component could display its own suspense.

[TkDodo]

if you want streaming SSR, you have to useSuspenseQuery (without prefetching) and our experimental ReactQueryStreamedHydration Provider.

Have a look at the advanced section in the docs:

https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

[tfeliperibeiro]

Can this be used now?

[TkDodo]

sure?

[tfeliperibeiro]

As it is still experimental, would it be safe to use in production?

[JoseAlbDR]

As long as u stick with the same react query versión and the lógic is working there should not be a problem right?