fix: 🐛 Fix SSR prefetch by adding HydrationBoundary and stable cursor (#44)

* fix: 🐛 Fix SSR prefetch by adding HydrationBoundary and stable cursor

fix: add HydrationBoundary and fix prefetch for data tables  - Wrap all data tables in HydrationBoundary for proper SSR hydration - Add non-zero staleTime to prevent immediate client-side refetching - Fix infinite query initialPageParam to use stable cursor value - Pass server-parsed search params to client to avoid timestamp mismatches - Add loading states for better navigation experience  Fixes prefetchQuery/prefetchInfiniteQuery not working without proper hydration setup  The commit follows conventional commits format: - Type: fix (this is a bug fix - prefetch wasn't working) - Scope: Could optionally add scope like fix(data-table): if you prefer - Description: Clear and concise - Body: Lists the key changes - Footer: Explains what issue it fixes

* chore: remove default cursor query param

---------

Co-authored-by: Maximilian Kaske <[email protected]>

Author: gruckion

src/app/default/api/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { data } from "@/app/default/data";
+
+export async function GET() {
+  // Simulate network delay
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  return NextResponse.json({
+    data,
+    total: data.length,
+  });
+}

src/app/default/client.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { columns } from "./columns";
+import { filterFields } from "./constants";
+import { DataTable } from "./data-table";
+import { dataOptions } from "./query-options";
+import { useQueryStates } from "nuqs";
+import { searchParamsParser } from "./search-params";
+
+export function Client() {
+  const [search] = useQueryStates(searchParamsParser);
+  const { data } = useQuery(dataOptions(search));
+
+  if (!data) return null;
+
+  return (
+    <DataTable
+      columns={columns}
+      data={data.data}
+      filterFields={filterFields}
+      defaultColumnFilters={Object.entries(search)
+        .map(([key, value]) => ({
+          id: key,
+          value,
+        }))
+        .filter(({ value }) => value ?? undefined)}
+    />
+  );
+}

src/app/default/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "./skeleton";
+
+export default function Loading() {
+  return <Skeleton />;
+}

src/app/default/page.tsx

@@ -1,31 +1,23 @@
-import * as React from "react";
-import { columns } from "./columns";
-import { filterFields } from "./constants";
-import { data } from "./data";
-import { DataTable } from "./data-table";
+import { getQueryClient } from "@/providers/get-query-client";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { searchParamsCache } from "./search-params";
-import { Skeleton } from "./skeleton";
+import { dataOptions } from "./query-options";
+import { Client } from "./client";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const search = searchParamsCache.parse(await searchParams);
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(dataOptions(search));
+
+  const dehydratedState = dehydrate(queryClient);
 
   return (
-    <React.Suspense fallback={<Skeleton />}>
-      <DataTable
-        columns={columns}
-        data={data}
-        filterFields={filterFields}
-        defaultColumnFilters={Object.entries(search)
-          .map(([key, value]) => ({
-            id: key,
-            value,
-          }))
-          .filter(({ value }) => value ?? undefined)}
-      />
-    </React.Suspense>
+    <HydrationBoundary state={dehydratedState}>
+      <Client />
+    </HydrationBoundary>
   );
 }

src/app/default/query-options.ts

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import type { ColumnSchema } from "./types";
+
+interface ApiResponse {
+  data: ColumnSchema[];
+  total: number;
+}
+
+export const dataOptions = (search: Record<string, any>) =>
+  queryOptions({
+    queryKey: ["default-data", search],
+    queryFn: async () => {
+      // Use absolute URL for server-side fetching
+      const baseUrl = typeof window === 'undefined'
+        ? `http://localhost:${process.env.PORT || 3001}`
+        : '';
+
+      const response = await fetch(`${baseUrl}/default/api`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch data");
+      }
+      const result: ApiResponse = await response.json();
+      return result;
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });

src/app/infinite/api/helpers.ts

@@ -122,12 +122,14 @@ export function percentileData(data: ColumnSchema[]): ColumnSchema[] {
 export function splitData(data: ColumnSchema[], search: SearchParamsType) {
   let newData: ColumnSchema[] = [];
   const now = new Date();
+  // cursor undefined = "now"
+  const cursorTime = search.cursor?.getTime() ?? now.getTime();
 
   // TODO: write a helper function for this
   data.forEach((item) => {
     if (search.direction === "next") {
       if (
-        item.date.getTime() < search.cursor.getTime() &&
+        item.date.getTime() < cursorTime &&
         newData.length < search.size
       ) {
         newData.push(item);
@@ -139,7 +141,7 @@ export function splitData(data: ColumnSchema[], search: SearchParamsType) {
       }
     } else if (search.direction === "prev") {
       if (
-        item.date.getTime() > search.cursor.getTime() &&
+        item.date.getTime() > cursorTime &&
         // REMINDER: we need to make sure that we don't get items that are in the future which we do with mockLive data
         item.date.getTime() < now.getTime()
       ) {

src/app/infinite/client.tsx

@@ -76,19 +76,23 @@ export function Client() {
     });
   }, [facets]);
 
+  const defaultColumnFilters = React.useMemo(() => {
+    return Object.entries(filter)
+      .map(([key, value]) => ({
+        id: key,
+        value,
+      }))
+      .filter(({ value }) => value ?? undefined);
+  }, [filter]);
+
   return (
     <DataTableInfinite
       columns={columns}
       data={flatData}
       totalRows={totalDBRowCount}
       filterRows={filterDBRowCount}
       totalRowsFetched={totalFetched}
-      defaultColumnFilters={Object.entries(filter)
-        .map(([key, value]) => ({
-          id: key,
-          value,
-        }))
-        .filter(({ value }) => value ?? undefined)}
+      defaultColumnFilters={defaultColumnFilters}
       defaultColumnSorting={sort ? [sort] : undefined}
       defaultRowSelection={search.uuid ? { [search.uuid]: true } : undefined}
       // FIXME: make it configurable - TODO: use `columnHidden: boolean` in `filterFields`

src/app/infinite/loading.tsx

@@ -0,0 +1,5 @@
+import { Skeleton } from "./skeleton";
+
+export default function Loading() {
+  return <Skeleton />;
+}

src/app/infinite/page.tsx

@@ -1,17 +1,24 @@
-import * as React from "react";
-import { searchParamsCache } from "./search-params";
 import { getQueryClient } from "@/providers/get-query-client";
-import { dataOptions } from "./query-options";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { SearchParams } from "nuqs";
 import { Client } from "./client";
+import { dataOptions } from "./query-options";
+import { searchParamsCache } from "./search-params";
 
 export default async function Page({
   searchParams,
 }: {
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+  searchParams: Promise<SearchParams>;
 }) {
-  const search = searchParamsCache.parse(await searchParams);
+  const search = await searchParamsCache.parse(searchParams);
   const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery(dataOptions(search));
 
-  return <Client />;
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Client />
+    </HydrationBoundary>
+  );
 }

src/app/infinite/query-options.ts

@@ -8,6 +8,12 @@ import type {
 } from "./schema";
 import { searchParamsSerializer, type SearchParamsType } from "./search-params";
 
+function getBaseUrl() {
+  if (typeof window !== "undefined") return ""; // browser should use relative url
+  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR on Vercel
+  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR
+}
+
 export type LogsMeta = {
   currentPercentiles: Record<Percentile, number>;
 };
@@ -27,12 +33,24 @@ export type InfiniteQueryResponse<TData, TMeta = unknown> = {
   nextCursor: number | null;
 };
 
+// Query key = filters only (no cursor/pagination state)
+// This ensures server/client keys match regardless of when they run
+function getStableQueryKey(search: SearchParamsType) {
+  return searchParamsSerializer({
+    ...search,
+    uuid: null,
+    live: null,
+    cursor: null,
+    direction: null,
+  });
+}
+
 export const dataOptions = (search: SearchParamsType) => {
+  // cursor undefined = "now", otherwise use the URL value
+  const initialCursor = search.cursor?.getTime() ?? Date.now();
+
   return infiniteQueryOptions({
-    queryKey: [
-      "data-table",
-      searchParamsSerializer({ ...search, uuid: null, live: null }),
-    ], // remove uuid/live as it would otherwise retrigger a fetch
+    queryKey: ["data-table", getStableQueryKey(search)],
     queryFn: async ({ pageParam }) => {
       const cursor = new Date(pageParam.cursor);
       const direction = pageParam.direction as "next" | "prev" | undefined;
@@ -43,13 +61,13 @@ export const dataOptions = (search: SearchParamsType) => {
         uuid: null,
         live: null,
       });
-      const response = await fetch(`/infinite/api${serialize}`);
+      const response = await fetch(`${getBaseUrl()}/infinite/api${serialize}`);
       const json = await response.json();
       return SuperJSON.parse<InfiniteQueryResponse<ColumnSchema[], LogsMeta>>(
         json,
       );
     },
-    initialPageParam: { cursor: new Date().getTime(), direction: "next" },
+    initialPageParam: { cursor: initialCursor, direction: "next" },
     getPreviousPageParam: (firstPage, _pages) => {
       if (!firstPage.prevCursor) return null;
       return { cursor: firstPage.prevCursor, direction: "prev" };
@@ -60,5 +78,6 @@ export const dataOptions = (search: SearchParamsType) => {
     },
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
+    staleTime: 1000 * 60 * 5, // 5 minutes
   });
 };