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

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/client.tsx

@@ -5,18 +5,17 @@ import { getLevelRowClassName } from "@/lib/request/level";
 import { cn } from "@/lib/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import type { Table as TTable } from "@tanstack/react-table";
-import { useQueryState, useQueryStates } from "nuqs";
+import { useQueryState } from "nuqs";
 import * as React from "react";
 import { LiveRow } from "./_components/live-row";
 import { columns } from "./columns";
 import { filterFields as defaultFilterFields, sheetFields } from "./constants";
 import { DataTableInfinite } from "./data-table-infinite";
 import { dataOptions } from "./query-options";
 import type { FacetMetadataSchema } from "./schema";
-import { searchParamsParser } from "./search-params";
+import { searchParamsParser, type SearchParamsType } from "./search-params";
 
-export function Client() {
-  const [search] = useQueryStates(searchParamsParser);
+export function Client({ search }: { search: SearchParamsType }) {
   const {
     data,
     isFetching,
@@ -76,19 +75,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,23 @@
-import * as React from "react";
 import { searchParamsCache } from "./search-params";
 import { getQueryClient } from "@/providers/get-query-client";
 import { dataOptions } from "./query-options";
 import { Client } from "./client";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  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 search={search} />
+    </HydrationBoundary>
+  );
 }

src/app/infinite/query-options.ts

@@ -49,7 +49,7 @@ export const dataOptions = (search: SearchParamsType) => {
         json,
       );
     },
-    initialPageParam: { cursor: new Date().getTime(), direction: "next" },
+    initialPageParam: { cursor: search.cursor.getTime(), direction: "next" },
     getPreviousPageParam: (firstPage, _pages) => {
       if (!firstPage.prevCursor) return null;
       return { cursor: firstPage.prevCursor, direction: "prev" };
@@ -60,5 +60,6 @@ export const dataOptions = (search: SearchParamsType) => {
     },
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
-  });
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
 };