Server Side Rendering

The Data Connect package provides a DataConnectQueryClient class that extends the QueryClient class. This class provides an additional method called prefetchDataConnectQuery that allows you to prefetch data for server side rendering.

Server Side Rendering (with Next.js)

Using traditional server side rendering, the query client instance can be passed to the client "dehydrated", and then rehydrated on the client side.

The following example demonstrates how to do this with the DataConnectQueryClient class and a Next.js application. The data will be immediately available to the client, and the query client will be hydrated on the client side.

Ensure you have followed the initial setup steps first!

import type { InferGetStaticPropsType } from "next";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { listMoviesRef } from "@dataconnect/default-connector";
import { DataConnectQueryClient } from "@tanstack-query-firebase/react/data-connect";

export async function getStaticProps() {
  const queryClient = new DataConnectQueryClient();

  // Prefetch the list of movies
  await queryClient.prefetchDataConnectQuery(listMoviesRef());

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function MoviesRoute({
  dehydratedState,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <HydrationBoundary state={dehydratedState}>
      <Movies />
    </HydrationBoundary>
  );
}

function Movies() {
  const movies = useDataConnectQuery(listMoviesRef());

  if (movies.isLoading) {
    return <div>Loading...</div>;
  }

  if (movies.isError) {
    return <div>Error: {movies.error.message}</div>;
  }

  return (
    <div>
      <h1>Movies</h1>
      <ul>
        {movies.data!.movies.map((movie) => (
          <li key={movie.id}>{movie.title}</li>
        ))}
      </ul>
    </div>
  );
}

React Server Components (RSC)

If you are oping into using React Server Components, you can similarly use the DataConnectQueryClient class to prefetch data within your server component:

import { Movies } from "@/examples/data-connect";
import { listMoviesRef } from "@dataconnect/default-connector";
import { DataConnectQueryClient } from "@tanstack-query-firebase/react/data-connect";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";

import "@/firebase";

export default async function PostsPage() {
  const queryClient = new DataConnectQueryClient();

  // Prefetch the list of movies
  await queryClient.prefetchDataConnectQuery(listMoviesRef());

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <Movies />
    </HydrationBoundary>
  );
}

function Movies() {
  const movies = useDataConnectQuery(listMoviesRef());
  
  // ... 
}

Gotchas

If you opt-in to providing a custom queryKey to either the prefetched data or the useDataConnectQuery hook, you must ensure that the queryKey is the same for both.
By default, the client will always refetch data in the background. If this behaviour is not desired, you can set the staleTime option in your Query Client or hook options.

Getting Started

Authentication

Data Connect

Firestore

Server Side Rendering