React Server Components (RSC) შედიან რენდერში მხოლოდ სერვერზე — მათი JavaScript არასოდეს იგზავნება ბრაუზერში. App Router-ში, თითოეული კომპონენტი არის Server Component ნაგულისხმევად; თქვენ აშკარად უნდა აირჩიოთ კლიენტის ქცევა.
db ;
() {
users = db..();
(
);
}
Server Components შეიძლება იყოს async, პირდაპირ await მონაცემები და დაიკავშირდეთ მხოლოდ სერვერის რესურსებთან (მონაცემთა ბაზა, ფაილური სისტემა, საიდუმლოებები) — რადგან ისინი სერვერზე გაშვებულია. API ფენა არ არის საჭირო მონაცემების მოთხოვნის জন্য და საიდუმლოებები არასოდეს აღწევს კლიენტს.
ბრაუზერი იღებს რენდერირებული HTML/UI-ს, არა კომპონენტის კოდს ან მის დამოკიდებულებებს. Server Component, რომელიც იყენებს მძიმე markdown ან date ბიბლიოთეკას, არა აგზავნის ამ ბიბლიოთეკის რომელი ნაწილს ბრაუზერში — ხშირად ამცირებს bundle ზომას.
// ❌ 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
არ არის ინტერაქტიულობა, state, effects ან ბრაუზერის 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 მხოლოდ იქ, სადაც ინტერაქტიულობა საჭიროა ("islands").
Server Components არის App Router-ის განმსაზღვრელი მახასიათებელი.
ისინი მცირდებიან კლიენტის bundle ზომას (ნაკლები JS ჩამოსაწერი/ანალიზი), უშუამოდ, უსაფრთხო სერვერის მხრიდან მონაცემებთან კავშირი API-ის გარეშე და აუმჯობესებენ პროდუქტიულობას და SEO-ს.
მიხვდეთ, რომ ეს ნაგულისხმევი — და რა აიძულებს კომპონენტს Client Component იყოს — აუცილებელია App Router აპლიკაციების ეფექტიანი სტრუქტურირებისთვის.