TanStackAdvanced

Production Architecture

SSR/CSR সিদ্ধান্ত, নিরাপত্তা, rate limiting, env, testing — বাংলায়।

9টি অংশবাংলা ভাষায়

প্রজেক্ট বড় হলে — ডেব-ব্রেকিং ডিজাইন সিদ্ধান্ত নিতে হয়। নিচে production-স্তরের check-list ও তর্ক।

SSR vs CSR ডেটা

ডেটা	SSR (RSC)	CSR (TanStack)
গোটা-page প্রাথমিক list	দারুণ SEO/initial paint	skeleton পরে
ইন্টারেক্টিভ dashboard filter/search	প্রতিটি filter-এ fetch HTML	✓ tanstack cache+invalidate
user-নির্দিষ্ট ডেটা	Cookies/auth-সহ	token-সহ client fetch

hybrid — SSR প্রাথমিক, client refinetsx

tsx

// server component (page)
const initial = await listProductsFromDb({ page: 1, pageSize: 10 });

// client component (dashboard) — initialData seed
export default function ProductsPage() {
  return <ProductsDashboard initialData={initial} />;
}

// useProducts में initialData
function useProducts(params: ProductQueryParams, initialData?: ListResponse<Product>) {
  return useQuery({
    queryKey: productKeys.list(params),
    queryFn: () => listProducts(params),
    initialData,
  });
}

নিরাপত্তা বিষয়

সার্ভার-সাইড validation — client validation সহজ bypass হয়; সবসময় schema-সহ re-validate
Auth — API route-এ session/token check
Rate limit — brute force থেকে বাঁচাতে
environment variables — NEXT_PUBLIC_API_URL শুধু public; secret .env.local-এ
id/slug — বিশ্বাস করবেন না, validate করুন

Deploy sort-out

npm run build clean — npx tsc --noEmit আলাদা check script
Envs production-এ (.env.production)
DB migration
অবজার্ভেবিলিটি — error tracking (Sentry)

premature optimization নয়

SSR+CSR hybrid দরকার হয় যখন এটা measurable। শুরুতে plain CSR-ই ঠিক থাকবে — তারপর performance budget মাপুন, তারপর migrate। ডিফল্ট সহজ আর সঠিক।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।