React Query + Next.js: Arsitektur 2026

Di era Next.js 15+, banyak yang bingung: masih butuh React Query gak sih? Jawabannya: YA, tapi cara pakainya beda. Kita gak lagi fetch data di client-side mount, tapi kita pakai pattern Prefetching on Server.

Kenapa Harus Pake Pattern Ini?

Zero Flicker: User gak bakal liat loading spinner pas buka halaman.
SEO Friendly: Data sudah ter-render dari server.
Snappy Client State: Data tetep bisa di-cache dan di-update secara optimistic di client.

Tutorial: Setup dalam 3 Langkah

1. Create Global Provider

TypeScript
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { useState } from "react";

export default function Providers({ children }) {
  const [queryClient] = useState(() => new QueryClient({
    defaultOptions: { queries: { staleTime: 60 * 1000 } }
  }));
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

2. Prefetch di Server Component

Gunakan HydrationBoundary buat kirim data dari server ke cache client.

TypeScript
// app/posts/page.tsx
import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";

export default async function Page() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({ queryKey: ["posts"], queryFn: getPosts });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PostsList />
    </HydrationBoundary>
  );
}

3. Consume di Client Component

Di client, panggil useQuery dengan key yang sama. Gak akan ada loading state karena data udah di-hydrate.

TypeScript
"use client";
import { useQuery } from "@tanstack/react-query";

export function PostsList() {
  const { data } = useQuery({ queryKey: ["posts"], queryFn: getPosts });
  return <ul>{data.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

Tech Update: Optimistic UI

Untuk aksi seperti 'Like' atau 'Comment', jangan tunggu server. Pakai onMutate buat update cache instan, dan onError buat rollback kalau gagal.

"Pattern ini bikin app kamu berasa kayak app native: cepet, responsif, tapi tetep dapet power SEO dari Next.js."

Takeaway

🚀 Next.js App Router + React Query = The Holy Grail of Frontend Architecture 2026.