高级服务端渲染

1// In Next.js, this file would be called: app/providers.tsx2'use client'3 4// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top5import {6  environmentManager,7  QueryClient,8  QueryClientProvider,9} from '@tanstack/react-query'10 11function makeQueryClient() {12  return new QueryClient({13    defaultOptions: {14      queries: {15        // With SSR, we usually want to set some default staleTime16        // above 0 to avoid refetching immediately on the client17        staleTime: 60 * 1000,18      },19    },20  })21}22 23let browserQueryClient: QueryClient | undefined = undefined24 25function getQueryClient() {26  if (environmentManager.isServer()) {27    // Server: always make a new query client28    return makeQueryClient()29  } else {30    // Browser: make a new query client if we don't already have one31    // This is very important, so we don't re-make a new client if React32    // suspends during the initial render. This may not be needed if we33    // have a suspense boundary BELOW the creation of the query client34    if (!browserQueryClient) browserQueryClient = makeQueryClient()35    return browserQueryClient36  }37}38 39export default function Providers({ children }: { children: React.ReactNode }) {40  // NOTE: Avoid useState when initializing the query client if you don't41  //       have a suspense boundary between this and the code that may42  //       suspend because React will throw away the client on the initial43  //       render if it suspends and there is no boundary44  const queryClient = getQueryClient()45 46  return (47    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>48  )49}

1// In Next.js, this file would be called: app/layout.tsx2import Providers from './providers'3 4export default function RootLayout({5  children,6}: {7  children: React.ReactNode8}) {9  return (10    <html lang="en">11      <head />12      <body>13        <Providers>{children}</Providers>14      </body>15    </html>16  )17}

1// pages/posts.tsx2import {3  dehydrate,4  HydrationBoundary,5  QueryClient,6  useQuery,7} from '@tanstack/react-query'8 9// This could also be getServerSideProps10export async function getStaticProps() {11  const queryClient = new QueryClient()12 13  await queryClient14    .query({15      queryKey: ['posts'],16      queryFn: getPosts,17    })18    .catch(noop)19 20  return {21    props: {22      dehydratedState: dehydrate(queryClient),23    },24  }25}26 27function Posts() {28  // This useQuery could just as well happen in some deeper child to29  // the <PostsRoute>, data will be available immediately either way30  //31  // Note that we are using useQuery here instead of useSuspenseQuery.32  // Because this data has already been prefetched, there is no need to33  // ever suspend in the component itself. If we forget or remove the34  // prefetch, this will instead fetch the data on the client, while35  // using useSuspenseQuery would have had worse side effects.36  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })37 38  // This query was not prefetched on the server and will not start39  // fetching until on the client, both patterns are fine to mix40  const { data: commentsData } = useQuery({41    queryKey: ['posts-comments'],42    queryFn: getComments,43  })44 45  // ...46}47 48export default function PostsRoute({ dehydratedState }) {49  return (50    <HydrationBoundary state={dehydratedState}>51      <Posts />52    </HydrationBoundary>53  )54}

1// app/posts/page.tsx2import {3  dehydrate,4  HydrationBoundary,5  QueryClient,6} from '@tanstack/react-query'7import Posts from './posts'8 9export default async function PostsPage() {10  const queryClient = new QueryClient()11 12  await queryClient13    .query({14      queryKey: ['posts'],15      queryFn: getPosts,16    })17    .catch(noop)18 19  return (20    // Neat! Serialization is now as easy as passing props.21    // HydrationBoundary is a Client Component, so hydration will happen there.22    <HydrationBoundary state={dehydrate(queryClient)}>23      <Posts />24    </HydrationBoundary>25  )26}

1// app/posts/posts.tsx2'use client'3 4export default function Posts() {5  // This useQuery could just as well happen in some deeper6  // child to <Posts>, data will be available immediately either way7  const { data } = useQuery({8    queryKey: ['posts'],9    queryFn: () => getPosts(),10  })11 12  // This query was not prefetched on the server and will not start13  // fetching until on the client, both patterns are fine to mix.14  const { data: commentsData } = useQuery({15    queryKey: ['posts-comments'],16    queryFn: getComments,17  })18 19  // ...20}

1// app/posts/page.tsx2import {3  dehydrate,4  HydrationBoundary,5  QueryClient,6} from '@tanstack/react-query'7import Posts from './posts'8import CommentsServerComponent from './comments-server'9 10export default async function PostsPage() {11  const queryClient = new QueryClient()12 13  await queryClient14    .query({15      queryKey: ['posts'],16      queryFn: getPosts,17    })18    .catch(noop)19 20  return (21    <HydrationBoundary state={dehydrate(queryClient)}>22      <Posts />23      <CommentsServerComponent />24    </HydrationBoundary>25  )26}27 28// app/posts/comments-server.tsx29import {30  dehydrate,31  HydrationBoundary,32  QueryClient,33} from '@tanstack/react-query'34import Comments from './comments'35 36export default async function CommentsServerComponent() {37  const queryClient = new QueryClient()38 39  await queryClient40    .query({41      queryKey: ['posts-comments'],42      queryFn: getComments,43    })44    .catch(noop)45 46  return (47    <HydrationBoundary state={dehydrate(queryClient)}>48      <Comments />49    </HydrationBoundary>50  )51}

11. |> getPosts()22.   |> getComments()

1// app/getQueryClient.tsx2import { QueryClient } from '@tanstack/react-query'3import { cache } from 'react'4 5// cache() is scoped per request, so we don't leak data between requests6const getQueryClient = cache(() => new QueryClient())7export default getQueryClient

1// app/posts/page.tsx2import {3  dehydrate,4  HydrationBoundary,5  QueryClient,6} from '@tanstack/react-query'7import Posts from './posts'8 9export default async function PostsPage() {10  const queryClient = new QueryClient()11 12  // Note we are getting the result from query13  const posts = await queryClient.query({14    queryKey: ['posts'],15    queryFn: getPosts,16  })17 18  return (19    <HydrationBoundary state={dehydrate(queryClient)}>20      {/* This is the new part */}21      <div>Nr of posts: {posts.length}</div>22      <Posts />23    </HydrationBoundary>24  )25}

1// app/get-query-client.ts2import {3  environmentManager,4  QueryClient,5  defaultShouldDehydrateQuery,6} from '@tanstack/react-query'7 8function makeQueryClient() {9  return new QueryClient({10    defaultOptions: {11      queries: {12        staleTime: 60 * 1000,13      },14      dehydrate: {15        // include pending queries in dehydration16        shouldDehydrateQuery: (query) =>17          defaultShouldDehydrateQuery(query) ||18          query.state.status === 'pending',19        shouldRedactErrors: (error) => {20          // We should not catch Next.js server errors21          // as that's how Next.js detects dynamic pages22          // so we cannot redact them.23          // Next.js also automatically redacts errors for us24          // with better digests.25          return false26        },27      },28    },29  })30}31 32let browserQueryClient: QueryClient | undefined = undefined33 34export function getQueryClient() {35  if (environmentManager.isServer()) {36    // Server: always make a new query client37    return makeQueryClient()38  } else {39    // Browser: make a new query client if we don't already have one40    // This is very important, so we don't re-make a new client if React41    // suspends during the initial render. This may not be needed if we42    // have a suspense boundary BELOW the creation of the query client43    if (!browserQueryClient) browserQueryClient = makeQueryClient()44    return browserQueryClient45  }46}

1// app/posts/page.tsx2import { dehydrate, HydrationBoundary } from '@tanstack/react-query'3import { getQueryClient } from './get-query-client'4import Posts from './posts'5 6// the function doesn't need to be `async` because we don't `await` anything7export default function PostsPage() {8  const queryClient = getQueryClient()9 10  // look ma, no await11  void queryClient12    .query({13      queryKey: ['posts'],14      queryFn: getPosts,15    })16    .catch(noop)17 18  return (19    <HydrationBoundary state={dehydrate(queryClient)}>20      <Posts />21    </HydrationBoundary>22  )23}

1// app/posts/posts.tsx2'use client'3 4export default function Posts() {5  const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts })6 7  // ...8}

1// app/get-query-client.ts2import { QueryClient, defaultShouldDehydrateQuery } from '@tanstack/react-query'3import { deserialize, serialize } from './transformer'4 5function makeQueryClient() {6  return new QueryClient({7    defaultOptions: {8      // ...9      hydrate: {10        deserializeData: deserialize,11      },12      dehydrate: {13        serializeData: serialize,14      },15    },16  })17}18 19// ...

1// app/posts/page.tsx2import {3  dehydrate,4  HydrationBoundary,5  QueryClient,6} from '@tanstack/react-query'7import { getQueryClient } from './get-query-client'8import { serialize } from './transformer'9import Posts from './posts'10 11export default function PostsPage() {12  const queryClient = getQueryClient()13 14  // look ma, no await15  void queryClient16    .query({17      queryKey: ['posts'],18      queryFn: () => getPosts().then(serialize), // <-- serialize the data on the server19    })20    .catch(noop)21 22  return (23    <HydrationBoundary state={dehydrate(queryClient)}>24      <Posts />25    </HydrationBoundary>26  )27}

1// app/posts/posts.tsx2'use client'3 4export default function Posts() {5  const { data } = useSuspenseQuery({ queryKey: ['posts'], queryFn: getPosts })6 7  // ...8}

1<PersistQueryClientProvider2  client={queryClient}3  persistOptions={{4    persister,5    // We don't want to save promises into the storage, so we only persist successful queries6    dehydrateOptions: { shouldDehydrateQuery: defaultShouldDehydrateQuery },7  }}8>9  {children}10</PersistQueryClientProvider>

1// app/providers.tsx2'use client'3 4import {5  environmentManager,6  QueryClient,7  QueryClientProvider,8} from '@tanstack/react-query'9import * as React from 'react'10import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'11 12function makeQueryClient() {13  return new QueryClient({14    defaultOptions: {15      queries: {16        // With SSR, we usually want to set some default staleTime17        // above 0 to avoid refetching immediately on the client18        staleTime: 60 * 1000,19      },20    },21  })22}23 24let browserQueryClient: QueryClient | undefined = undefined25 26function getQueryClient() {27  if (environmentManager.isServer()) {28    // Server: always make a new query client29    return makeQueryClient()30  } else {31    // Browser: make a new query client if we don't already have one32    // This is very important, so we don't re-make a new client if React33    // suspends during the initial render. This may not be needed if we34    // have a suspense boundary BELOW the creation of the query client35    if (!browserQueryClient) browserQueryClient = makeQueryClient()36    return browserQueryClient37  }38}39 40export function Providers(props: { children: React.ReactNode }) {41  // NOTE: Avoid useState when initializing the query client if you don't42  //       have a suspense boundary between this and the code that may43  //       suspend because React will throw away the client on the initial44  //       render if it suspends and there is no boundary45  const queryClient = getQueryClient()46 47  return (48    <QueryClientProvider client={queryClient}>49      <ReactQueryStreamedHydration>50        {props.children}51      </ReactQueryStreamedHydration>52    </QueryClientProvider>53  )54}

11. |> JS for <Feed>22.   |> getFeed()33.     |> JS for <GraphFeedItem>44.       |> getGraphDataById()