like-gold

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 />
}

16 Replies

like-goldOP•6mo ago

This image shows the behaviour better. Preloading a bunch of routes by hovering over the links. The delayed requests take 2s and when the first delayed request finishes, every subsequent request takes 3-5ms.

harsh-harlequin•6mo ago

is this dev or prod?

like-goldOP•6mo ago

dev

harsh-harlequin•6mo ago

whats happening in categoriesQueryOptions ? what is loaded here

like-goldOP•6mo ago

export const fetchCategories = createServerFn({ method: 'GET' }).handler(async () => {
  return getCategories()
})

export const categoriesQueryOptions = () =>
  queryOptions({
    queryKey: ['categories'],
    queryFn: fetchCategories,
  })

export async function getCategories(): Promise<Category[]> {
  return db.query.categories.findMany()
}

export const fetchCategories = createServerFn({ method: 'GET' }).handler(async () => {
  return getCategories()
})

export const categoriesQueryOptions = () =>
  queryOptions({
    queryKey: ['categories'],
    queryFn: fetchCategories,
  })

export async function getCategories(): Promise<Category[]> {
  return db.query.categories.findMany()
}

harsh-harlequin•6mo ago

add some timing logs around the db query?

like-goldOP•6mo ago

i did. says 0ms it happens somewhere between the client and server

like-goldOP•6mo ago

whatever this connecting means

harsh-harlequin•6mo ago

and thats only in firefox?

like-goldOP•6mo ago

yes

harsh-harlequin•6mo ago

weird, i only use firefox and never had that which OS?

like-goldOP•6mo ago

W10

harsh-harlequin•6mo ago

well that might be it the difference i am on macOS

like-goldOP•6mo ago

there's also some weird routing lag that isn't shown in dev tools and is unrelated to the 2s delay and this lag also doesn't happen in chrome weird ok, on a prod server using vinxi start everything behaves like on chrome, no delays or routing lag.

harsh-harlequin•6mo ago

well at least that!

Gaming

Programming

Intermittent 2s delay on server requests in Firefox

Did you find this page helpful?