"use client" component preference না।

Boundary declaration।

ওই boundary দিয়ে imported code browser graph-এর অংশ হতে পারে। Props user দেখতে পারে। Server-only capability অন্য পাশে থাকবে।

Line file size থেকে না, responsibility থেকে আঁকি।

Default server

App Router-এ Server Component দিয়ে শুরু করি, যদি component:

• server data পড়ে;
• secret/private SDK ব্যবহার করে;
• authorization check করে;
• public content render করে;
• component compose করে;
• browser event/state দরকার না।

Client fetch ছাড়াই meaningful content আসে, browser JavaScript কমে।

তারপর interaction যেখানে বাধ্য করে, client boundary।

Event move করুন, page না

Pricing page-এ monthly/annual toggle দরকার।

Page copy, plan, FAQ আর link-এর client state দরকার নেই।

Toggle আর price presentation-এর দরকার।

export default async function PricingPage() {
  const plans = await getPublicPlans();

  return (
    <>
      <PricingIntro />
      <BillingToggle plans={plans} />
      <PricingFaq />
    </>
  );
}

BillingToggle client island।

Page না।

Server-only import server-এ

Database client, filesystem, private env, admin SDK আর secret-bearing provider code server-only module-এ।

“কেউ client থেকে import করবে না”—এর উপর ভরসা না।

Boundary explicit, dependency direction clean।

Client protected server entry point call করতে পারে।

Provider implementation import করবে না।

Props public DTO

Prop পাঠানোর আগে প্রশ্ন:

User browser tool খুললে value দেখলে সমস্যা আছে?

থাকলে boundary পার করবেন না।

DTO shape করুন:

type PublicInvoice = {
  number: string;
  status: "draft" | "sent" | "paid";
  total: string;
};

Component তিন field ব্যবহার করে বলে full database record পাঠাবেন না।

Future UI change fourth field expose করতে পারে।

Mutation public server entry point

Route Handler আর Server Action-ও hostile input পায়।

Mutation-এর ভেতর:

• input validate;
• identity verify;
• resource authorize;
• business rule;
• idempotency;
• controlled result;
• affected representation invalidate।

Hidden button authorization না।

Typed argument validation না।

Accidental waterfall এড়ান

Server Component-ও sequential fetch করতে পারে।

Independent হলে:

const [account, projects] = await Promise.all([
  getAccount(),
  getProjects(),
]);

Dependent হলে dependency visible রাখুন।

Blind parallel না। Independent work parallel।

Provider state global client context-এ না

Large client provider broad tree hydrate করতে পারে।

Context interaction-এর কাছে:

• modal provider modal-এর কাছে;
• form state form-এর ভেতর;
• table selection table-এ;
• server data server composition-এ;
• shareable state URL-এ।

Global client state earn করতে হবে।

Loading/error ownership boundary follow করে

Server route সামলায়:

• data loading;
• not-found;
• protected access;
• server dependency failure।

Client island:

• pending interaction;
• optimistic state;
• browser validation;
• নিজের action retry;
• focus আর announcement।

User বুঝবে কোন অংশ wait করছে, next action কী।

Review question

1. Browser API/event সত্যি দরকার?
2. Client boundary interaction-এর মতো ছোট?
3. Props inspect করা safe?
4. Mutation trust re-check?
5. Independent request parallel?
6. State narrowest owner-এ?
7. Loading/error ownership match?

Client Component count-এর চেয়ে এই review useful।

Result

ভালো split user দেখতে পায় না।

Useful content-সহ page আসে।

Interaction immediate।

Secret server-এ।

Code বলে truth কোথায়।

Mental model-এর জন্য পড়ুন React Server Components: আসল বিষয় boundary। API-এর জন্য growth সহ্য করা contract।

Next.js app এক large client tree হলে highest client boundary আর কারণ পাঠান।