1~
2React Server Components (RSC) আমরা কীভাবে React অ্যাপ্লিকেশন তৈরি করি তা মৌলিকভাবে পরিবর্তন করেছে। রেন্ডারিং লজিক সার্ভারে সরিয়ে, আমরা ক্লায়েন্টে পাঠানো JavaScript বান্ডেল উল্লেখযোগ্যভাবে কমাতে পারি, যা দ্রুত লোড টাইম এবং আরও ভালো ব্যবহারকারী অভিজ্ঞতার দিকে নিয়ে যায়। এই নিবন্ধে, আমরা ২০২৬ সালে RSCs ব্যবহারের জন্য উন্নত প্যাটার্ন এবং সেরা অনুশীলনগুলো অন্বেষণ করব।
3~
4## Server Components কী?
5~
6ঐতিহ্যগতভাবে, React components সম্পূর্ণরূপে ক্লায়েন্টে (CSR) রেন্ডার হতো অথবা সার্ভারে HTML হিসেবে প্রি-রেন্ডার (SSR) হতো এবং তারপর ক্লায়েন্টে হাইড্রেট হতো। **Server Components** আমাদের _একচেটিয়াভাবে_ সার্ভারে components রেন্ডার করতে দেয়। এদের কোড কখনো ব্রাউজারে পাঠানো হয় না।
7~
8### সুবিধাসমূহ
9~
101.  **শূন্য বান্ডেল সাইজ**: Server Components-এ ব্যবহৃত নির্ভরতা (যেমন markdown parsers বা ভারী date libraries) সার্ভারেই থাকে।
112.  **সরাসরি Backend অ্যাক্সেস**: আপনি API endpoints প্রকাশ না করেই আপনার component-এর ভেতরে সরাসরি ডাটাবেস কোয়েরি করতে পারেন।
123.  **স্বয়ংক্রিয় Code Splitting**: সার্ভার সাইডে import করা Client components স্বয়ংক্রিয়ভাবে কোড-স্প্লিট হয়।
13~
14## ডেটা ফেচিং প্যাটার্ন
15~
16RSC-তে, আপনি আপনার components-কে `async` করতে এবং সরাসরি ডেটা await করতে পারেন।
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Streaming-এর জন্য Suspense
39~
40যেহেতু ডেটা ফেচিং ধীর হতে পারে, ডেটা লোড হওয়ার সময় তাৎক্ষণিকভাবে একটি ফলব্যাক UI দেখাতে আপনার components-কে `<Suspense>`-এ wrap করুন।
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Server এবং Client Components মিশ্রিত করা
60~
61সবচেয়ে বিভ্রান্তিকর দিকগুলোর একটি হলো Server এবং Client components কীভাবে একত্রিত করা যায়।
62~
63**মূলনীতি**: Server Components Client Components import করতে পারে। Client Components _সরাসরি_ Server Components import করতে _পারে না_। তবে, আপনি একটি Server Component-কে `children` হিসেবে একটি Client Component-এ পাস করতে পারেন।
64~
65### "Children" প্যাটার্ন
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## সাধারণ সমস্যাসমূহ
100~
1011.  **Server Components-এ Context ব্যবহার**: Context একটি ক্লায়েন্ট-সাইড ধারণা। সার্ভার সাইডে ডেটা শেয়ার করতে হলে, props হিসেবে পাস করুন অথবা একটি বিশেষায়িত request-scope cache ব্যবহার করুন।
1022.  **Event Handlers যোগ করা**: আপনি একটি Server Component-এ `onClick` বা `onChange` যোগ করতে পারবেন না। সেই লজিক একটি জেনেরিক Client Component লিফ নোডে রাখতে হবে।
103~
104## উপসংহার
105~
106React Server Components শুধু একটি ফিচার নয়; এটি একটি প্যারাডাইম শিফট। সার্ভার এবং ক্লায়েন্টের মধ্যে সীমানা বুঝে, আপনি এমন অ্যাপ্লিকেশন তৈরি করতে পারেন যা উচ্চ মাত্রায় ইন্টারেক্টিভ এবং অবিশ্বাস্যভাবে দ্রুত।
107~