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

gruckion · 2025-09-21T12:47:12Z

Changes

data-table-filters/src/app/infinite/

Fixed prefetchInfiniteQuery usage by wrapping the table in <HydrationBoundary>. Otherwise prefetching will not occur.
Added staleTime with non-zero value to the dataOptions to prevent immediate refetching.
Fixed Client component to accept server-parsed search params as props to avoid re-parsing on the client and timestamp mismatches.
Fixed initialPageParam in query options to use search.cursor.getTime() instead of new Date().getTime() to ensure the pageParam matches between server prefetch and client hydration.
Added loading.tsx and Skeleton component for better loading states during navigation (following the pattern from default table).

data-table-filters/src/app/light/

Added staleTime with non-zero value to the dataOptions to prevent immediate refetching.
Wrapped the table in <HydrationBoundary> for proper hydration.

data-table-filters/src/app/default/

Refactored to be consistent with the infinite scroll example, with async data fetching via the API route and non-zero staleTime for prefetching to not immediately refetch.

Refactored the DataTable into it's own Client component for consistency with the infinite scroll example.
Refactored the data to be async and fetch via the API route.
Created dataOptions to fetch the data via the API route with non-zero staleTime for prefetching to not immediately refetch.
Removed React.Suspense in favour of Next.js loading.tsx Alex Sidorenko "Navigation feels slow in Next.js".
Wrapped the table in a HydrationBoundary otherwise prefetching will not occur.

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

vercel · 2025-09-21T12:47:15Z

@gruckion is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

franky47

One issue with using Date parsers in nuqs is that they all (server and client) have to be rooted in UTC to be consistent, and for the URL to have the same semantic meaning across the world.

This can (depending on your side of the UTC-0 line) be a bit jarring: parseAsIsoDate.parse('2025-09-22') gives you the point in time at midnight, on the 22nd of September 2025 in UTC, so if you happen to be, say, in UTC+2 (like me as I write this), when you select a date from a UI set for local time, it actually renders the day before in the URL.

Timestamps indeed don't have this problem, both because they are explicitly rooted in UTC, and because they avoid human scrutiny.

franky47 · 2025-09-21T17:59:22Z

src/app/default/query-options.ts

+    queryKey: ["default-data", search],
+    queryFn: async () => {
+      // Use absolute URL for server-side fetching
+      const baseUrl = typeof window === 'undefined'


suggestion: could you import the data directly here when in server-side (à la RSC), rather than going through HTTP server -> server? Or does it pose bundling separation issues?

agree with you @franky47 - if it's a production app, I'd do a db query straight to get the data. Here, to keep the data consistent and change it only in a single place, I'd suggest to leave the http call.

@gruckion I think we would need to use the https://${VERCEL_URL} on non dev environments to make it work.

we should probably do the same for the /infinite/query-options to make it fetch from the server.

vercel · 2025-09-21T18:37:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
data-table-filters	Ready	Preview	Comment	Sep 21, 2025 6:39pm

franky47 · 2025-09-21T18:49:13Z

The time range selectors don't work.

On the default page:

Selecting a single date gives you a range in the URL that's {midnightUTCForThatDay}-{midnighUTCForThatDay}, it should probably be {midnightUTCForThatDay}-{23:59UTCForThatDay}
The data shows log points for today (2025-09-21), but selecting from the 20th to the 22nd doesn't include them.

On the infinite page, the selection works from the tooltip, but now when dragging from the bars on top of the table.

mxkaske

Hey @gruckion! appreciate it a lot. ❤️

While the default table works, I had issues with the infinite table. Left some comments while trying to debug it.

mxkaske · 2025-09-21T19:00:00Z

src/app/infinite/query-options.ts

        json,
      );
    },
-    initialPageParam: { cursor: new Date().getTime(), direction: "next" },


good catch!

mxkaske · 2025-09-21T19:17:34Z

src/app/default/query-options.ts

+    queryKey: ["default-data", search],
+    queryFn: async () => {
+      // Use absolute URL for server-side fetching
+      const baseUrl = typeof window === 'undefined'


agree with you @franky47 - if it's a production app, I'd do a db query straight to get the data. Here, to keep the data consistent and change it only in a single place, I'd suggest to leave the http call.

@gruckion I think we would need to use the https://${VERCEL_URL} on non dev environments to make it work.

we should probably do the same for the /infinite/query-options to make it fetch from the server.

mxkaske · 2025-09-21T19:22:27Z

src/app/infinite/page.tsx

the HydrationBoundary doesn't seem to work on the infinite page for me.

when adding the absolute url to the query-options - the isLoading property from useInfiniteQuery always starts to be true - which shouldn't be the case.

I'm trying to debug it currently the dataOptions(search) returns two different values based on server and client.

mxkaske · 2025-09-21T19:46:57Z

src/app/infinite/page.tsx

-  const search = searchParamsCache.parse(await searchParams);
+  const search = await searchParamsCache.parse(searchParams);
  const queryClient = getQueryClient();
  await queryClient.prefetchInfiniteQuery(dataOptions(search));


when logging on server component (/infinite/page.tsx)

const queryOptions = dataOptions(search); console.log('server key', queryOptions); // [ 'data-table', [ 'data-table', '' ] ] await queryClient.prefetchInfiniteQuery(queryOptions);

while in client component (/infinite/client.tsx)

const queryOptions = dataOptions(search); console.log('client key', queryOptions); // [ 'data-table', '?cursor=1758483849134' ] const { .. } = useInfiniteQuery(queryOptions);

while search is exactly same!

To be exact, the searchParamsSerializer = createSerializer(searchParamsParser) returns two different values based on server and client.

@franky47 is that known?

Yeah the problem is in the definition of the default value for cursor in the search params definitions object: https://github.com/gruckion/data-table-filters/blob/3b564725b96f53d093567466eab64530f367f732/src/app/infinite/search-params.ts#L58

If you log the timestamp for this new Date(), you'll see it differs between the client and the server, which makes sense because the code is evaluated at different times.

So on the server, the serializer sees the default value as equal (comparison by timestamp), but on the client it doesn't, and therefore renders it to the URL, giving you different React Query keys.

mxkaske · 2025-09-21T20:03:49Z

On the default page:

Selecting a single date gives you a range in the URL that's {midnightUTCForThatDay}-{midnighUTCForThatDay}, it should probably be {midnightUTCForThatDay}-{23:59UTCForThatDay}

The data shows log points for today (2025-09-21), but selecting from the 20th to the 22nd doesn't include them.

On the infinite page, the selection works from the tooltip, but now when dragging from the bars on top of the table.

potentially non-related issues to the code changes 😅 - at least selecting a single data doesn't seem to work on prod

franky47 reviewed Sep 21, 2025

View reviewed changes

vercel bot deployed to Preview September 21, 2025 18:39 View deployment

mxkaske reviewed Sep 21, 2025

View reviewed changes

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

gruckion commented Sep 21, 2025

Changes

data-table-filters/src/app/infinite/

data-table-filters/src/app/light/

data-table-filters/src/app/default/

Uh oh!

vercel bot commented Sep 21, 2025

Uh oh!

franky47 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

franky47 Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

mxkaske Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

franky47 commented Sep 21, 2025

Uh oh!

mxkaske left a comment

Choose a reason for hiding this comment

Uh oh!

mxkaske Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

mxkaske Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

mxkaske Sep 21, 2025

Choose a reason for hiding this comment

Uh oh!

mxkaske Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

franky47 Sep 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mxkaske commented Sep 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

franky47 left a comment •

edited

Loading

vercel bot commented Sep 21, 2025 •

edited

Loading

mxkaske Sep 21, 2025 •

edited

Loading

franky47 Sep 21, 2025 •

edited

Loading