React Server Components என்றால் என்ன மற்றும் அவை client components இலிருந்து எவ்வாறு வேறுபடுகின்றன?

Server Components (RSC) சேவையகத்தில் வழங்கப்பட்டு, ஒரு தொடர்பு நிறுத்தப்பட்ட முடிவை உலாவியுக்கு அனுப்பும். அவை தங்களுக்கு பூஜ்ய JavaScript அனுப்பும் — தரவு/markup மட்டுமே, அவற்றின் குறியீடு அல்ல.

இரண்டு வகைகள்

// Server Component (default in the Next.js App Router):
async function ProductPage({ id }) {
  const product = await db.products.find(id); // fetch DIRECTLY on the server
  return <ProductView product={product} />;    // no client JS for this component
}

// Client Component — opt in for interactivity:
"use client";
function AddToCart() {
  const [qty, setQty] = useState(1); // hooks/events need the client
  return <button onClick={() => addItem(qty)}>Add</button>;
}

திறன்கள் மற்றும் கட்டுப்பாடுகள்

ஏன் முக்கியம்

• குறைந்த client JavaScript → வேகமான சுமை மற்றும் ஊட்டப்பாடு.
• தரவு உள்ளீடு மூலத்திற்கு அருகில் (உலாவியிலிருந்து API round-trip இல்லை, DB credentials வெளிப்பாடு இல்லை).
• நீங்கள் அவற்றை உருவாக்குகிறீர்கள: server components interactive "islands" க்கான client components ஐ வழங்கும். ஒரு server component ஒரு client ஐ வழங்கலாம், ஆனால் அல்ல மாறாக.

சரிபார்ப்பு

சேவையக→client எல்லையுடன் செல்லும் Props தொடர்பு நிறுத்தப்பட்ட - நீங்கள் செயல்பாடுகள் அல்லது வகுப்பு நிகழ்வுகளை அனுப்ப முடியாது. RSC மানসிক மாதிரியை "எல்லாம் உலாவியில் இயங்குகிறது" என்றிலிருந்து "சேவையகத்தில் தவறாமல் வழங்குங்கள், தொடர்பு நிகழ்ச்சிகளுக்கு மட்டும் client ஐ தேர்வு செய்யுங்கள்" என்று மாற்றுகிறது.