Next.js App Router - client-side and server-side component with hydration boundary #6267

its-monotype · 2023-10-30T18:17:15Z

its-monotype
Oct 30, 2023

I want only private pages like "profile" to fetch users using SSR so that public pages will stay static. I have a "header" component that renders on every page so I put it inside the root layout. But I want a prefetch query on certain pages like "profile" using SSR. The problem is that if I have a component with the query outside of the "hydration boundary" and a component inside the "hydration boundary" both are start running on the client.

src
├── api
│   └── get-user.tsx
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── profile
│       ├── page.tsx
│       └── profile.tsx
└── components
    ├── header.tsx
    └── providers.tsx

export const getUser = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));

  const res = await fetch('https://jsonplaceholder.typicode.com/users/1', {
    cache: 'no-store',
  });
  const data = await res.json();
  return data;
};

Root layout:

import { Header } from '@/components/header';
import { Providers } from '@/components/providers';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
          <Header />
          {children}
        </Providers>
      </body>
    </html>
  );
}

Providers:

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { useState } from 'react';

export const Providers = ({ children }: { children: React.ReactNode }) => {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            // With SSR, we usually want to set some default staleTime
            // above 0 to avoid refetching immediately on the client
            staleTime: 60 * 1000,
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={true} />
    </QueryClientProvider>
  );
};

Header:

'use client';

import { getUser } from '@/api/get-user';
import { useQuery } from '@tanstack/react-query';

export const Header = () => {
  const { data: user } = useQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

  return <div className="text-white">{user?.name}</div>;
};

Profile page:

import { getUser } from '@/api/get-user';
import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from '@tanstack/react-query';
import { Profile } from './profile';

export default async function ProfilePage() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

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

Profile:

'use client';

import { getUser } from '@/api/get-user';
import { useQuery } from '@tanstack/react-query';

export const Profile = () => {
  const { data: user } = useQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

  return <div>Welcome to profile {user?.name}!</div>;
};

Everything works fine if I put "header" separately on each page like that:

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
-         <Header />
          {children}
          ...

export default async function HomePage() {
  return (
    <>
+   <Header/>
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Get started by editing&nbsp;
          ...

export default async function ProfilePage() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
+     <Header />
      <Profile />
    </HydrationBoundary>
  );
}

the problem is that the header was using a "user" query and was outside HydrationBoundary. Is there any way to work around it? It feels tedious/wrong to add the "header" to each page or page layout if I need it on every page. I'd be grateful for your help!

its-monotype · 2023-10-30T19:09:15Z

its-monotype
Oct 30, 2023
Author

So far, the best option that I have come up with is this
If you have an idea on how to improve/simplify it, I would be grateful.

0 replies

its-monotype · 2023-10-30T19:52:27Z

its-monotype
Oct 30, 2023
Author

So my case here can be represented simpler like that: we have a server component that renders the client component that uses under-the-hood query, directly or wrapped with a server component that prefetches the query and wraps it inside HydrationBoundary like that:

export default async function ServerComponent() {
  <User /> // client component
  <UserHydrated /> // same component, but wrapped in a hydration boundary
}

User:

'use client';
import { getUser } from '@/api/get-user';
import { useQuery } from '@tanstack/react-query';

export const User = () => {
  const { data: user } = useQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

  return (
    <h1 className="text-6xl font-bold text-center mb-8">
      Bro {user?.name} you are logged in!
    </h1>
  );
};

UserHydrated:

import { getUser } from '@/api/get-user';
import {
  HydrationBoundary,
  QueryClient,
  dehydrate,
} from '@tanstack/react-query';
import { User } from './user';

export const UserHydrated = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['user'],
    queryFn: getUser,
  });

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

And with that setup, SSR does not work, and both components render on the client. But if I comment out raw client component then SSR works fine for UserHydrated. Is that how things should work that you must wrap all prefetched queries with HydrationBoundary or it's possible to use SSR for both when HydrationBoundary was used near the client component, or maybe some work around it?

10 replies

TkDodo Oct 31, 2023
Maintainer

plase try to make it work in codesandbox:

https://codesandbox.io/p/github/its-monotype/next-app-dir-react-query/main

its-monotype Oct 31, 2023
Author

please try this one https://codesandbox.io/p/github/its-monotype/next-14-rq

its-monotype Nov 1, 2023
Author

@TkDodo did you manage to open it?

its-monotype Nov 2, 2023
Author

Here is a video

Recording.2023-11-02.200108.mp4

TkDodo Nov 3, 2023
Maintainer

I'm not sure what you'd expect to happen. What happens is that:

Header renders on the client, because it's a client component. There's no server component "above it" that does prefetching.
Profile itself first prefetches on the server; while that happens react suspends. That's why you see the header, but no profile text. If you'd add a loading.tsx, you would see that.
then, when profile is done fetching on the server, it hydrates data into the cache on the client and finishes rendering the component

what would you expect to happen in this situation?

SSR does not work

not sure what "does not work" exactly, but you can clearly see that ssr "works" by adding a log statement to getUser:

console.log('fetching on', typeof window === 'undefined' ? 'server' : 'client')

Uh oh!

Next.js App Router - client-side and server-side component with hydration boundary #6267

Uh oh!

Uh oh!

its-monotype Oct 30, 2023

Replies: 2 comments · 10 replies

Uh oh!

Uh oh!

its-monotype Oct 30, 2023 Author

Uh oh!

Uh oh!

its-monotype Oct 30, 2023 Author

Uh oh!

TkDodo Oct 31, 2023 Maintainer

Uh oh!

Uh oh!

its-monotype Oct 31, 2023 Author

Uh oh!

its-monotype Nov 1, 2023 Author

Uh oh!

its-monotype Nov 2, 2023 Author

Uh oh!

TkDodo Nov 3, 2023 Maintainer

its-monotype
Oct 30, 2023

Replies: 2 comments 10 replies

its-monotype
Oct 30, 2023
Author

its-monotype
Oct 30, 2023
Author

TkDodo Oct 31, 2023
Maintainer

its-monotype Oct 31, 2023
Author

its-monotype Nov 1, 2023
Author

its-monotype Nov 2, 2023
Author

TkDodo Nov 3, 2023
Maintainer