RTK QueryAdvanced
SSR & Hydration — prefetch
Next.js App Router-এ RTK Query prefetch/hydration — বাংলায়।
5টি অংশবাংলা ভাষায়
Server component-এ prefetchts
ts
// app/products/page.tsx (Server Component)
import { store } from "@/app/store";
import { ordersApi } from "@/features/orders/ordersService";
export default async function ProductsPage() {
// সার্ভারে data fetch → cache-এ রাখা হয়ে যায়
const result = await store.dispatch(
ordersApi.endpoints.getProducts.initiate(undefined),
);
// client-এ তা hydration-এ যাবে (SSR)
return <ProductsView />;
}সতর্কতা: Server store distinct
সার্ভারে প্রতি request-এ নতুন store (makeStore) দরকার — shared module-level singleton ভুল হয়ে যেতে পারে, user-দের data মিশে যেতে পারে। এই ক্ষেত্রে extractRehydrationInfo বা HYDRATE action pattern ব্যবহার করুন।
Client hydra ধারণাtsx
tsx
// Other options:
// 1) API-থেকে stable initialize → client-এ ফলটা initial state
// 2) RTK + next-redux-wrapper (SSR stream)
// 3) App Router-এ Server Component fetch − TanStack initialData-analogকখন SSR prefetch
প্রথম paint-এ গুরুত্বপূর্ণ ডেটা (SEO/first load) হলে সার্ভার prefetch দারুণ; ইন্টারেক্টিভ dashboard অ্যাপে client fetch + cache-ই যথেষ্ট। যাচাই করে সিদ্ধান্ত নিন।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।