২০২৬ সালে React Server Components আয়ত্ত করা

React Server Components (RSC) আমরা কীভাবে React অ্যাপ্লিকেশন তৈরি করি তা মৌলিকভাবে পরিবর্তন করেছে। রেন্ডারিং লজিক সার্ভারে সরিয়ে, আমরা ক্লায়েন্টে পাঠানো JavaScript বান্ডেল উল্লেখযোগ্যভাবে কমাতে পারি, যা দ্রুত লোড টাইম এবং আরও ভালো ব্যবহারকারী অভিজ্ঞতার দিকে নিয়ে যায়। এই নিবন্ধে, আমরা ২০২৬ সালে RSCs ব্যবহারের জন্য উন্নত প্যাটার্ন এবং সেরা অনুশীলনগুলো অন্বেষণ করব।

Server Components কী?

ঐতিহ্যগতভাবে, React components সম্পূর্ণরূপে ক্লায়েন্টে (CSR) রেন্ডার হতো অথবা সার্ভারে HTML হিসেবে প্রি-রেন্ডার (SSR) হতো এবং তারপর ক্লায়েন্টে হাইড্রেট হতো। Server Components আমাদের একচেটিয়াভাবে সার্ভারে components রেন্ডার করতে দেয়। এদের কোড কখনো ব্রাউজারে পাঠানো হয় না।

সুবিধাসমূহ

1. শূন্য বান্ডেল সাইজ: Server Components-এ ব্যবহৃত নির্ভরতা (যেমন markdown parsers বা ভারী date libraries) সার্ভারেই থাকে।
2. সরাসরি Backend অ্যাক্সেস: আপনি API endpoints প্রকাশ না করেই আপনার component-এর ভেতরে সরাসরি ডাটাবেস কোয়েরি করতে পারেন।
3. স্বয়ংক্রিয় Code Splitting: সার্ভার সাইডে import করা Client components স্বয়ংক্রিয়ভাবে কোড-স্প্লিট হয়।

ডেটা ফেচিং প্যাটার্ন

RSC-তে, আপনি আপনার components-কে async করতে এবং সরাসরি ডেটা await করতে পারেন।

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Streaming-এর জন্য Suspense

যেহেতু ডেটা ফেচিং ধীর হতে পারে, ডেটা লোড হওয়ার সময় তাৎক্ষণিকভাবে একটি ফলব্যাক UI দেখাতে আপনার components-কে <Suspense>-এ wrap করুন।

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Server এবং Client Components মিশ্রিত করা

সবচেয়ে বিভ্রান্তিকর দিকগুলোর একটি হলো Server এবং Client components কীভাবে একত্রিত করা যায়।

মূলনীতি: Server Components Client Components import করতে পারে। Client Components সরাসরি Server Components import করতে পারে না। তবে, আপনি একটি Server Component-কে children হিসেবে একটি Client Component-এ পাস করতে পারেন।

"Children" প্যাটার্ন

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children} {/* This can be a Server Component! */}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

সাধারণ সমস্যাসমূহ

1. Server Components-এ Context ব্যবহার: Context একটি ক্লায়েন্ট-সাইড ধারণা। সার্ভার সাইডে ডেটা শেয়ার করতে হলে, props হিসেবে পাস করুন অথবা একটি বিশেষায়িত request-scope cache ব্যবহার করুন।
2. Event Handlers যোগ করা: আপনি একটি Server Component-এ onClick বা onChange যোগ করতে পারবেন না। সেই লজিক একটি জেনেরিক Client Component লিফ নোডে রাখতে হবে।

উপসংহার

React Server Components শুধু একটি ফিচার নয়; এটি একটি প্যারাডাইম শিফট। সার্ভার এবং ক্লায়েন্টের মধ্যে সীমানা বুঝে, আপনি এমন অ্যাপ্লিকেশন তৈরি করতে পারেন যা উচ্চ মাত্রায় ইন্টারেক্টিভ এবং অবিশ্বাস্যভাবে দ্রুত।