feat: add ssr using tanstack query

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.60.2",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/app/explorer/components/InfiniteScrollGuilds.tsx

@@ -27,7 +27,7 @@ export const InfiniteScrollGuilds = () => {
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
     useInfiniteQuery({
-      queryKey: ["guilds", search],
+      queryKey: ["guilds", search || ""],
       queryFn: fetchGuilds,
       initialPageParam: 1,
       enabled: search !== undefined,

src/app/explorer/page.tsx

@@ -4,6 +4,11 @@ import { Card } from "@/components/ui/Card";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { env } from "@/lib/env";
 import { Plus, SignIn } from "@phosphor-icons/react/dist/ssr";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
 import { Suspense } from "react";
 import { GuildCard } from "./components/GuildCard";
 import { InfiniteScrollGuilds } from "./components/InfiniteScrollGuilds";
@@ -26,7 +31,19 @@ const GuildCardSkeleton = () => {
   );
 };
 
-export default function Explorer() {
+export default async function Explorer() {
+  const queryClient = new QueryClient();
+  await queryClient.prefetchInfiniteQuery({
+    queryKey: ["guilds", ""],
+    initialPageParam: 1,
+    queryFn: async ({ pageParam }: { pageParam: number }) =>
+      (
+        await fetch(
+          `${env.NEXT_PUBLIC_API}/guild/search?page=${pageParam}&pageSize=${24}&search=`,
+        )
+      ).json(),
+  });
+
   return (
     <main className="container mx-auto grid max-w-screen-lg gap-8 px-4 py-8">
       <section className="pt-6 pb-8">
@@ -39,7 +56,9 @@ export default function Explorer() {
         <Search />
       </section>
 
-      <InfiniteScrollGuilds />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <InfiniteScrollGuilds />
+      </HydrationBoundary>
     </main>
   );
 }

src/components/Providers.tsx

@@ -2,6 +2,7 @@
 
 import { wagmiConfig } from "@/config/wagmi";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider as JotaiProvider } from "jotai";
 import { ThemeProvider } from "next-themes";
 import type { FunctionComponent, PropsWithChildren } from "react";
@@ -23,6 +24,7 @@ export const Providers: FunctionComponent<PropsWithChildren> = ({
         <WagmiProvider config={wagmiConfig}>
           <QueryClientProvider client={queryClient}>
             {children}
+            <ReactQueryDevtools initialIsOpen={false} />
           </QueryClientProvider>
         </WagmiProvider>
       </ThemeProvider>