[lmduy2612]

Summary

Server-renders the first view of the landing rows (/) and the directory (/builders) using TanStack Query v5 HydrationBoundary and dehydrate, prefetching data on the server with appropriate cache revalidation windows before handing off to the client query hooks.

Fixes #410

Changes Made

1. Landing Page (/):

   • Prefetches the ecosystem stats strip (/users/directory?limit=1, /projects?limit=1, /organizations?limit=1), Top builders (/users/top-builders?limit=8), and Featured projects (/projects/featured).
   • Uses next: { revalidate: 180 } (3 minutes) cache window on server fetches to protect the API from repeated visits.
   • Wraps <StatsStrip />, <TopBuilders />, and <FeaturedProjects /> in <HydrationBoundary state={dehydrate(queryClient)}>.
   • Client components hydrate directly from the preloaded cache without duplicate network fetches on load.

2. Builders Directory (/builders):

   • Parses search parameters on the server using parseBuildersQueryParams — sharing the exact same URL-parsing and defaulting logic as the client directory (readBuilderFilters, readBuilderPage, readBuilderSort).
   • Prefetches the first page of builders (buildersKeys.list(queryParams)) and filter facets (buildersKeys.filters) using next: { revalidate: 60 } (1 minute cache window).
   • Wraps the directory in <HydrationBoundary> so the first page renders directly in the server HTML while preserving client-side filtering, sorting, pagination, and debounce without full reloads.

3. Resilience:

   • Server-side prefetch promises are handled with Promise.allSettled and dehydrate errors safely, ensuring that if the API is down or unreachable, the pages still render and display existing client error/fallback states rather than failing with HTTP 500.
   • All card components and interactive behaviors remain unchanged.

View-source Verification Snippets

1. Landing Page (/): Top builders rendered directly in server HTML

<h3 class="truncate text-base font-semibold text-foreground">Ofoekii Frances Onyinyechukwu</h3>
<p class="truncate text-sm text-muted-foreground">@bounder_tildapetal02</p>
<h3 class="truncate text-base font-semibold text-foreground">onovo victor</h3>
<p class="truncate text-sm text-muted-foreground">@bounder_onovovictor1</p>
<h3 class="truncate text-base font-semibold text-foreground">Collins Chikangwu</h3>
<p class="truncate text-sm text-muted-foreground">@0xdevcollins</p>

2. Directory Page (/builders): First page of builders rendered in server HTML

<h3 class="truncate text-base font-semibold text-foreground">onovo victor</h3>
<p class="truncate text-sm text-muted-foreground">@bounder_onovovictor1</p>
<h3 class="truncate text-base font-semibold text-foreground">Ofoekii Frances Onyinyechukwu</h3>
<p class="truncate text-sm text-muted-foreground">@bounder_tildapetal02</p>
<h3 class="truncate text-base font-semibold text-foreground">Collins Chikangwu</h3>
<p class="truncate text-sm text-muted-foreground">@0xdevcollins</p>

3. Filtered Directory Page (/builders?skills=UX%20Design): Filtered builders in server HTML

<h3 class="truncate text-base font-semibold text-foreground">onovo victor</h3>
<p class="truncate text-sm text-muted-foreground">@bounder_onovovictor1</p>

Verification Checklist

• npm run lint passes (0 errors, 0 warnings)
• npx tsc --noEmit passes (0 errors)
• npm run build passes (Next.js 16 Turbopack production build)
• npm run seo:check passes (all HTML & XML routes 200 and SEO tags present)
• SSR HTML contains Top builders & Featured projects on /
• SSR HTML contains filtered builders on /builders?skills=...
• No duplicate client requests on first load
• Changing filters/sort/page works seamlessly in the client without page reload
• Unreachable API renders gracefully with error/fallback states

[vercel]

@lmduy2612 is attempting to deploy a commit to the Threadflow Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@lmduy2612 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[0xdevcollins]

Thanks @lmduy2612 , this works well. Two changes before merge:

Add a timeout to the server-side fetches (for example signal: AbortSignal.timeout(5000) in the init you pass). Without it, a hanging API hangs the whole page instead of falling back to the client states.
Drop the custom shouldDehydrateQuery and only dehydrate successful queries (the default), so a failed prefetch doesn’t put the error in the page.

Small cleanups: use the imported helpers directly instead of the const readFilters = ... aliases.

[lmduy2612]

Thanks for the review @0xdevcollins! Updated in bdd01c0:

• Added signal: AbortSignal.timeout(5000) to all server-side prefetches in app/page.tsx and app/builders/page.tsx.
• Dropped the custom shouldDehydrateQuery so only successful queries are dehydrated into page state (default behavior).
• Cleaned up aliases in components/discover/builders-view.tsx to use imported helpers and constants directly.

Verified locally with tsc --noEmit, npm run lint, and a clean next build.

[lmduy2612]

Hi @0xdevcollins, gentle reminder as Wave 10 is ending tomorrow (Oct 22). All requested updates (AbortSignal timeout, default query hydration, and alias cleanup) have been completed and verified. Whenever you have a moment, could you please take a look and merge? Thank you!