Server Component আর Client Component — কোনটি কোথায় চলে

১ · দুই রান্নাঘরের রেস্তোরাঁ: React Server Components কী

পর্ব ৫১-এ (Next.js App Router) আপনি “বাজারঘর”-এর ফোল্ডার, layout আর route বানিয়েছেন। সেখানে একটি কথা চুপচাপ সত্যি ছিল: app/-এর প্রতিটি page আর layout ডিফল্টভাবে Server Component. এই পর্বে সেই কথাটি খুলে দেখব। কোন কোড সার্ভারে থাকে, কোন কোড গ্রাহকের ফোনে যায়, আর ভুল হলে কী ভাঙে।

React Server Components (সংক্ষেপে RSC) Next.js-এর নিজের আবিষ্কার নয়; এটি React-এর একটি বৈশিষ্ট্য। react.dev-এর reference অনুযায়ী Server Component হলো এমন component, যা bundle করার আগেই, client app বা SSR server থেকে আলাদা একটি পরিবেশে render হয়। আর "use client" হলো React-এর একটি directive, যা module graph-এ server আর client-এর মাঝে সীমানা টানে। এই বৈশিষ্ট্য চালাতে একটি framework বা bundler লাগে, কারণ কোন ফাইল কোন দিকে যাবে তা build-এর সময় ঠিক করতে হয়। Next.js-এর App Router সেই কাজটি করে; React Router, Waku বা Parcel-এর মতো আরও কিছু টুলও RSC সমর্থন করে।

আগের মডিউলগুলোর ভাষায় বললে, পর্ব ০৩-এ CSR, SSR আর SSG-এর মানচিত্র দেখেছেন। সেগুলো প্রশ্ন করে “HTML কখন আর কোথায় তৈরি হয়”। RSC একটি আলাদা প্রশ্ন করে: কোন component-এর কোড ব্রাউজারে যাবে? একটি SSR পাতাতেও আগে প্রতিটি component-এর কোড ব্রাউজারে যেত, কারণ hydration-এর সময় সব আবার চালাতে হতো। RSC বলে, যে অংশ ক্লিক বা state চায় না, তার কোড ব্রাউজারে পাঠানোর দরকারই নেই।

২ · কে কোথায় চলে, কে কী পারে

Next.js-এর ডকুমেন্টেশন একটি ছোট ছক দেয়। Server Component চলে শুধু সার্ভারে। Client Component চলে সার্ভারে এবং ব্রাউজারে। “Client” নামটি ভুল বোঝায়, তাই নিজের চোখে দেখা দরকার। “বাজারঘর”-এর পাতায় আমরা দুটি console.log রাখলাম: একটি ProductPage-এ (server), একটি AddToCart-এ (client). তারপর next start চালিয়ে ব্রাউজারে সরাসরি পাতাটি খুললাম।

~/bazarghar$ npx next start -p 3852
▲ Next.js 16.4.4
- Local:         http://127.0.0.1:3852
✓ Ready in 155ms
ProductPage render jamdani
AddToCart render jamdani

সার্ভারের terminal-এ দুটি লাইনই এসেছে। অর্থাৎ AddToCart একটি Client Component হয়েও সার্ভারে চলেছে, যাতে প্রথম HTML-এ বোতামটি থাকে। ব্রাউজারের console খুললে শুধু AddToCart render jamdani দেখা যায়, কারণ hydration-এর সময় সেটি আবার চলে। ProductPage-এর লাইন ব্রাউজারে কখনো আসে না, কারণ তার কোডই ব্রাউজারে নেই।

শেষ সারির আগের একটি সূক্ষ্ম কথা: Client Component সার্ভারেও চলে, তাই তার render-এর ভেতরে সরাসরি window.innerWidth পড়লে সার্ভারে error হয়। ব্রাউজারের API শুধু useEffect বা event handler-এ রাখুন (পর্ব ১৩)। সার্ভার আর ব্রাউজারের HTML না মিললে কী হয়, সেটি পর্ব ৫৬-এর (Hydration) বিষয়।

আর Server Component নিজে async হতে পারে, এটি তার সবচেয়ে বড় সুবিধা। আমাদের পাতায় await getProduct(slug) সরাসরি render-এর ভেতরে। কোনো useEffect, কোনো loading state, কোনো আলাদা API route লাগেনি। Next.js 16-এ params একটি promise, তাই আগে await params করতে হয়; পুরোনো টিউটোরিয়ালে params.slug সরাসরি পড়া দেখলে বুঝবেন সেটি Next.js 14 বা আগের।

import { notFound } from 'next/navigation';
import { getProduct } from '@/lib/db';
import Gallery from '@/app/ui/gallery';
import AddToCart from '@/app/ui/add-to-cart';
import Reviews from '@/app/ui/reviews';

export default async function ProductPage({ params }) {
  const { slug } = await params;
  const p = await getProduct(slug);
  if (!p) notFound();
  console.log('ProductPage render', slug);
  return (
    <main>
      <h1>{p.name}</h1>
      <Gallery images={p.images}>
        <p>দাম: ৳{p.price.toLocaleString('bn-BD')}</p>
      </Gallery>
      <AddToCart product={{ slug: p.slug, name: p.name, price: p.price }} />
      <Reviews reviews={p.reviews} />
    </main>
  );
}

এই ফাইলে "use client" নেই, তাই এটি Server Component. সে তিনটি component import করেছে। তার মধ্যে Gallery আর AddToCart-এর মাথায় "use client" আছে, Reviews-এর নেই। পরের অংশে দেখব, এই একটি লাইনই কীভাবে পুরো ছবি বদলে দেয়।

৩ · "use client" একটি সীমানা, প্রতিটি component-এর লেবেল নয়

নতুনরা প্রায়ই ভাবেন, প্রতিটি interactive component-এর মাথায় "use client" লিখতে হবে, আর না লিখলে সেটি server. কথাটি অর্ধেক ঠিক। আসল নিয়ম হলো: "use client" module graph-এ একটি দরজা। যে ফাইলের মাথায় এটি থাকে, সেই ফাইল আর সে যা যা import করে, সবই client bundle-এ যায়, তাদের মাথায় directive থাকুক বা না থাকুক।

এখান থেকে দুটি ফল আসে। প্রথমত, client subtree-এর ভেতরে আর directive লেখার দরকার নেই; প্রবেশপথে একবারই যথেষ্ট। দ্বিতীয়ত, একটি ভুল জায়গায় বসানো "use client" অনেক ভারী কোড টেনে নিতে পারে। নিচের ধাপে “বাজারঘর”-এর আসল build-এর সংখ্যা দেখুন।

এই হিসাব হাতে করতে একটি ছোট মডেল লিখি। নিচের কোড একটি module graph নেয়, server অংশ থেকে হেঁটে প্রথম client চিহ্নিত ফাইল খোঁজে, আর সেখান থেকে যা যা import হয় সব “পাঠানো হবে” তালিকায় তোলে। আকারগুলো আমাদের build থেকে আনুমানিক (marked-এর ESM ফাইল প্রায় 47 KB; বাকিটা sanitize-html আর তার dependency). এটি Next.js-এর আসল bundler নয়, শিক্ষামূলক মডেল।

// Module graph-এর শিক্ষামূলক মডেল। kb = এক build-এর মাপ থেকে আনুমানিক
const graph = {
  'page.js':       { kb: 1,   imports: ['db.js', 'gallery.js', 'add-to-cart.js', 'reviews.js'] },
  'db.js':         { kb: 2,   imports: [] },
  'gallery.js':    { kb: 1,   imports: [], client: true },
  'add-to-cart.js':{ kb: 1,   imports: ['cart.js'], client: true },
  'cart.js':       { kb: 1,   imports: [], client: true },
  'reviews.js':    { kb: 1,   imports: ['marked', 'sanitize-html'] },
  'marked':        { kb: 47,  imports: [] },
  'sanitize-html': { kb: 178, imports: [] },
};
function shipped(g) {
  const out = new Set();
  const visit = (m) => {                    // সীমানার ভেতরে ঢুকলে সব import client-এ
    if (out.has(m)) return;
    out.add(m);
    g[m].imports.forEach(visit);
  };
  const walk = (m, seen = new Set()) => {   // server অংশে হাঁটা, সীমানা খোঁজা
    if (seen.has(m)) return;
    seen.add(m);
    if (g[m].client) return visit(m);
    g[m].imports.forEach((x) => walk(x, seen));
  };
  walk('page.js');
  const list = [...out];
  return list.join(', ') + ' = ' + list.reduce((s, m) => s + g[m].kb, 0) + ' KB';
}
console.log('reviews server-এ :', shipped(graph));
graph['reviews.js'].client = true;          // reviews.js-এর মাথায় 'use client'
console.log('reviews client-এ :', shipped(graph));
graph['page.js'].client = true;             // পুরো পাতাই 'use client'
console.log('পুরো পাতা client :', shipped(graph));

reviews server-এ : gallery.js, add-to-cart.js, cart.js = 3 KB
reviews client-এ : gallery.js, add-to-cart.js, cart.js, reviews.js, marked, sanitize-html = 229 KB
পুরো পাতা client : page.js, db.js, gallery.js, add-to-cart.js, cart.js, reviews.js, marked, sanitize-html = 232 KB

৪ · সীমানা পার হয় শুধু serializable props

Server Component সার্ভারে চলে, Client Component ব্রাউজারে। মাঝখানে নেটওয়ার্ক। তাই server থেকে client-কে যা props দেবেন, সেটি লেখায় বদলে (serialize করে) পাঠাতে হয়, আর ওপারে আবার object বানাতে হয়। JSON-এর মতো, তবে React-এর নিজের নিয়মে, যা JSON-এর চেয়ে একটু উদার।

react.dev-এর তালিকা অনুযায়ী যা যায় (serializable): string, number, bigint, boolean, undefined, null; Symbol.for দিয়ে নিবন্ধিত symbol; serializable জিনিসের Array, Map, Set, TypedArray আর ArrayBuffer; Date; object initializer দিয়ে বানানো সাধারণ object; Server Function ("use server" চিহ্নিত); Server বা Client Component-এর JSX element; আর Promise. যা যায় না: সাধারণ function, class, built-in ছাড়া অন্য যেকোনো class-এর object, null prototype-এর object, আর নিবন্ধনহীন symbol.

এবার আসল error দেখি। প্রতিটি পরীক্ষা next dev-এ চালানো, কারণ production-এ error বার্তার বিস্তারিত লুকানো থাকে। প্রথমে AddToCart-কে একটি সাধারণ arrow function দিলাম:

<AddToCart product={…} onAdded={() => console.log("added")} />

ProductPage render jamdani
⨯ Error: Event handlers cannot be passed to Client Component props.
  <... product={{...}} onAdded={function onAdded}>
                               ^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
 GET /products/jamdani 500 in 902ms

নাম on দিয়ে শুরু, তাই React ধরে নিল এটি event handler. নাম বদলে formatPrice={(n) => "৳" + n} দিলে বার্তাও বদলায়:

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  <... product={{...}} formatPrice={function formatPrice}>

তৃতীয় পরীক্ষা: দামকে একটি class-এর object বানালাম, class Taka { constructor(v) { this.v = v; } }. বাস্তবে এটি প্রায়ই ঘটে, কারণ ORM অনেক সময় দশমিক দামকে একটি class-এর object হিসেবে দেয় (decimal type, পর্ব ৩৯)।

⨯ Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
  {slug: "jamdani", name: ..., price: {v: 4500}}
                                      ^^^^^^^^^

আর Date? JSON-এ Date হারিয়ে string হয়ে যায়, কিন্তু React Date চেনে। listedAt: new Date('2026-11-01T04:00:00Z') দিয়ে পাতাটি ঠিকঠাক চলল (200). Payload-এ সেটি এভাবে গেল, সামনে $D চিহ্ন, যাতে ওপারে আবার Date বানানো যায়:

"product":{"slug":"jamdani","name":"জামদানি শাড়ি","price":4500,"listedAt":"$D2026-11-01T04:00:00.000Z"}

এই পাহারাদার আসলে কীভাবে ভাবে, একটি ছোট মডেলে দেখি। নিচের Node.js কোড props-এর প্রতিটি ঘর হেঁটে দেখে, অনুমোদিত হলে লেখায় বদলায়, না হলে পথসহ error দেয়। এটি React-এর আসল কোড নয়; শুধু $D চিহ্নটি আসল payload-এর মতো, $F চিহ্নটি আমাদের নিজের বানানো।

// সীমানা-পাহারাদারের শিক্ষামূলক মডেল (React-এর আসল কোড নয়)
function encode(v, path) {
  if (v === null || ['string', 'number', 'boolean'].includes(typeof v)) return v;
  if (v === undefined) return '$undefined';
  if (typeof v === 'function') {
    if (v.isServerFunction) return '$F' + v.id;          // শুধু 'use server' ফাংশনের ঠিকানা যায়
    throw new Error(`${path}: function পাঠানো যায় না`);
  }
  if (v instanceof Date) return '$D' + v.toISOString();
  if (Array.isArray(v)) return v.map((x, i) => encode(x, `${path}[${i}]`));
  const proto = Object.getPrototypeOf(v);
  if (proto !== Object.prototype) {
    const name = proto && proto.constructor ? proto.constructor.name : 'null prototype';
    throw new Error(`${path}: ${name} class-এর object পাঠানো যায় না`);
  }
  const out = {};
  for (const [k, x] of Object.entries(v)) out[k] = encode(x, `${path}.${k}`);
  return out;
}
class Taka { constructor(v) { this.v = v; } }
const addToCart = Object.assign(async () => {}, { isServerFunction: true, id: 'a1' });
const tries = {
  plain: { slug: 'jamdani', price: 4500 },
  date: { slug: 'jamdani', listedAt: new Date('2026-11-01T04:00:00Z') },
  action: { slug: 'jamdani', action: addToCart },
  handler: { slug: 'jamdani', onAdded: () => console.log('added') },
  money: { slug: 'jamdani', price: new Taka(4500) },
};
for (const [name, props] of Object.entries(tries)) {
  try {
    console.log('OK  ', name, JSON.stringify(encode(props, 'props')));
  } catch (e) {
    console.log('FAIL', name, e.message);
  }
}

OK   plain {"slug":"jamdani","price":4500}
OK   date {"slug":"jamdani","listedAt":"$D2026-11-01T04:00:00.000Z"}
OK   action {"slug":"jamdani","action":"$Fa1"}
FAIL handler props.onAdded: function পাঠানো যায় না
FAIL money props.price: Taka class-এর object পাঠানো যায় না

কতটুকু পাঠাবেন: props-এর আকার

Serializable হলেই পাঠানো উচিত নয়। Database-এর পুরো সারি client-কে দিলে দুটি ক্ষতি। প্রথমত, প্রতিটি byte payload-এ যায়। দ্বিতীয়ত, payload যে কেউ নেটওয়ার্ক ট্যাবে পড়তে পারে, তাই costPrice বা সরবরাহকারীর ফোন নম্বরের মতো ঘর ফাঁস হয়। নিচে হিসাব করি।

// Client component-কে কতটুকু ডেটা দিচ্ছেন? UTF-8 byte গুনে দেখি
const bytes = (v) => new TextEncoder().encode(JSON.stringify(v)).length;
const reviews = Array.from({ length: 40 }, (_, i) => ({
  id: i + 1, by: 'ক্রেতা ' + (i + 1), stars: (i % 5) + 1,
  text: 'শাড়ির রং আর বুনন খুব ভালো লেগেছে। '.repeat(4),
}));
const product = {                           // database থেকে আসা পুরো সারি
  id: 101, slug: 'jamdani', name: 'জামদানি শাড়ি', price: 4500, stock: 3,
  description: 'হাতে বোনা ঢাকাই জামদানি। '.repeat(60),
  supplierPhone: '01700-000000', costPrice: 3100,   // গ্রাহকের দেখার কথা নয়
  images: ['/a.jpg', '/b.jpg', '/c.jpg'], reviews,
};
const pick = ({ slug, name, price, stock }) => ({ slug, name, price, stock });

const whole = bytes(product);
const picked = bytes(pick(product));
console.log('পুরো product prop :', whole, 'byte');
console.log('বাছাই করা prop    :', picked, 'byte');
console.log('অনুপাত            :', (whole / picked).toFixed(1) + ' গুণ');
const perDay = 10000;                       // ধরে নেওয়া দৈনিক পাতা দেখা
const mb = (n) => (n * perDay / 1024 / 1024).toFixed(1) + ' MB';
console.log(`দিনে ${perDay} বার: পুরো = ${mb(whole)}, বাছাই = ${mb(picked)}`);
console.log('অকারণে যাওয়া ঘর   :', Object.keys(product).filter((k) => !(k in pick(product))).join(', '));

পুরো product prop : 21134 byte
বাছাই করা prop    : 88 byte
অনুপাত            : 240.2 গুণ
দিনে 10000 বার: পুরো = 201.5 MB, বাছাই = 0.8 MB
অকারণে যাওয়া ঘর   : id, description, supplierPhone, costPrice, images, reviews

৫ · children আর slot: client-এর ভেতরে server-এর জিনিস

অংশ ৩-এর সতর্কবার্তা মনে করুন: Client Component server-এর ফাইল import করতে পারে না। তাহলে Gallery-র (client) ভেতরে দামের অংশটি (server-এ হিসাব করা) কীভাবে বসল? উত্তর: Gallery দামের component import করেনি। ProductPage (server) সেটি তৈরি করে children হিসেবে দিয়েছে। পর্ব ০৯-এ children আর slot prop দিয়ে composition শিখেছিলেন; এখানে সেই কৌশলটিই সীমানা পার করার চাবি।

'use client';
import { useState } from 'react';

export default function Gallery({ images, children }) {
  const [i, setI] = useState(0);
  return (
    <section>
      <img src={images[i]} alt="" width={200} />
      {images.map((src, k) => (
        <button key={src} onClick={() => setI(k)}>{k + 1}</button>
      ))}
      {children}
    </section>
  );
}

React এখানে দুটি ভূমিকা আলাদা করে। Owner হলো যে component-এর কোডে JSX লেখা হয়েছে; দামের <p>-এর owner ProductPage. Parent হলো tree-তে যে বাইরে থেকে মুড়ে রাখে; সেটি Gallery. Owner server বলে অংশটি সার্ভারে তৈরি হয়। Gallery শুধু তৈরি ফলটি জায়গামতো বসায়, তার কোড কখনো দেখে না। দর্জির দোকানের মতো: দর্জি কাপড় কাটেন আর জোড়া দেন, কিন্তু কাপড়টি তাঁতে বোনা হয়েছে অন্য কোথাও।

ব্রাউজারে Next.js চালানো যায় না, তাই নিচের live React block একটি শিক্ষামূলক মডেল। PriceBox-কে আমরা component হিসেবে না বসিয়ে আগে থেকে একবার ডেকে ফল (JSX element) বানিয়ে রাখি, যেভাবে সার্ভার করে। তারপর client দ্বীপ Gallery সেটি children হিসেবে পায়। লোড হওয়ার পর কোড নিজেই দুবার ছবি বদলায়।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
let serverRuns = 0, galleryRuns = 0, pick;
function PriceBox({ price }) {          // "server" অংশ: একবারই চলবে
  serverRuns++;
  return <p>দাম: ৳{price.toLocaleString('bn-BD')}</p>;
}
function Gallery({ images, children }) {   // client দ্বীপ
  const [i, setI] = useState(0);
  pick = setI;
  galleryRuns++;
  useEffect(() => {
    console.log(`ছবি ${i + 1} · Gallery চলল ${galleryRuns} বার · PriceBox চলল ${serverRuns} বার`);
  });
  return <section><b>{images[i]}</b>{children}</section>;
}
// "server" আগে থেকে PriceBox-এর ফল বানিয়ে রাখল; client শুধু তৈরি element পায়
const madeOnServer = PriceBox({ price: 4500 });
createRoot(document.getElementById('root')).render(
  <Gallery images={['a.jpg', 'b.jpg', 'c.jpg']}>{madeOnServer}</Gallery>
);
setTimeout(() => {
  for (const k of [1, 2]) ReactDOM.flushSync(() => pick(k));
}, 50);
</script>

ছবি 1 · Gallery চলল 1 বার · PriceBox চলল 1 বার
ছবি 2 · Gallery চলল 2 বার · PriceBox চলল 1 বার
ছবি 3 · Gallery চলল 3 বার · PriceBox চলল 1 বার

শুধু children নয়, যেকোনো prop-এ JSX দেওয়া যায়। ধরুন একটি client Tabs-এ তিনটি ট্যাব: “বিবরণ”, “মাপ”, “রিভিউ”। প্রতিটি ট্যাবের ভেতরের লেখা server-এ তৈরি করে description={<Description />}, reviews={<Reviews />} হিসেবে পাঠান। ট্যাব বদলানো client-এ, ভেতরের ভারী লেখা server-এ। একটি সতর্কতা: Menu.Item-এর মতো static property-ওয়ালা compound component সীমানার ওপারে ভাঙে, কারণ server দিক থেকে client module-এর জায়গায় শুধু একটি client reference পাওয়া যায়, তার property নয়। Next.js-এর ডকুমেন্টেশন বলে এক্ষেত্রে “Element type is invalid” error আসে; সমাধান হলো named export ব্যবহার করা।

৬ · RSC payload: নেটওয়ার্ক ট্যাবে আসল flight data

Server Component-এর ফল ব্রাউজারে কী রূপে যায়? HTML হিসেবে, আবার একটি বিশেষ লেখা হিসেবেও। সেই লেখাটির নাম React Server Component Payload, সংক্ষেপে RSC payload; React-এর ভেতরের ভাষায় একে “Flight” বলা হয়। Next.js ডকুমেন্টেশন অনুযায়ী এতে থাকে: Server Component-এর render করা ফল, Client Component কোথায় বসবে তার জায়গা আর তাদের JS ফাইলের ঠিকানা, আর server থেকে client-কে দেওয়া props.

Chrome বা Edge-এর DevTools-এ Network ট্যাব খুলে হোম পাতা থেকে পণ্যের লিংকে ক্লিক করুন। ?_rsc=… লেখা একটি অনুরোধ দেখবেন, যার উত্তরের ধরন text/x-component. একই জিনিস আমরা curl দিয়ে আনলাম, RSC: 1 header দিয়ে, যেভাবে router নিজে চায়। (বর্ণনা: DevTools-এর ট্যাবের নাম version অনুযায়ী বদলাতে পারে; নিচের উত্তরটি সত্যিকারের run থেকে।)

~/bazarghar$ curl -i -H 'RSC: 1' 'http://127.0.0.1:3852/products/jamdani?_rsc'
HTTP/1.1 200 OK
Vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, Accept-Encoding
Content-Type: text/x-component

1:"$Sreact.fragment"
2:"/_next/static/chunks/2re141h9bmujs.js"
3:I[36862,["$2"],"CartProvider"]
4:I[88103,["$2"],"default"]
…
15:"/_next/static/chunks/15jiyzyv9k8_z.js"
16:I[74471,["$2","$15"],"default"]
17:I[37958,["$2","$15"],"default"]
…
b:["$","main",null,{"children":[["$","h1",null,{"children":"জামদানি শাড়ি"}],
  ["$","$L16",null,{"images":["/a.jpg","/b.jpg","/c.jpg"],
     "children":["$","p",null,{"children":["দাম: ৳","৪,৫০০"]}]}],
  ["$","$L17",null,{"product":{"slug":"jamdani","name":"জামদানি শাড়ি","price":4500}}],
  ["$","ul",null,{"children":[["$","li","রুমানা",{"children":[["$","b",null,{"children":"রুমানা"}],
     ["$","div",null,{"dangerouslySetInnerHTML":{"__html":"<p><strong>খুব সুন্দর</strong> কাজ, রং <em>একদম</em> ছবির মতো।</p>\n"}}]]}],
  …]}]]}]

প্রথম দেখায় জট লাগে, কিন্তু ভাগ করে পড়লে সহজ। প্রতিটি লাইন id:মান আকারে, আর একটি লাইন আরেকটিকে $ দিয়ে উল্লেখ করে। চিহ্নগুলোর এই ব্যাখ্যা আমাদের পর্যবেক্ষণ থেকে; এটি React-এর ভেতরের, অঘোষিত format, version-এ বদলাতে পারে।

সবচেয়ে গুরুত্বপূর্ণ পর্যবেক্ষণ: Reviews নামটি payload-এ কোথাও নেই। আছে শুধু তার ফল, ul, li আর তৈরি HTML. অর্থাৎ marked, sanitize-html বা review render-এর কোনো কোড ব্রাউজার পায়নি। অন্যদিকে Gallery আর AddToCart এসেছে ঠিকানা ($L16, $L17) আর props হিসেবে। দামের <p> বসেছে Gallery-র props-এর children ঘরে, ঠিক অংশ ৫-এর মতো।

প্রথমবার পাতা খুললে আলাদা অনুরোধ হয় না; payload HTML-এর ভেতরেই <script>self.__next_f.push(…)</script> আকারে আসে। আমাদের পাতার পুরো HTML ছিল ৭,৭৬২ byte; আলাদা করে আনা payload ৪,৭৮৮ byte. পরে লিংকে ক্লিক করে অন্য পাতায় গেলে router শুধু payload আনে (?_rsc), HTML নয়। নিচের ধাপগুলোতে প্রথম অনুরোধের পুরো যাত্রা দেখুন।

GET /products/jamdani HTTP/1.1
Host: 127.0.0.1:3852

ProductPage render jamdani
// Reviews: marked.parse → sanitizeHtml, সার্ভারেই

16:I[74471,["$2","$15"],"default"]
b:["$","main",null,{"children":[
  ["$","h1",null,{"children":"জামদানি শাড়ি"}],
  ["$","$L16",null,{"images":[…],"children":…}],
  ["$","$L17",null,{"product":{…}}], …

<main><h1>জামদানি শাড়ি</h1><section><img src="/a.jpg" …/>
<button>1</button>…<p>দাম: ৳<!-- -->৪,৫০০</p></section>
<button>ঝুড়িতে যোগ করুন</button><ul>…

<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n…"])</script>
// ৮টি script ফাইল নামছে; পাতার নিজস্ব chunk 692 byte

AddToCart render jamdani
// ProductPage-এর লাইন এখানে কখনো আসে না

৭ · Bundle-এর হিসাব: markdown library server-এ বনাম client-এ

অংশ ৩-এর stepper-এর সংখ্যাগুলো কোথা থেকে এল, এবার খোলাখুলি দেখাই। “বাজারঘর”-এ ক্রেতার review markdown-এ লেখা। দেখানোর আগে দুটি কাজ: marked (লেখার সময়ে 18.1.2) দিয়ে markdown থেকে HTML, তারপর sanitize-html (2.18.1) দিয়ে বিপজ্জনক tag বাদ দেওয়া। দ্বিতীয় ধাপটি বাদ দেওয়া যাবে না: আমাদের পরীক্ষার একটি review-তে ইচ্ছা করে <img src=x onerror=alert(1)> রাখা ছিল, আর sanitize করার পর HTML-এ সেটি পুরোপুরি বাদ গেছে। dangerouslySetInnerHTML-এ অপরিষ্কার HTML দেওয়া মানে XSS-এর দরজা খোলা (পর্ব ৫০, Cybersecurity কোর্স)।

import { marked } from 'marked';
import sanitizeHtml from 'sanitize-html';

export default function Reviews({ reviews }) {
  return (
    <ul>
      {reviews.map((r) => (
        <li key={r.by}>
          <b>{r.by}</b>
          <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(marked.parse(r.md)) }} />
        </li>
      ))}
    </ul>
  );
}

আমরা একই অ্যাপ দুবার next build করলাম। প্রথমবার reviews.js যেমন আছে (server), দ্বিতীয়বার শুধু প্রথম লাইনে 'use client'; যোগ করে। প্রতিবার next start চালিয়ে পাতার HTML-এ যত <script src> আছে, সব নামিয়ে byte গুনলাম, আর তুলনার জন্য নিজেরা gzip (level 9) করে মাপলাম। সার্ভার আসলে কতটা compress করে পাঠায়, সেটি সেটআপ অনুযায়ী আলাদা।

~/bazarghar$ npx next build
▲ Next.js 16.4.4 (Turbopack)
✓ Compiled successfully in 324ms
✓ Generating static pages using 5 workers (3/3) in 390ms

Route (app)
┌ ○ /
├ ○ /_not-found
└ ƒ /products/[slug]

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

# নিজের মাপার script-এর ফল, দুই build
server { scripts: 8, rawKB: '557.5', gzipKB: '171.0', markedShipped: false }
client { scripts: 8, rawKB: '781.7', gzipKB: '247.8', markedShipped: true }
# পাতার নিজস্ব chunk
server: 15jiyzyv9k8_z.js      692 byte
client: 1_tzqrjh77t11.js  230,210 byte (gzip 79,126)

লক্ষ করুন, Next.js 16-এর build টেবিলে আগের মতো প্রতিটি route-এর “First Load JS” আকার দেখায় না; তাই আমরা নিজে মেপেছি। ƒ চিহ্ন মানে পাতাটি প্রতি অনুরোধে সার্ভারে render হয়, কারণ [slug] আগে থেকে জানা নেই। এই চিহ্নগুলোর বিস্তারিত পর্ব ৫৫-এ।

হিসাব করে দেখি

পরীক্ষায় এমন প্রশ্ন আসতে পারে: “একটি library client-এ গেলে ক্রেতার কত সময় আর ডেটা খরচ হয়?” ধাপে ধাপে করি। সব ধরে নেওয়া মান স্পষ্ট লেখা।

1. বাড়তি byte (gzip): ২৪৭.৮ − ১৭১.০ = ৭৬.৮ KB = ৭৬.৮ × ১০২৪ ≈ ৭৮,৬৪৩ byte.
2. ধীর সংযোগ ধরে নিই ১ Mbps = ১০,০০,০০০ bit/s = ১,২৫,০০০ byte/s. নামাতে বাড়তি সময় = ৭৮,৬৪৩ ÷ ১,২৫,০০০ ≈ ০.৬৩ সেকেন্ড. এটি শুধু নামানো; এরপর ২২৪.২ KB (raw) JavaScript পড়া, compile আর চালানোর খরচ main thread-এ যোগ হয়, যা ধীর ফোনে আরও বেশি।
3. দিনে ধরে নেওয়া ১০,০০০ জন নতুন দর্শক (cache ছাড়া): ৭৬.৮ KB × ১০,০০০ = ৭,৬৮,০০০ KB ÷ ১০২৪ = ৭৫০ MB বাড়তি ডেটা, প্রতিদিন। বাংলাদেশে অনেক ক্রেতা মোবাইল ডেটার প্যাকেজে চলেন; সেই খরচ তাঁদের পকেট থেকে যায়।
4. বিনিময়ে কী পেলাম? কিছুই না। Review-এর লেখা প্রতিটি ক্রেতার জন্য একই, ক্লিকে বদলায় না। Server-এ একবার HTML বানালেই হয়।

উল্টো দিকটিও সৎভাবে দেখা দরকার। Server version-এ payload-এ markdown-এর বদলে তৈরি HTML যায়, যা সাধারণত markdown-এর চেয়ে কিছুটা লম্বা (**খুব সুন্দর** বনাম <strong>খুব সুন্দর</strong>). দুটি review-তে এই পার্থক্য কয়েক ডজন byte; ২২৪ KB-এর সামনে নগণ্য। তবে ১,০০০টি review একসাথে দেখালে payload বড় হবে; তখন pagination (পর্ব ৩৪) লাগবে, server বা client যেটাই হোক।

৮ · গোপন জিনিস পাহারা: server-only, client-only আর env

অংশ ৩-এর মডেলে দেখেছেন, ভুল "use client" হলে db.js-ও ব্রাউজারে যেতে পারে। Next.js-এর ডকুমেন্টেশন একে “environment poisoning” বলে। একটি ফাইল server আর client দুই দিক থেকেই import করা যায়, তাই কেউ ভুল করে গোপন ফাইলকে client-এ টেনে নিতে পারে। আমরা এটি সত্যিই ঘটিয়ে দেখলাম।

পরীক্ষাটি এমন: db.js থেকে import 'server-only' লাইনটি সরালাম, আর add-to-cart.js-এ (client) getProduct import করলাম, যেমনটি AI প্রায়ই প্রস্তাব করে (“বোতাম চাপলে stock নতুন করে দেখে নিই”)। তারপর build.

~/bazarghar$ npx next build
✓ Compiled successfully
# build সফল! এবার client chunk-এ secret খুঁজি
~/bazarghar$ grep -o ".\{60\}example-secret.\{10\}" .next/static/chunks/*.js
.next/static/chunks/1tyviqd11gk-i.js:(43476),i=t.i(36862);(t.i(47167)).default.env.DB_PASSWORD??"example-secret";t.s(["default",0,function({product:t})

Build কোনো আপত্তি করেনি, আর example-secret লেখাটি ব্রাউজারের ফাইলে পৌঁছে গেছে। যে কেউ DevTools-এর Sources ট্যাবে এটি পড়তে পারত। লক্ষ করুন, process.env.DB_PASSWORD-এর আসল মান যায়নি; Next.js শুধু NEXT_PUBLIC_ দিয়ে শুরু হওয়া environment variable client bundle-এ বসায়, বাকিগুলো ব্রাউজারে খালি থাকে। কিন্তু কোডে লেখা fallback মান বা hard-coded key সরাসরি চলে যায়। আর NEXT_PUBLIC_ দিয়ে কোনো secret রাখলে সেটি ইচ্ছা করেই সবার কাছে পাঠানো হয়।

এবার db.js-এর প্রথম লাইনে import 'server-only'; ফিরিয়ে আনলাম। server-only একটি ছোট চিহ্ন-package (লেখার সময়ে 0.0.1); Next.js-এ এটি install করা ঐচ্ছিক, কারণ Next.js নিজেই এই import চেনে আর পরিষ্কার error দেয়।

import 'server-only';                     // এই ফাইল client-এ ঢুকলে build থামবে

const DB_PASSWORD = process.env.DB_PASSWORD ?? 'example-secret';

const products = [
  { slug: 'jamdani', name: 'জামদানি শাড়ি', price: 4500, stock: 3,
    images: ['/a.jpg', '/b.jpg', '/c.jpg'],
    reviews: [ /* ক্রেতার লেখা markdown */ ] },
];

export async function getProduct(slug) {
  if (!DB_PASSWORD) throw new Error('no db');   // আসল অ্যাপে এখানে Prisma query
  return products.find((p) => p.slug === slug) ?? null;
}

~/bazarghar$ npx next build
▲ Next.js 16.4.4 (Turbopack)
  Creating an optimized production build ...

> Build error occurred
Error: Turbopack build failed with 2 errors:
./lib/db.js:1:1
Error: You're importing a module that depends on "server-only". This API is only available in Server Components in the App Router, but you are using it in the Pages Router.
…
./lib/db.js:1:1
Error: 'server-only' cannot be imported from a Client Component module
> 1 | import 'server-only';
    | ^^^^^^^^^^^^^^^^^^^^^
It should only be used from a Server Component.

Import traces:
  Server Component:
    ./lib/db.js
    ./app/products/[slug]/page.js

  Client Component Browser:
    ./lib/db.js [Client Component Browser]
    ./app/ui/add-to-cart.js [Client Component Browser]
    ./app/ui/add-to-cart.js [Server Component]
    ./app/products/[slug]/page.js [Server Component]

এবার build থেমেছে (exit code 1). দুটি জিনিস খেয়াল করুন। প্রথম বার্তাটি “Pages Router” বলছে, যদিও আমরা App Router-এ; এই version-এ এটি বিভ্রান্তিকর, আসল কথা দ্বিতীয় বার্তায়। আর “Import traces” অংশটি সোনার মতো দামি: কোন ফাইল কোন ফাইলকে import করে ভুলটি ঘটাল, পুরো পথ দেখায়। নিচের দিক থেকে পড়ুন: page.js (server) → add-to-cart.js (সীমানা) → db.js, যা এখন ব্রাউজারের দিকে।

1// lib/db.js2import 'server-only';      // ধাপ ৪-এ যোগ3const DB_PASSWORD = process.env.DB_PASSWORD ?? 'example-secret';4export async function getProduct(slug) { … }5// app/ui/add-to-cart.js6'use client';7import { getProduct } from '@/lib/db';

উল্টো দিকের পাহারাদার client-only. কোনো ফাইল যদি window বা localStorage-এর ওপর নির্ভর করে, তার মাথায় import 'client-only' দিলে কেউ সেটি Server Component থেকে import করলে build-এ error আসে। দুটিই চিহ্ন মাত্র; নিরাপত্তার একমাত্র ভরসা নয়। Secret সবসময় environment variable-এ রাখুন, কোডে নয় (পর্ব ৭৮), আর data-access ফাইলগুলো এক জায়গায় রেখে প্রতিটির মাথায় server-only দিন।

৯ · তৃতীয় পক্ষের component, context আর “বাজারঘর”-এর সিদ্ধান্ত

তৃতীয় পক্ষের component-এর জন্য wrapper

npm-এর অনেক React package এখনো "use client" ছাড়া লেখা, কারণ সেগুলো RSC-এর আগের। ধরুন ছবি বড় করার জন্য একটি package acme-zoom, যার ভেতরে useState আছে (পরীক্ষার জন্য আমরা নিজে এমন একটি ছোট package বানিয়েছি)। Server Component থেকে সরাসরি import করে চালালে:

ProductPage render jamdani
⨯ TypeError: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
 GET /products/jamdani 500 in 675ms

Package-এর ফাইলে আপনি হাত দিতে পারেন না। সমাধান একটি দুই লাইনের wrapper, যা নিজেই সীমানা হয়ে যায়। এরপর পাতা আবার 200 দিল।

'use client';
export { Zoom } from 'acme-zoom';

নিজের ফাইলে "use client" ভুলে গেলে বার্তা আরও আগে আসে, compile-এর সময়ে, আর ঠিক কোন import দোষী তা দেখায়:

⨯ ./app/ui/gallery.js:1:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
> 1 | import { useState } from 'react';
    |          ^^^^^^^^

Context provider সবসময় client

Server Component-এ React context চলে না। কিন্তু ঝুড়ির মতো জিনিস পুরো অ্যাপে ভাগ করতে context দরকার (পর্ব ১৭)। উপায়: একটি ছোট client provider বানান, যা শুধু children নেয়, আর সেটি server layout-এ বসান।

'use client';
import { createContext, useContext, useState } from 'react';

const CartContext = createContext(null);

export function CartProvider({ children }) {
  const [items, setItems] = useState([]);
  return <CartContext value={{ items, setItems }}>{children}</CartContext>;
}
export function useCart() {
  return useContext(CartContext);
}

import { CartProvider } from './cart-provider';
import CartBadge from './ui/cart-badge';

export const metadata = { title: 'বাজারঘর' };

export default function RootLayout({ children }) {
  return (
    <html lang="bn">
      <body>
        <CartProvider>
          <header><b>বাজারঘর</b> <CartBadge /></header>
          {children}
        </CartProvider>
      </body>
    </html>
  );
}

Layout এখনো Server Component. CartProvider client, কিন্তু সে বাকি পাতা children হিসেবে পায়, import করে না। তাই provider-এর নিচে থাকা ProductPage বা Reviews server-ই থাকে। React 19-এ provider লেখা হয় <CartContext value={…}> দিয়ে; পুরোনো কোডে CartContext.Provider দেখবেন, সেটিও এখনো চলে। Next.js-এর পরামর্শ: provider যত গভীরে সম্ভব বসান, পুরো <html> মুড়ে নয়।

সাধারণ ভুলগুলো

“বাজারঘর”-এর পণ্য পাতা: কোন অংশ কোথায়

প্রতিটি অংশের জন্য একটি প্রশ্ন করুন: এই অংশ কি ক্রেতার কাজে সঙ্গে সঙ্গে বদলায়, বা ব্রাউজারের কিছু চায়? হ্যাঁ হলে client, না হলে server. তারপর client অংশকে যত ছোট সম্ভব করুন।

একটি সূক্ষ্ম কথা: সব interactivity-র জন্য Client Component লাগে না। <details> নিজেই খোলে-বন্ধ হয়, <form> Server Function দিয়ে জমা দেওয়া যায়, <video controls> নিজেই চলে। ব্রাউজার যা নিজে পারে, তার জন্য JavaScript পাঠানোর দরকার নেই।

১০ · AI-এর যুগে: সীমানার ভুল AI প্রায়ই করে

AI সহকারীরা Next.js-এর কোড দ্রুত লেখে, কিন্তু server-client সীমানায় তাদের ভুল চোখে পড়ার মতো। কারণ ইন্টারনেটের বেশিরভাগ পুরোনো উদাহরণ Pages Router বা Next.js 13-14-এর। Next.js 16 নিজেও এটা মানে: আমাদের next dev চালাতেই project-এ একটি AGENTS.md ফাইল তৈরি হলো, যার প্রথম কথা “This is NOT the Next.js you know”, অর্থাৎ AI-কে আগে node_modules/next/dist/docs/-এর docs পড়তে বলা হয়েছে।

AI-এর লেখা Next.js কোড পেলে: যাচাইয়ের চেকলিস্ট

• প্রতিটি "use client" খুঁজে (grep -rn "use client" app) দেখেছি, সেটি সত্যিই প্রবেশপথ কি না আর কী কী import টেনে আনছে
• Database, env বা secret-ওয়ালা প্রতিটি ফাইলে import 'server-only' আছে, আর next build সফল
• Build-এর পর .next/static-এ নিজের secret-এর নাম বা অংশ খুঁজে দেখেছি; কিছু পাইনি
• নেটওয়ার্ক ট্যাবে ?_rsc উত্তর খুলে দেখেছি, client-কে দেওয়া props-এ বাড়তি বা গোপন ঘর নেই
• API-গুলো (যেমন async params) আমার version-এর nextjs.org docs-এর সাথে মিলিয়েছি, AI-এর কথায় নয়
• নতুন package যোগ হলে npm view দিয়ে সেটি আসলেই আছে কি না, আর client-এ গেলে আকার কত, দেখেছি