TātadFunkcija RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering)TātadServeru serveru klientu atrašanās vietaTātadTātadTātadTātadTātadTātadTātadJā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā JāTātadInteraktivitāte Nē ✅ Pilna ✅ PilnaTātadPiekļuve servera resursiem ✅ Tiešā ✅ Ar getServerSideProps 🔸 Nepieciešams API zvanusTātadKad tas darbojas pēc pieprasījuma vai straumēts pēc pieprasījuma pēc ielādes pārlūkprogrammāTātadIdeāls lietošanas gadījums Statiski vai ar datiem saistīti skati Personalizēti vai dinamiski UI Interaktīvie plūsmas, vietējais UXTātad Funkcija RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering)TātadServeru serveru klientu atrašanās vietaTātadTātadJavaScript nosūtīts uz pārlūkprogrammuTātadTātad TātadJāTātadJāTātadTātadJā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā Jā JāTātadInteraktivitāte Nē ✅ Pilna ✅ PilnaTātadPiekļuve servera resursiem ✅ Tiešā ✅ Ar getServerSideProps 🔸 Nepieciešams API zvanusTātadKad tas darbojas pēc pieprasījuma vai straumēts pēc pieprasījuma pēc ielādes pārlūkprogrammāTātadIdeāls lietošanas gadījums Statiski vai ar datiem saistīti skati Personalizēti vai dinamiski UI Interaktīvie plūsmas, vietējais UXTātadFunkcija RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering)Funkcijas Tātad Tātad CSR (klientu puses rādīšana) Serveru serveru klientu atrašanās vietaRādīt atrašanās vietu Tātad Tātad Klients TātadJavaScript nosūtīts uz pārlūkprogrammuTātadTātad TātadJāTātadJāTātadJavaScript nosūtīts uz pārlūkprogrammu Tātad Tātad Tātad TātadNepieciešama hidroizolācijaTātad TātadJāTātadJāTātadNepieciešama hidroizolācija Tātad Jā Jā Jā Jā Interaktivitāte Nē ✅ Pilna ✅ PilnaTātad Tātad Tātad Tātad Piekļuve servera resursiem ✅ Tiešā ✅ Ar getServerSideProps 🔸 Nepieciešams API zvanusTātad Tātad Tātad Tātad Kad tas darbojas pēc pieprasījuma vai straumēts pēc pieprasījuma pēc ielādes pārlūkprogrammāKad tas iet Pēc pieprasījuma vai straumējot Pēc pieprasījuma Lejupielādēt Browser Ideāls lietošanas gadījums Statiski vai ar datiem saistīti skati Personalizēti vai dinamiski UI Interaktīvie plūsmas, vietējais UXIdeāls lietošanas gadījums Statiskie vai datu saistītie skati Personalizēts vai dinamisks UI Interaktīvie plūsmas, vietējā UX TātadTātadTātadTātadTātadTātad Funkcijas Servera sastāvdaļa Klienta sastāvdaļa IzmantojietTātadEfekts Tātad Tātad Tātadasync/await ✅ (vajadzētu iesaiņot efektos)Tātad Tātad TātadTātad Tātad Funkcijas Servera sastāvdaļa Klienta sastāvdaļa Servera sastāvdaļa Izmantojiet Tātad Tātad Lietošanas efektsTātadTātad TātadLietošanas efekts Tātad Tātad Tātad Async / Gaidīt TātadTātad Async / Gaidīt Tātad Tātad Tātad Tātad TātadTātad Tātad TātadSastāvdaļas Rendering Strategy Iemesls Produkta detaļas RSC Iegūta no DB, nav interaktivitātes, nav nepieciešams mitrināt PriceWithPersonalization SSR Atkarībā no lietotāja sesijas, dinamiska pēc pieprasījuma AddToCartButton CSR Prasa interaktivitāti un vietējo stāvokli Saistīti Produkti SSG (ar ISR) Drošs kešatmiņā izveides laikā, var atkārtot ik pēc 24 stundām vai pa tagiem StockStatusBanner RSC + straumēšana Bieži mainās, straumē ar Suspense, lai neaizliegtu TTFB Kompozīcija, kas sniedz stratēģijas iemesluTātad TātadRSC Iegūts no DB, nav interaktivitātes, nav nepieciešams mitrināt Tātad SSRTātadAtkarībā no lietotāja sesijas, dinamiska pēc pieprasījuma AddToCartButton CSR Prasa interaktivitāti un vietējo stāvokliTātad Tātad TātadSSG (ar ISR)TātadDrošs kešatmiņā uzbūves laikā, to var atjaunot ik pēc 24 stundām vai pa tagamTātad Akciju sabiedrība BannerTātadRSC + straumēšana Bieži mainās, straumē ar suspensiju, lai netraucētu TTFBTātad Kompozīcija, kas sniedz stratēģijas iemeslu TātadRSC Iegūts no DB, nav interaktivitātes, nav nepieciešams mitrināt Tātad RSC Iegūts no DB, nav interaktivitātes, nav nepieciešams mitrināt SSRTātadAtkarībā no lietotāja sesijas, dinamiska pēc pieprasījuma Tātad Atkarībā no lietotāja sesijas, dinamiska pēc pieprasījuma TātadTātad TātadCSRTātadPrasa interaktivitāti un vietējo valstiTātadTātad Prasa interaktivitāti un vietējo valsti TātadTātad TātadSSG (ar ISR)TātadDrošs kešatmiņā uzbūves laikā, to var atjaunot ik pēc 24 stundām vai pa tagamTātadTātad Tātad Drošs kešatmiņā uzbūves laikā, to var atjaunot ik pēc 24 stundām vai pa tagam Akciju sabiedrība BannerTātadRSC + straumēšana Bieži mainās, straumē ar suspensiju, lai netraucētu TTFBTātadAkciju sabiedrība Banner Tātad Bieži mainās, straumē ar suspensiju, lai netraucētu TTFB (*Ja vēlaties pāriet uz priekšu un ienirt tieši tehniskajā neskaidrībā, pāriet uz 1. jautājumu, kāpēc tika ieviesti React Server komponenti.) 2010. gadu sākumā React revolucionizēja frontend izstrādi ar deklaratīvo komponentu modeli un efektīvu virtuālo DOM difingu. Kas sākās kā vienkārša skata bibliotēka drīz kļuva par liela mēroga vienas lapas lietojumprogrammu (SPA) mugurkaulu. Šīs SPAs galvenokārt izmantoja Client-Side Rendering (CSR), kas nozīmē, ka pārlūkprogramma lejupielādētu JavaScript bundli, to izpildītu un uzbūvētu UI pilnībā uz klienta. This client-centric model was flexible and highly interactive, and it defined “modern” web apps for years. However, as applications grew more complex and feature-rich, the CSR approach started to show its cracks: Tātad Tātad Tātad Tātad Tātad Ilgāks laiks interaktīvam (TTI): smagi JavaScript bundles un klientu puses darbs nozīmēja, ka lietotāji gaidīja ilgāk, pirms viņi faktiski varēja mijiedarboties ar lapu. Hidratācijas sastrēgumi: servera rādītāja HTML konvertēšana interaktīvā lietojumprogrammā (hidratācija) kļuva par veiktspējas sastrēguma punktu, jo īpaši, jo palielinājās dinamiskā satura apjoms. Pārpludinātie bundži: Lietojumprogrammas bieži piegādāja daudz vairāk JavaScript nekā nepieciešams, apgrūtinot pārlūkprogrammas ar kodu funkcijām vai saturu, kas varētu būt piegādāts efektīvāk. Nepārspējama veiktspēja: jo lielāka un sarežģītāka ir lietotne, jo grūtāk ir uzturēt ātru veiktspēju visās ierīcēs un tīkla apstākļos. Next.js parādījās, lai risinātu dažas no šīm sāpēm, ieviešot Server-Side Rendering (SSR), Static Site Generation (SSG) un citas optimizācijas.Šīs metodes uzlaboja sākotnējo ielādes laiku un atlaida daļu no UI renderēšanas darba uz serveri. Ar Next.js 15, kas darbojas uz React 19, jauna renderēšanas paradigma ir uzņēmies centru: RSC ļauj izstrādātājiem nevainojami apvienot servera rādītās un klienta rādītās sastāvdaļas vienā React kokā.Ietekmes ir nozīmīgas. Citiem vārdiem sakot, šīm sadaļām nav nepieciešama klienta puses hidratācija.Datu iegūšanas loģika ir vienkāršota arī, darbojoties servera sastāvdaļās, novēršot daudzus nevajadzīgus API zvanus no pārlūkprogrammas. React Server Components (RSC) zero JavaScript overhead Šis raksts nav RSC virsmas līmeņa pārskats.Kad es nolēmu 2025. gadā rakstīt par Next.js efektīvu izmantošanu, ātri kļuva skaidrs, ka React Server Components ir pelnījuši īpašu dziļu niršanu. By the end, I hope you come away with the same clarity and appreciation for RSC that I did through the process of researching and writing this piece. Intro: From CSR to RSC — How Rendering Evolved in React Ievads: no korporatīvās atbildības līdz RSC — kā rādīšana attīstījās reaģējot Pēdējā desmitgadē, veids, kā mēs veidojam React lietojumprogrammas, ir būtiski attīstījies, un ar to, kā mēs domājam par renderēšanu. Īsa klientu puses rādīšanas (CSR) vēsture React React gained its popularity through - modelis, kurā pārlūkprogramma lejupielādē JavaScript, to izpilda un izveido visu lietotāja interfeisu uz klienta.Šī pieeja deva izstrādātājiem pilnīgu kontroli pār interaktivitāti un stāvokli, un padarīja to viegli izveidot dinamiskas vienas lapas lietojumprogrammas (SPA). Client-Side Rendering (CSR) Tomēr CSR nāca ar ievērojamiem kompromisiem: Tātad Tātad Tātad Tātad Tātad Lēnāka sākotnējā slodze, īpaši mobilajos vai sliktos tīklos Slikts SEO satura virzītām lapām JavaScript smagi bundži — pat lapām ar minimālu interaktivitāti Hidratācijas solis bija nepieciešams pēc HTML ielādēšanas, aizkavējot laiku interaktīvai darbībai Kādu laiku šie ierobežojumi bija tikai “kā lietas bija”. Kā Next.js ieviesa SSR un SSG React attīstībā Kad Tas ieviesa servera rādīšanu (SSR) un statisko vietņu ģenerāciju (SSG) kā pirmās klases pilsoņus React. Next.js Tātad Tātad Tātad Tātad SSR ļāva lapas ģenerēt pēc pieprasījuma, uzlabojot SEO un augšupielādes ātrumu dinamiskam saturam. SSG ļāva saturu sagatavot izvietošanas laikā, kas ir ideāli piemērots emuāriem, dokumentiem un mārketinga vietnēm. Incremental Static Regeneration (ISR) pārklāja plaisu, ļaujot statiskām lapām atjaunināt pēc izvietošanas. Šī elastība palīdzēja izstrādātājiem panākt labāku līdzsvaru starp veiktspēju, SEO un izstrādātāja pieredzi. Bet pat ar SSR un SSG joprojām bija paliekoša problēma: — pat komponentiem, kuriem nav jābūt interaktīviem. we were still sending too much JavaScript to the browser React Server komponentu (RSC) pieaugums 2025. gadā Ar atbrīvošanu no un Mēs ieiet jaunā laikmetā: are now a core part of how we build apps. Next.js 15 React 19 React Server Components (RSC) Atšķirībā no SSR, kas joprojām prasa hidratāciju un piegādā JavaScript klientam, Tātad RSC allows you to render components on the server — without sending any JavaScript to the browser at all Tā ir liela maiņa: Tātad Tātad Tātad Tātad Komponenti tagad var piekļūt servera puses datiem tieši Statiskam saturam nav nepieciešama hidratācija Jūs varat sajaukt servera un klienta komponentus vienā React kokā, sastādot savu rādīšanas stratēģiju pa komponentiem RSC neaizstāj SSR vai SSG, tas , atbloķējot smalkāku kontroli pār veiktspēju, bundžu lielumu un rādīšanas uzvedību. complements them 2025. gadā RSC ir pamatkoncepcija, kas katram React vecākajam inženierim ir jāapgūst. 1. Why React Server Components Were Introduced Kāpēc tika ieviesti React Server komponenti Tā kā React lietojumprogrammas kļuva sarežģītākas, nozare sāka sajust savu panākumu svaru.Tomēr klientu puses rādīšana (CSR), servera puses rādīšana (SSR) un statiskā vietnes ģenerācija (SSG) piedāvāja dažādas stratēģijas, lai izveidotu veiktspējīgas tīmekļa lietojumprogrammas, katra no tām veica kompromisu, kas kļuva acīmredzamāka mērogā. CSR, SSR un SSG ierobežojumi 1. no Hydration overhead Pat ar SSR vai SSG, kad HTML sasniedz pārlūkprogrammu, React ir nepieciešams "hidratēt" lapu - pievienot notikumu klausītājus, atsākt komponentus un efektīvi pārbūvēt lietotni atmiņā. 2 Dzīve JavaScript bundle bloat Ar CSR, katrs komponents, lietojumprogramma un API zvanu, kas ir daļa no lapas, ir jānosūta uz pārlūkprogrammu - neatkarīgi no tā, vai tas ir interaktīvs vai ne. SSR un SSG nedaudz samazina šo, bet lielākā daļa no bundles joprojām ir jāizpilda uz klienta. Trīs Disconnected data-fetching logic Pre-RSC pasaulē dati dzīvoja ārpus komponentiem, kas to rādīja. vai (vai zvanīt uz APIs Šī atdalīšana pievienoja kognitīvo pārsvaru un padarīja kodu grūtāk kopīgi izvietot un atkārtoti izmantot. getServerSideProps getStaticProps useEffect Kādas problēmas RSC tika izstrādāta, lai atrisinātu React Server Components (RSC) tika izveidoti, lai risinātu šos pieaugošos sāpju punktus ar vienkāršu, bet spēcīgu ideju: Tātad let components execute on the server by default, and only send JavaScript to the browser when it’s absolutely necessary Eliminate unnecessary JavaScript RSC ļauj komponentus rādīt servera pusē Ja komponentam nav nepieciešama interaktivitāte, nav nepieciešams mitrināt vai ielādēt tā JS paketi vispār. Bez Server-side data access within the component tree RSC novērš mākslīgo robežu starp datu iegūšanu un rādīšanu. lai tieši piekļūtu datu bāzēm, failu sistēmām vai API - datu koplietošana un loģikas apskatīšana dabiski, bez nepieciešamības izmantot API maršrutus vai prop urbšanu. async/await ✅ Improve rendering efficiency and developer experience Pārvietojot neinteraktīvo loģiku uz serveri, izstrādātāji var izveidot vieglākas lietotnes ar mazākiem iepakojumiem un labāku veiktspēju. RSC arī vienkāršo mentālo modeli - jūs vienkārši rakstāt komponentus un ļaujiet sistēmai pārvaldīt, kur tās darbojas un kā tās tiek piegādātas. RSC doesn’t aim to replace SSR or SSG, instead, it complements them. It lets you think , ne tikai lapas līmenī, par to, kas jāveic serverī un kas pieder pārlūkprogrammā. at the component level In short: React Server Components were designed to bring modern frontend development back to its lean, fast, and maintainable roots without compromising interactivity. 2. Rendering Strategies in Next.js 15: RSC vs SSR vs CSR Renderēšanas stratēģijas Next.js 15: RSC vs SSR vs CSR Next.js 15 piedāvā izstrādātājiem granulāru rādīšanas modeli, kas pārsniedz tradicionālās lapas līmeņa stratēģijas. kļūstot par pirmās klases koncepciju, ir svarīgi saprast, kā tās salīdzina ar diviem pazīstamiem modeļiem: un Tātad React Server Components (RSC) Server-Side Rendering (SSR) Client-Side Rendering (CSR) Lai gan SSG (Static Site Generation) joprojām ir vērtīgs konkrētos gadījumos, to var uzskatīt par Izveidots uz SSR. pretēji, pārstāv atšķirīgus izpildes laika rādīšanas ceļus, un to izpratne ir izšķiroša, lai 2025. gadā pieņemtu lēmumus par veiktspēju un arhitektūru. caching strategy RSC vs SSR vs CSR 💡 Pirms mēs salīdzinām: ko mēs domājam ar "interaktīvo komponentu"? React un Next.js kontekstā Jebkurš elements, kas Tātad interactive component requires client-side JavaScript to respond to user input or browser events Tas ietver (bet neaprobežojas tikai ar): Tātad Tātad Tātad Tātad Tātad Tātad Tātad pogas, kas atjaunina stāvokli uz klikšķa Veidlapas ar validāciju vai kontrolētiem ievadiem Dropdowns un modāli, kas pārslēdzas atvērts / slēgts Animācijas, kas izraisītas ar skrūvēšanu vai hover Tabs, karuseli, filtri, slaidi Sastāvdaļas, kas izmanto useState, useEffect vai useReducer Ja sastāvdaļa ir Iekšējā vai paļaujas uz Tam ir jāstrādā pie klienta. event handlers state DOM or browser APIs Interactivity = Browser-side behavior + JS event listeners + local state. Šīs atšķirības izpratne palīdz noskaidrot : lai izvairītos no JavaScript piegādes UI daļām, kurām nav jābūt interaktīvām. why RSC exists Rendering modeļi uz skatu JavaScript nosūtīts uz pārlūkprogrammu Tātad Neviens Jā Jā Neviens Feature RSC (reaktīvā servera sastāvdaļas) RSC (reaktīvā servera sastāvdaļas) SSR (serveru puses rādīšana) SSR (serveru puses rādīšana) CSR (klientu puses rādīšana) Rādīt atrašanās vietu Serveris Serveris Serveris Serveris Klients Neviens JavaScript nosūtīts uz pārlūkprogrammu Neviens Neviens Jā Jā Jā Jā ❌ No Nepieciešama hidroizolācija Nē Nē Jā Jā Interaktivitāte Interaktivitāte Nē Nē Pilnīgi Pilnīgi Pilnīgi Pilnīgi Piekļuve serveriem Piekļuve serveriem Tiešā Tiešā ✅ Caur getServerSideProps Šo ceļu getServerSideProps Vajadzīgi apgaismojumi Vajadzīgi apgaismojumi Kad tas iet Pēc pieprasījuma vai straumējot Pēc pieprasījuma Lejupielādēt Browser Ideāls lietošanas gadījums Statiskie vai datu saistītie skati Personalizēts vai dinamisks UI Interaktīvie plūsmas, vietējā UX Think in Components, Not Just Pages Iepriekšējās versijās Next.js, rādīšanas stratēģijas tika piemērotas Tu biji , Un, lai ko jūs izvēlētos, piemērots Tas bija jēga pasaulē, kur renderēšana notika viss vai nekas - vai nu statiski uzbūves laikā, vai dinamiski katrā pieprasījumā. page level getServerSideProps getStaticProps Visa lapa Bet ar un tās katalogs ir ieviests Next.js 13+ un standartizēts 15 Tas kļūst par a Tas noved pie jaunas domāšanas. React Server Components (RSC) app/ rendering is no longer a top-down, one-size-fits-all decision per-component concern Jauns domāšanas veids: deklaratīvs un kompozīts Šī maiņa ir vairāk nekā API maiņa, tā ir konceptuāla maiņa, kā jūs arhitektējat savu frontendu. Declarative Orķestra vietā un komponenti tiek rādīti manuāli, jūs tagad vienkārši — React un Next.js rūpējas par pārējo. Kā Kur declare what each component does and what it needs Jūs nevarat manuāli savienot API galamērķus vai nodot SSR uz komponentiem. // Server Component export default async function ProductInfo() { const product = await db.getProduct(slug) return <div>{product.name}</div> } Šī sastāvdaļa: Tātad Tātad Tātad Tātad Tātad Darbojas serverī JS netiek nosūtīts klientam Nepieciešams neviens getServerSideProps vai API slānis Ir “tikai sastāvdaļa” – nav nepieciešama papildu abstrakcija Jūs aprakstāt UI un tās datu vajadzības , un atskaņošanas dzinējs skaitās pārējo. declaratively Composable Dažādas jūsu UI daļas var izmantot dažādas rādīšanas stratēģijas — , , and Tātad on the same page at the same time with minimal overhead Piemēram: // Product page layout <ProductInfo /> // Server Component (no JS, rendered on the server) <AddToCartButton /> // Client Component (interactive) <SimilarProducts /> // Static Component (SSG with revalidation) Šīs sastāvdaļas dzīvo kopā tajā pašā kokā, bet katra no tām: Tātad Tātad Tātad Darbojas citā vidē (serveris, klients, būve) Izmanto tikai nepieciešamos datus un kodu Ships exactly what’s required to the browser — no more, no less To make this more concrete, I created a kas parāda, kā dažādas rādīšanas stratēģijas var līdzāspastāvēt vienā lapā. minimal demo 3. How React Server Components Work Under the Hood Kā React servera komponenti darbojas zem vāka React Server Components (RSC) ir vairāk nekā tikai jauna atskaņošanas stratēģija, tie fundamentāli maina to, kā sastāvdaļu koki tiek būvēti, atskaņoti un pārraidīti. un to, kā tas ietekmē valsts, interaktivitātes un datu robežas. how it works behind the scenes Serveru/klientu robeža: sadalīts reaģēšanas koks React lietojumprogrammas, kas izmanto RSC, vairs nav pilnībā attēlotas uz klienta. : no component tree is split into two worlds Tātad Tātad Tātad Serveru komponenti: Izpildiet tikai serverī. JavaScript nekad netiek nosūtīts uz pārlūkprogrammu. nevar saglabāt vietējo stāvokli vai pievienot notikumu klausītājus. Ideāli piemērots statiskā satura un servera saistītas loģikas (piemēram, DB piekļuves) rādīšanai. Klientu komponenti: tiem jābūt skaidri marķētiem ar "izmantojiet klientu". Tie ir apkopoti pārlūkprogrammai draudzīgā JavaScript un atbalsta pilnīgu interaktivitāti, vietējo stāvokli, lietošanas efektu un notikumu apstrādi. Build vai runtime laikā React izveido koku, kurā serveris un klientu komponenti pastāv kopā, un tos apvieno renderēšanas laikā. Kas Patiesībā tas "use client" Kad jūs pievienojat failu, tas atzīmē, ka viss modulis un tā eksports kā Aiz skatuves tas pavada Next.js būvēšanas cauruļvadu, lai: "use client" client-only Tātad Tātad Tātad Kompilējiet šo failu (un tās atkarības) atsevišķā JavaScript bundžā Exclude that component from being run on the server Izmantojiet to kā klasisku React CSR komponentu ar hidratācijas loģiku Šī direktīva darbojas kā Visas sastāvdaļas virs tā var atskaņot serveris; visas sastāvdaļas zem tā ir jāatskaņo pārlūkprogrammā. boundary marker Straumēšana: atskaņošana gabalos, ne visi uzreiz RSC aplauzums Tā vietā, lai gaidītu, kad tiks izveidots pilns React koks, pirms to nosūtīt uz pārlūkprogrammu, serveris Klientiem, kad tie ir gatavi. streaming streams serialized fragments Tātad Tātad Tātad Servera komponenti tiek rādīti un nosūtīti pēc iespējas ātrāk Vietnes turētāji (piemēram, izmantojot <Suspense>) uz laiku aizpilda Klientu komponenti pakāpeniski mitrina, tikai tad, kad tie ir uzlādēti Kā tas ir iespējams? RSC ievieš koncepciju, ko sauc par selektīvu hidratāciju.Kad klienta sastāvdaļa tiek rādīta servera sastāvdaļu kokā, React ievieto vietas turētāju (<div data-rsc-placeholder />) un novērš hidratāciju. Pēc tam, kad klients ir ielādējis atbilstošo JS bundļu: Tātad Tātad React lazily uzlādē šo konkrēto sastāvdaļu Atrod vietu turētāju un ieliek to dzīvajā kokā Hidratē to izolācijā, nerādot visu lapu Šis dizains ir : your app starts fast, and interactivity comes online gradually. decoupled and progressive <Suspense fallback={<LoadingDetails />}> <ProductDetails /> // Server Component </Suspense> <AddToCartButton /> // Client Component (hydrated later) ⚙️ Data Fetching and Code Splitting in RSC Vēl viens svarīgs RSC “maģija”: Tātad — without relying on , Vai arī manuālā pārsūtīšana. you can fetch data directly inside components with async/await getServerSideProps useEffect // Server Component export default async function Dashboard() { const stats = await getStatsForUser() return <StatsView data={stats} /> } Kāpēc tas ir iespējams? RSC komponenti darbojas kā reālas servera funkcijas, nevis kā klientu kompilēti moduļi Viņi var piekļūt datu bāzēm, iekšējiem API, failu sistēmām vai jebkam, kas atbalsta jūsu servera darbspēju Rezultāts tiek rādīts HTML (nevis JS) un straumēts uz klientu Tāpat arī: Tātad Tātad , since the result is static No hydration needed in the component itself — everything resolves before it hits the browser No loading UI logic Šīs sastāvdaļas kods netiek nosūtīts klientam, ja vien tas nav iestrēdzis klienta robežās. Tas ievērojami samazina katla plāksnes un paketes izmēru, vienlaikus saglabājot loģiku ar UI - ilgstošs React mērķis beidzot realizēts mērogā. 🚫 State, Hooks, and Lifecycle Considerations RSC traditional React hooks like , , or Jo viņi . does not support useState useEffect useRef don’t run in the browser Feature Server Component Klienta sastāvdaļa Izmantojiet Tātad Lietošanas efekts useContext ✅ (if static) Async / Gaidīt Tātad (vajadzētu iesaiņot efektos) Tātad Event handlers ✅ Izmanto kontekstu ✅ (if static) Notikumu rīkotāji Funkcijas Funkcijas Server Component Klienta sastāvdaļa Klienta sastāvdaļa Izmantojiet useState ❌ useEffect ❌ useContext ✅ (if static) Izmanto kontekstu useContext ✅ (if static) ✅ (if static) (vajadzētu iesaiņot efektos) async/await (vajadzētu iesaiņot efektos) (vajadzētu iesaiņot efektos) Notikumu rīkotāji Notikumu rīkotāji Event handlers ✅ Tas nodrošina skaidru atbildības sadalījumu: Tātad Serveru komponenti: dati un izkārtojums Klientu komponenti: interaktivitāte un vietējais stāvoklis React Server Components are designed to simplify your app. Once you internalize the boundary rules, the streaming model, and async data access, you can ar daudz mazāk boilerplate nekā agrāk. compose fast, personalized, and minimal-JS apps 4. What’s the Best Practice? Combining RSC, SSR, and SSG 4. What’s the Best Practice? Combining RSC, SSR, and SSG One of the most common questions React engineers face in Next.js 15 isn’t “should I use RSC?” — it’s “how do I combine RSC with SSR and SSG in a maintainable, high-performance way?” The beauty of Next.js 15 is that you’re no longer limited to one rendering strategy per page. Instead, you can now , piemērojot vispiemērotāko pieeju katrai UI daļai. compose rendering strategies at the component level Šajā sadaļā ir ieviesta praktiska sistēma, lai pieņemtu šo lēmumu, pamatojoties uz faktiskajām arhitektūras vajadzībām. Sāciet ar pamatjautājumu: kas ir vajadzīgs šim komponentam? Uzdodiet šos četrus jautājumus katram komponentam: Tātad Tātad Tātad Tātad Does it need to be interactive? ✅ Yes → Use a Client Component Does it need secure, request-specific, or real-time data? ✅ Yes → Consider SSR Vai to var iepriekš aprēķināt vai bieži atjaunināt? ✅ Jā → Labāk SSG Does it fetch server data but never need to run on the client? ✅ Yes → Use RSC Piemērs: produkta lapas stratēģijas sadalījums Here’s how a typical e-commerce prduct page might be composed using all three strategies: Produktu detaļas CenaPersonalizācija Saistītie produkti Component Component Rādīt stratēģiju Rādīt stratēģiju Reason Iemesls ProductDetails Produktu detaļas ProductDetails RSC Iegūts no DB, nav interaktivitātes, nav nepieciešams mitrināt CenaPersonalizācija CenaPersonalizācija PriceWithPersonalization SSR SSR Atkarībā no lietotāja sesijas, dinamiska pēc pieprasījuma AddToCartButton AddToCartButton AddToCartButton CSR CSR Prasa interaktivitāti un vietējo valsti Saistītie produkti Saistītie produkti RelatedProducts SSG (ar ISR) SSG (with ISR) Drošs kešatmiņā uzbūves laikā, to var atjaunot ik pēc 24 stundām vai pa tagam StockStatusBanner RSC + straumēšana RSC + streaming Frequently changing, streamed in with Suspense to not block TTFB Katra sastāvdaļa darbojas — no more, no less. No full-page hydration, no global data fetching, no unnecessary JavaScript. just what it needs to do Izstrādāt paraugpraksi stratēģiju apvienošanai Sākums > Serveri Ieslēdziet katru komponentu kā servera komponentu pēc noklusējuma. ) only when necessary. This keeps bundles smaller and simplifies testing. "use client" # 2 Saglabājiet robežas skaidras Use folder naming or filename suffixes to make boundaries explicit: /components /server/ProductDetails.tsx /client/AddToCartButton.tsx /shared/ReviewStars.tsx ✅ 3. pieņemt suspensiju progresīvai piegādei Use to stream in non-critical RSCs without blocking the whole page: <Suspense> <Suspense fallback={<LoadingReviews />}> <ReviewList /> </Suspense> ✅ 4. Co-locate logic with components Nelietojiet sadalīt datus un lietotāja interfeisu failos, ja vien tas nav nepieciešams. loģika tieši sastāvdaļu koka iekšpusē - rāmis rūpējas par pārējo. async ✅ 5. Use ISR (Incremental Static Regeneration) smartly Cache, augstas satiksmes lapām, piemēram, emuāru rakstiem vai mārketinga sadaļām, izmantojiet SSG + atkārtotu validāciju: export const revalidate = 3600 // regenerate every hour ⚠️ Common Mistakes to Avoid Tātad Tātad Izmantojot "izmantot klientu" pēc noklusējuma - jūs atkal nonāksit pie CSR 🔸 Datu atgūšana klientu sastāvdaļās, kad to varētu atgūt serveris Pārsūtot pārāk daudz datu starp RSC un klientu komponentiem, izmantojot props - tā vietā ļaujiet klientu komponentiem būt fokusētiem, izolētiem un stāvokļa ❌ logic inside RSC — no need, RSC server-side Recreating SSR-style getServerSideProps is Lēmumu kopsavilkums Šeit ir vienkāršots ceļvedis: Is it interactive? │ ├── Yes → Client Component (CSR) │ └── No │ ├── Needs per-request data? → SSR │ ├── Can be pre-rendered? → SSG │ └── Otherwise → RSC Jums nav nepieciešams to atcerēties.Kad esat internalizējis, kā rādīt kartes uz atbildību, . the decisions become intuitive Labākā prakse nav par "labākās rādīšanas stratēģijas" izvēli. Tas ir par — ar skaidrību, mērķi un sniegumu prātā. designing rendering as an intentional part of your component architecture 6. Looking Ahead: Why RSC Is More Than Just a Feature Skatīties uz priekšu: kāpēc RSC ir vairāk nekā tikai funkcija React Server sastāvdaļas nav tikai veiktspējas optimizācija vai DX uzlabošana. Līdzīgi kā React Hooks 2019. gadā, RSC 2025. gadā ir Tātad they represent a foundational shift in how we build React applications redefining the baseline for frontend architecture 🧠 RSC Changes the Mental Model of Building in React Tradicionālā React izstrāde vienmēr ir balstīta uz šo pieņēmumu: “The browser owns the runtime. We hydrate everything. Every piece of logic and data must live in the client, or be fetched via API.” RSC pārkāpj šo pieņēmumu. With RSC, you now ask: Tātad Tātad Vai es varu pilnībā izlaist hidratāciju? Vai šo komponentu var palaist tīri uz servera? Vai es varu izvietot backend loģiku ar savu UI? Tas dod mums atpakaļ , not with wrappers and workarounds, but with Tātad the ability to separate display logic and interactivity cleanly first-class architectural boundaries It’s no longer “client-first.” It’s “purpose-first.” Each part of your UI exists where it’s most efficient — server, client, or static. Ekosistēmas maiņa uz servera pirmo rādīšanu RSC nenotiek izolēti. plašāka frontend ekosistēma tiek pakļauta . server-first rendering renaissance Rāmji kā: Tātad Tātad Tātad Remix smagi piesaistās servera datu ielādēšanai un veidlapas darbībām. Astro pēc noklusējuma pieņem nulle-JS, piegādājot tikai interaktivitātes salas. Qwik veic hidratāciju līdz galējībām - atlikt visus JS, līdz tas ir skaidri nepieciešams. Next.js 15, ar RSC un App Router, tagad liek komponentu rādīšanu izstrādātāja pieredzes centrā. Tas nav nejaušība, tas atspoguļo grūtu patiesību, ko mēs visi esam sajutuši: Sending less JavaScript is the only way to scale interactivity and performance on the modern web. React Server Components are the React-native answer to that challenge — deeply integrated, ergonomic, and production-ready. Ko sagaidīt turpmāk Kad React 19 un ekosistēma nobriest, mēs varam sagaidīt: Tātad Tātad Tātad Tātad Vairāk granulu debugēšanas un profilēšanas rīku RSC kokiem to show boundaries and hydration timelines Better DevTools integration to abstract rendering strategy (e.g., , wrappers) Higher-order patterns <ServerOnly> <DeferredClient> Plašāka pieņemšana dizaina sistēmās, sistēmās un bibliotēkās (piemēram, RSC apzinātie UI komplekti) Vai jums patika lasīšana? Ja šis raksts palīdzēja jums domāt atšķirīgi par React un Next.js Vairāk dziļu dīķu Follow me on Hackerīte Hackerīte lai tērzētu par React, arhitektūru vai RSC migrāciju Or connect with me on LinkedIn Linkolns
