Why does SSR with Next.js runs queries twice?

I have the following code following the official docs and I constantly see two requests. Why? Isn't supposed the dehydrate pass the data

automagically

automagically

? - I am using also the _app.tsx config from the docs (https://tanstack.com/query/v4/docs/react/guides/ssr)

Code:

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import { useGetLocationsQuery } from '@/generated/types'
import { dehydrate, QueryClient } from '@tanstack/react-query'

export default function Home(props: any) {
  console.log('props', props)
  const { data } = useGetLocationsQuery({})
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        {data?.allLocations?.nodes?.map((location) => (
          <div key={location.id}>
            <h1>{location.name}</h1>
            <p>{location.slug}</p>
          </div>
        ))}
      </main>
    </>
  )
}

export async function getServerSideProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(
    useGetLocationsQuery.getKey(),
    useGetLocationsQuery.fetcher()
  )
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import { useGetLocationsQuery } from '@/generated/types'
import { dehydrate, QueryClient } from '@tanstack/react-query'

export default function Home(props: any) {
  console.log('props', props)
  const { data } = useGetLocationsQuery({})
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        {data?.allLocations?.nodes?.map((location) => (
          <div key={location.id}>
            <h1>{location.name}</h1>
            <p>{location.slug}</p>
          </div>
        ))}
      </main>
    </>
  )
}

export async function getServerSideProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(
    useGetLocationsQuery.getKey(),
    useGetLocationsQuery.fetcher()
  )
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

When I see the logs on the API, I get 2/3 requests everytime I reload.

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient.

Prefetch the data yourself and pass it in as initialData

TanStack•3y ago•

16 replies

spotty-amber

Why does SSR with Next.js runs queries twice?

I have the following code following the official docs and I constantly see two requests. Why? Isn't supposed the dehydrate pass the data

automagically

automagically

? - I am using also the _app.tsx config from the docs (https://tanstack.com/query/v4/docs/react/guides/ssr)

Code:

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import { useGetLocationsQuery } from '@/generated/types'
import { dehydrate, QueryClient } from '@tanstack/react-query'

export default function Home(props: any) {
  console.log('props', props)
  const { data } = useGetLocationsQuery({})
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        {data?.allLocations?.nodes?.map((location) => (
          <div key={location.id}>
            <h1>{location.name}</h1>
            <p>{location.slug}</p>
          </div>
        ))}
      </main>
    </>
  )
}

export async function getServerSideProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(
    useGetLocationsQuery.getKey(),
    useGetLocationsQuery.fetcher()
  )
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import { useGetLocationsQuery } from '@/generated/types'
import { dehydrate, QueryClient } from '@tanstack/react-query'

export default function Home(props: any) {
  console.log('props', props)
  const { data } = useGetLocationsQuery({})
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        {data?.allLocations?.nodes?.map((location) => (
          <div key={location.id}>
            <h1>{location.name}</h1>
            <p>{location.slug}</p>
          </div>
        ))}
      </main>
    </>
  )
}

export async function getServerSideProps() {
  const queryClient = new QueryClient()
  await queryClient.prefetchQuery(
    useGetLocationsQuery.getKey(),
    useGetLocationsQuery.fetcher()
  )
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  }
}

When I see the logs on the API, I get 2/3 requests everytime I reload.

SSR | TanStack Query Docs

React Query supports two ways of prefetching data on the server and passing that to the queryClient.

Prefetch the data yourself and pass it in as initialData

Why does SSR with Next.js runs queries twice?

Similar Threads

Why does SSR with Next.js runs queries twice?

Similar Threads

Similar Threads

Similar Threads