Intermittent 2s delay on server requests in Firefox

Discovered a weird behaviour in tanstack-start, but only in Firefox. Intermittently, there's a 2 second delay for any data being transferred from the server, both for route components and server function data. The timings tab says the 2s delay comes from "Connecting". After it finishes, the next requests take 3-5ms like usual. After navigating the website a bit more, the 2s delay appears again, usually for only a single request. Throttling is off. On Chrome it doesn't happen at all.

My router setup and routes are bog-standard. No errors in the console.

// Router
export function createRouter() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60,
      },
    },
  })

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultPreloadStaleTime: 0,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: NotFound,
      scrollRestoration: true,
      defaultStructuralSharing: true,
      defaultPendingMs: 0,
    }),
    queryClient
  )
}

// Route
export const Route = createFileRoute('/(app)/extensions/new')({
  component: RouteComponent,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(categoriesQueryOptions())
  },
})

function RouteComponent() {
  return <CreateExtension />
}

// Router
export function createRouter() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60,
      },
    },
  })

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultPreloadStaleTime: 0,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: NotFound,
      scrollRestoration: true,
      defaultStructuralSharing: true,
      defaultPendingMs: 0,
    }),
    queryClient
  )
}

// Route
export const Route = createFileRoute('/(app)/extensions/new')({
  component: RouteComponent,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(categoriesQueryOptions())
  },
})

function RouteComponent() {
  return <CreateExtension />
}

// Router
export function createRouter() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60,
      },
    },
  })

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultPreloadStaleTime: 0,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: NotFound,
      scrollRestoration: true,
      defaultStructuralSharing: true,
      defaultPendingMs: 0,
    }),
    queryClient
  )
}

// Route
export const Route = createFileRoute('/(app)/extensions/new')({
  component: RouteComponent,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(categoriesQueryOptions())
  },
})

function RouteComponent() {
  return <CreateExtension />
}

// Router
export function createRouter() {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60,
      },
    },
  })

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      defaultPreload: 'intent',
      defaultPreloadStaleTime: 0,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: NotFound,
      scrollRestoration: true,
      defaultStructuralSharing: true,
      defaultPendingMs: 0,
    }),
    queryClient
  )
}

// Route
export const Route = createFileRoute('/(app)/extensions/new')({
  component: RouteComponent,
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(categoriesQueryOptions())
  },
})

function RouteComponent() {
  return <CreateExtension />
}

Intermittent 2s delay on server requests in Firefox

Similar Threads

Similar Threads

Similar Threads