SSR not prefilled when loaded from ssr

Hi everyone!

I'm having an issue where TanStack Query fetches data on the server, but that data isn't represented in the initial SSR-rendered page or the client-side state.

The Problem:
Even though the server performs the fetch, the HTML sent to the browser still shows the 'loading' state. When the client takes over, it ignores any server-side activity and triggers a fresh fetch, leading to a delay and a double request.

My Setup:

query = injectQuery(() => ({
  queryKey: ['projects'],
  queryFn: () => this.projectService.getProjects(),
}))

// project.service.ts
getProjects(): Promise<Project[]> {
  return lastValueFrom(
    this.http.get<Project[]>('/api/projects')
  )
}

query = injectQuery(() => ({
  queryKey: ['projects'],
  queryFn: () => this.projectService.getProjects(),
}))

// project.service.ts
getProjects(): Promise<Project[]> {
  return lastValueFrom(
    this.http.get<Project[]>('/api/projects')
  )
}

query = injectQuery(() => ({
  queryKey: ['projects'],
  queryFn: () => this.projectService.getProjects(),
}))

// project.service.ts
getProjects(): Promise<Project[]> {
  return lastValueFrom(
    this.http.get<Project[]>('/api/projects')
  )
}

query = injectQuery(() => ({
  queryKey: ['projects'],
  queryFn: () => this.projectService.getProjects(),
}))

// project.service.ts
getProjects(): Promise<Project[]> {
  return lastValueFrom(
    this.http.get<Project[]>('/api/projects')
  )
}

It seems like the SSR process isn't 'waiting' for the

injectQuery

injectQuery

injectQuery

injectQuery to resolve before finishing the render. How can I ensure the server waits for the data so it's included in the initial HTML and hydrated on the client?"

SSR not prefilled when loaded from ssr

Similar Threads

Similar Threads

Similar Threads