React Server Components (RSC) சேவையகத்தில் மட்டுமே செயல்படுத்தப்படுகின்றன — அவற்றின் JavaScript ஒருபோதும் உலாவிக்கு அனுப்பப்படாது. App Router-இல், ஒவ்வொரு கூறும் முன்னிருப்பாக Server Component ஆகும்; நீங்கள் வெளிப்படையாக கிளையன்ட் நடத்தைக்கு தேர்ந்தெடுக்கிறீர்கள்.
db ;
() {
users = db..();
(
);
}
Server Components async ஆக இருக்கலாம், await தரவை நேரடியாகப் பெறலாம், மற்றும் சேவையகம்-மட்டும் வளங்கள் (தரவுத்தளம், கோப்பு முறைமை, நிறுவனரகசியங்கள்) அணுக முடியும் — ஏனெனில் அவை சேவையகத்தில் চলுகின்றன. தரவு பெற API அடுக்கு தேவையில்லை, மற்றும் நிறுவனரகசியங்கள் கிளையன்டிற்கு ஒருபோதும் வரவில்லை.
உலாவி வழங்கப்பட்ட HTML/UI பெறுகிறது, கூறு இணைய அல்லது அதன் சார்புகள் அல்ல. ஒரு பெரிய markdown அல்லது date நூலகத்தைப் பயன்படுத்தும் Server Component அந்த நூலகத்தின் எதையுமே உலாவிக்கு அனுப்பாது — தொகுப்பு அளவைக் கணிசமாகக் குறைக்கிறது.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
மேல் ஆதரவு, நிலை, விளைவுகள் அல்லது உலாவி API கள் — இவை Client Component தேவைப்படுகின்றன.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
வடிவம்: Server Components தரவு/கட்டமைப்பு கையாளுகிறது; Client Components மட்டும் மேல் ஆதரவு தேவைப்படும் இடங்களில் உட்பொதிக்கிறது ("தீவுகள்").
Server Components App Router-இன் வரையறுக்கும் அம்சம்.
அவை கிளையன்ட் தொகுப்பு அளவைக் குறைக்கின்றன (குறைவான JS பதிவிறக்கம்/பாகுபடுத்த), நேரடி, பாதுகாப்பான சேவையக-பக்க தரவு அணுகலை API இல்லாமல் அனுமதிக்கிறது, மற்றும் செயல்திறன் மற்றும் SEO ஐ மேம்படுத்துகிறது.
அவை முன்னிருப்பாக இருக்கின்றன என்பதை அறிந்தாலும் — மற்றும் ஒரு கூறு Client Component ஆக வேண்டியதை கட்டாயப்படுத்தும் — App Router பயன்பாடுகளை திறமையாக கட்டமைக்க அடிப்படையாகும்.