SSR in Next 13 app directory using Hydrate

[JurajKavka]

Hello

I'm setting up react-query SSR in Next 13 app directory useing Hydrate, and I have question, why the cache function is used here?

// app/getQueryClient.jsx
import { QueryClient } from '@tanstack/react-query'
import { cache } from 'react'

const getQueryClient = cache(() => new QueryClient())
export default getQueryClient

If it is used like that and I want to reuse the same function in client component

export default function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = React.useState(
    getQueryClient
  );

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

It breaks SSR in that way, that the content is not rendered in HTML. I can see content in browser but no in raw HTML. What is the reason?

Thank You!

[2manoj1]

@JurajKavka read this for cache https://nextjs.org/docs/app/building-your-application/data-fetching/caching#react-cache

Example with SSR:

https://github.com/2manoj1/poc-nextjs-13-react-query

[JurajKavka]

Hi! Thank you for your reply.

I understand what cache does but why it wraps function here?

https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/store/index.js#L4

you have exact what I'm asking for here in your code. Why do you have queryClient commented out and not using it directly to create queryClient for QueryClientProvider ?

https://github.com/2manoj1/poc-nextjs-13-react-query/blob/main/src/app/components/RQProvider.jsx

[2manoj1]

React Query provider having some client dependency not working with latest Nextjs so create wrapper component with use client.

In SSR we require Singleton client that reason wrap with cache and expose. Otherwise it's creating multiple instances. We require same instance accross application - both SSR and CSR component. Check their docs