ՀիմնականՏեսակ RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering) Render Location Server Server Client JavaScript ուղարկվել է բրիտորին ❌ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ Full ✅ Full ✅ Full Access to server resources ✅ Direct ✅ Via getServerSideProps ✅ Needs API calls When it runs On-demand or streamed Per request On load in browser Ideal case use Static or data-bound views Personalized or dynamic UI Interactive flows, local UX Տեսակ RSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering) Render Location Server Server Client JavaScript ուղարկվել է բրիտորին ❌ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ ոչ ✅ Full ✅ Full ✅ Full Access to server resources ✅ Direct ✅ Via getServerSideProps ✅ Needs API calls When it runs On-demand or streamed Per request On load in browser Ideal case use Static or data-bound views Personalized or dynamic UI Interactive flows, local UXRSC (React Server Components) SSR (Server-Side Rendering) CSR (Client-Side Rendering) սարքավորումներՀիմնական RSC (React Server Components) սարքավորումներ Հիմնական Հիմնական Տեղադրել Server Server ClientՏեղադրեք տեղը Հիմնական սերտիֆիկ Հիմնական JavaScript- ը ուղարկվել է browser- ի համար ոչ ✅ ոչ ✅ ոչՀիմնական Հիմնական Արդյոք Արդյոք Խնդրում ենք hydrationԽնդրում ենք hydration Արդյոք Արդյոք Արդյոք Հիմնական Հիմնական Հիմնական Հիմնական Հեղինակային ծառայություններ ✅ Direct ✅ Via getServerSideProps ✅ Needs API calls Արդյոք Հիմնական Հիմնական Երբ այն կատարվում է On-demand կամ Streamed Per request On load in browserԵրբ գնում է Հիմնական Հիմնական Բեռնել Browser- ում Հիմնական օգտագործման բաղադրիչ Statistical or data-bound views Customized or dynamic UI Interactive flows, local UXՀիմնական Հիմնական Հիմնական Գործիք Server Component Client Component useState ❌ ✅ useEffect ❌ ✅ useContext ✅ (հարկե Statistical) ✅ async/await ✅ ❌ (հարկե սխալներ) Event handlers ❌ ✅ Գործիք Server Component Client Component Օգտագործման Հիմնական ՀիմնականԱրդյոքՀիմնականՕգտագործեքContext ✅ (հարկե Statistical) ✅ՀիմնականՀիմնականasync / վախենումՀիմնական Հիմնական ՀիմնականՀիմնականՀիմնականՀիմնական ՀիմնականՀիմնական ՀիմնականՀիմնական Հիմնական ՀիմնականՀաճախորդի մասըՀիմնականՀիմնական Հիմնական Հաճախորդի մասը Օգտագործման Հիմնական Օգտագործման արդյունքը Հիմնական Հիմնական Հիմնական ՕգտագործեքContext ✅ (հարկե Statistical) ✅Հիմնական (Եթե ստանդարտ է) Հիմնականasync / վախենումՀիմնականՀիմնականՀիմնական Հիմնականasync / վախենում Հիմնական Հիմնական ՀիմնականՀիմնական ՀիմնականՀիմնականՀիմնականՀիմնական ՀիմնականՀիմնական Հիմնական հոդված՝ Strategic Reason Հիմնական PriceWithPersonalization SSR- ը հիմնված է օգտվողի կայքում, մանրաձայնային պահանջի համարՀիմնական ԱրդյունքներButtonՀիմնականCSR-ն Հիմնական ՀիմնականՀիմնականRelated Ապրանքներ Հիմնական ՀիմնականStockStatusBanner RSC + streaming Հատկապես փոխվում է, Streamed in with Suspense to not block TTFBՀիմնականՀիմնական հոդված՝ Strategic ReasonՀիմնական Հիմնական ՀիմնականՀիմնական Հիմնական Հիմնական ԱրդյունքներButtonՀիմնականCSR-ն Հիմնական ԱրդյունքներButton CSR-ն Հիմնական ՀիմնականRelated Ապրանքներ Հիմնական Related Ապրանքներ Հիմնական ՀիմնականRSC + Streaming- ըՀիմնականՀիմնական RSC + Streaming- ը Հիմնական (*Եթե ցանկանում եք վերցնել եւ ուղղակիորեն վերցնել տեխնիկական սխալը, վերցնել 1. Why React Server Components Were Introduced.) 2010 թ. սկսած, React- ը վերլուծել է Frontend- ի զարգացման հետ, իր deklarative component model- ի եւ արդյունավետ virtual DOM diffing- ի հետ: Այն, ինչ սկսվել է պարզ տեսանյութի գրասենյակին, արագն էր մեծ քանակի մեկ էջային ծրագրերի (SPA- ի) բաղադրիչը: Այս SPAs- ում հիմնականում օգտագործվել են Client-Side Rendering- ը (CSR), որը նշանակում է, որ բեռնել է JavaScript- ի բաղադրիչը, կատարել այն եւ կառուցել UI- ը ամբողջապես հաճախորդի վրա: Այս client-centric մոդելը հարմարավետ եւ շատ ինտերնետիկ էր, եւ այն որոշել է «դորինական» կայքի ծրագրերը տարիների ընթացքում: Սակայն, քանի որ ծրագրերը աճել են ավելի հարմարավետ եւ ֆունկցիոնալ, CSR- ը սկսել է ցույց տալ, որ իր սխալները: Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Longer Time-to-Interactive (TTI): Բարձր JavaScript բաղադրիչները եւ հաճախորդի կողմի աշխատանքը նշանակում են, որ օգտվողները ավելի երկար սպասում են, երբ նրանք կարող են իրականում ինտերնետել էջի հետ: Hydration bottlenecks: Converting server-rendered HTML into an interactive app (hydration) դարձել է արդյունավետության ծախսարան, հատկապես քանի որ մանրամասների մանրամասները աճել է. Պահպանված բաղադրիչները: Ապրանքներ հաճախ մատակարարել են շատ ավելի JavaScript- ը, քան անհրաժեշտ է, բեռնում են բեռախոսները կոդը համար գործառույթների կամ բաղադրիչների համար, որոնք կարող են մատակարարվել ավելի արդյունավետորեն: Ապրանքանիշը, որը չի ծախսում: Ապրանքը ավելի մեծ եւ հարմարավետ է, այնքան դժվար է պահպանել արագ կատարումը բոլոր սարքերում եւ ցանցային պայմաններում: Next.js- ը հայտնաբերվել է, որպեսզի վերահսկել այդ մի քանի բաղադրատոմսերը, որը ներկայացրել է Server-Side Rendering (SSR), Static Site Generation (SSG), եւ այլ բաղադրատոմսերը: Այս տեխնոլոգիաները բարելավել են առաջին բաղադրատոմսերի ժամանակները եւ փոխել են մի քանի UI rendering աշխատանքը սերվերի համար: Բայց նույնիսկ SSR- ի եւ SSG- ի հետ, հիմնական խնդիրը մնացել է: Մենք դեռ վերահսկել ենք JavaScript- ը բաղադրատոմսերի համար: Next.js 15- ի հետ, որը աշխատում է React 19- ի վրա, նոր արտադրական պրայթամը ստացել է կենտրոնական սենյակ: RSC-ները թույլ են տալիս մշակողներին սեղմել server-rendered եւ client-rendered բաղադրիչները մի միակ React tree- ում: Ապրանքները կարեւոր են: Հիմնական մասերը UI- ում այժմ կարող են մաքուր HTML- ում տվել: Արդյոք, այդ մասերի համար ոչ մի client-side hydration- ը պահանջվում է: Data picking logic- ը նաեւ հեշտությամբ կատարվում է սերվերի ներքին բաղադրիչների վրա, ինչպիսիք են շատ անսահմանափակ API calls- ի բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների համար: React Server Components (RSC) zero JavaScript overhead Այս հոդվածը ոչ թե RSC- ի մակարդակի վերլուծություն է: Երբ ես սկսեցի գրել Next.js- ի արդյունավետ օգտագործման մասին 2025- ում, այն արագ բացահայտվել է, որ React Server Components- ը արժանի է մասնագիտացված Deep Dive- ի: Այն, ինչ ներառում է, տեխնիկական ճշգրիտ ուսումնասիրություն է, թե ինչպես RSC- ը աշխատում է սեղմում, թե ինչպես օգտագործել այն Next.js 15- ի նախագծում, եւ թե ինչու դա նշանակում է Frontend- ի դիզայնի հիմնական փոխանցումը: Մինչեւ վերջը, ես հավատում եմ, որ դուք ստանում եք նույն հուսալիությունը եւ հուսալիությունը RSC-ի համար, ինչ ես ստացել եմ այս գրքի հետազոտության եւ գրքի գործընթացում: Intro: From CSR to RSC — How Rendering Evolved in React Հիմնական: CSR- ից RSC- ում: Ինչպես Rendering- ը փոխվել է React- ում Հաջորդ տարիների ընթացքում, թե ինչպես մենք ստեղծում ենք React ծրագրեր, հիմնականում զարգացել է, եւ այնպես էլ, թե ինչպես մենք կարծում ենք rendering- ի մասին: Customer-Side Rendering (CSR) սարքավորումներ Ապրիլը ձեռք բերել է իր հայտնիությունը — մի մոդել, որտեղ բեռախոսը բեռնում է JavaScript- ը, կատարում է այն, եւ կառուցում է ամբողջ UI-ը հաճախորդի վրա: Այս մեթոդը տալիս է մշակողներին ամբողջական վերահսկողությունը ինտեգրտության եւ պայմանների վրա, եւ հեշտեցնում է դիզայնը դիզայնային մեկ էջային ծրագրերի (SPAs) վրա: Client-Side Rendering (CSR) Այսպիսով, CSR- ը հասանելի է միասին: Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական լիցքավորումը, հատկապես բջջային կամ խոշոր ցանցում Լավ SEO- ը Content-Driven Pages- ի համար JavaScript- ի հզոր բուլտֆիլներ — նույնիսկ բուլտֆիլների համար, որոնք minimally interactive են HTML- ի բեռնելից հետո պահանջվում էր hydration- ի քայլը, որը տեւել է ժամանակը interactive- ում: Երբեմն, այդ սահմանափակումներ են պարզապես «Ո՞վ են բաները». Այնուհետեւ Next.js փոխել է խաղը. Ինչպե՞ս Next.js- ը SSR- ի եւ SSG- ի համար առաջարկել է React- ի զարգացման Երբ Արդյոք, ինչպիսիք են React- ի առաջին դասընթացը, այն ներառում է Server-side rendering (SSR) եւ Static Site Generation (SSG) որպես առաջին դասընթացների քաղաքները: Սա նշել է վերլուծման վայրը: Frontend- ի մշակողները այժմ կարող են ընտրել, թե ինչպես եւ երբ rendering- ը կատարվում է: Next.js Հիմնական Հիմնական Հիմնական Հիմնական SSR- ը թույլ է տալիս էջերը արտադրել պահանջով, բարելավելով SEO-ը եւ բեռնել արագությունը դինամիկ մատակարարման համար: SSG- ը թույլ է տալիս մատակարարման ժամանակ մատակարարել մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակարարված մատակ Incremental Static Regeneration- ը (ISR- ը) թույլ է տալիս statistic pages- ի նորաձեւելու համար. Այս հարմարավետությունը օգնում է մշակողներին ավելի լավ հարմարեցնել կատարման, SEO- ի եւ զարգացման փորձի միջեւ: Բայց նույնիսկ SSR- ի եւ SSG- ի հետ, նույնիսկ կա մի խնդիր: — նույնիսկ բաղադրիչների համար, որոնք չեն պետք է ինտերնետային լինել: we were still sending too much JavaScript to the browser React Server Components- ի (RSC) աճը 2025 թվականին Երբ ազատվել է եւ Մենք ներսում ենք նոր ժամանակը: Ահա այն, թե ինչպես մենք ստեղծում ենք app- ները. Next.js 15 React 19 React Server Components (RSC) SSR- ի տարբերությամբ, որը դեռ պահանջում է hydration- ը եւ մատակարարում է JavaScript- ը հաճախորդին, Արդյոք RSC allows you to render components on the server — without sending any JavaScript to the browser at all Դա մեծ փոխանակություն է: Հիմնական Հիմնական Հիմնական Հիմնական Components- ը այժմ կարող է մուտք գործել Server-side տվյալները Սատիկ բաղադրիչները չեն պահանջում hydration Դուք կարող եք բաղադրել սերվերի եւ հաճախորդների բաղադրիչները մեկ React tree- ում, ստեղծելով ձեր rendering պլաստիկը բաղադրիչների համար: RSC- ը չի փոխարինում SSR- ը կամ SSG- ը, այն , բացահայտելով finer-grained վերահսկողությունը կատարումը, bundle չափը, եւ rendering գործառույթը. complements them 2025-ին, RSC- ը մեկնաբանություն է, որ բոլոր բարձրագույն React- ի ինժեներները պետք է հպարտեն: 1. Why React Server Components Were Introduced Ինչու է React Server Components- ը տեղադրվել Երբ React- ի ծրագրերը պլանավորվել են, արդյունաբերությունը սկսել է զգալ իր հաջողության քաշը: Երբ Client-Side Rendering (CSR), Server-Side Rendering (SSR) եւ Static Site Generation (SSG) առաջարկել են տարբեր ռեժիմները կատարյալ վեբ ծրագրերի ստեղծման համար, ամենը ներառում է առեւտրային գործառույթներ, որոնք աճել են ավելի հուսալի քանակում: CSR- ի, SSR- ի եւ SSG- ի սահմանափակումներ 1 Արդյոք Hydration overhead Միայն SSR- ի կամ SSG- ի հետ, երբ HTML-ը հասկանում է բեռնելը, React- ը պետք է «դորել» էջը - տեղադրել գործառույթների լսողները, վերականգնել բաղադրիչները եւ արդյունավետ վերականգնել ծրագրը մոռանումում: Երկու մեծ բաղադրիչների համար, hydration- ը կարող է լինել Time-To-Interactive- ի (TTI) հիմնական բաղադրիչը: 2 Հյուրատետր JavaScript bundle bloat CSR- ի հետ, ցանկացած բաղադրիչ, գործիք եւ API-ի զանգվածը, որը էջի մաս է, պետք է ուղարկվի բլոգին, ոչ թե այն, թե ինչ է ինտերնետիկ կամ ոչ: SSR- ը եւ SSG- ը մի քիչ նվազեցնում են այն, բայց մեծ մասը բաղադրիչը դեռ պետք է կատարվի հաճախորդի վրա: Այսպիսով, ինչպես app-ները աճում են, դա կախված է բաղադրիչների վրա, որոնք կախված են օգտվողի փորձը: 3-րդ Disconnected data-fetching logic Հիմնական հարցը, ինչպիսիք են այն, թե ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն. կամ (Տեսանյութ՝ APIs ) ստանալ տվյալները, ապա փոխանցել այն components միջոցով props. Այս բաժանման ավելացվել է գիտական overhead եւ դարձել է կոդը դժվար է միասին տեղադրել եւ վերցնել. getServerSideProps getStaticProps useEffect Ի՞նչ խնդիրներ RSC- ը նախագծված է լուծել React Server Components (RSC)- ը ստեղծվել է այս աճող ծախսերի համար պարզ, բայց հզոր գաղափարով: Արդյոք let components execute on the server by default, and only send JavaScript to the browser when it’s absolutely necessary Eliminate unnecessary JavaScript RSC- ը թույլ է տալիս բաղադրիչների rendering server-side Եթե մի բաղադրիչ չի պահանջում ինտերնետիկությունը, այն ոչինչ չի պահանջում, որ իր JS բաղադրիչը hydrate կամ բեռնել: Ոչ Server-side data access within the component tree RSC- ը վերցնում է տվյալների վերահսկողության եւ rendering- ի միջեւ սերտիֆիկ գիծը: Server- ի մասերը կարող են օգտագործել Արդյոք, դուք կարող եք ուղղակիորեն հասնել տվյալների բազաներ, ֆայլային համակարգեր, կամ API- ում - co-locating տվյալները եւ տեսնել լոգին自然, առանց անհրաժեշտության API- ի ճանապարհների կամ prop բորում. async/await Improve rendering efficiency and developer experience Միացյալ բաղադրիչները կարող են ստեղծել ավելի հեշտ ծրագրեր, ավելի փոքր բաղադրիչների եւ ավելի լավ կատարման հետ: RSC- ը նաեւ հեշտեցնում է բաղադրիչների մոդելը: Դուք պարզապես գրում եք բաղադրիչները, եւ թույլ եք տալիս, որ բաղադրիչները կառավարել են այն, թե որտեղ նրանք աշխատում են եւ թե ինչպես նրանք ուղարկել են: RSC- ը չպետք է փոխարինել SSR- ը կամ SSG-ը, այլն, այն մատակարարում է նրանց: Այն թույլ է տալիս Ձեզ մտածել , ոչ միայն էջային մակարդակի մասին, թե ինչ պետք է գործել սերվերի եւ ինչ պետք է ներառում է բեռնել. 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 Next.js 15- ում Rendering Strategies: RSC vs SSR vs CSR Next.js 15- ը առաջարկում է մշակողներին granular rendering մոդել, որը հասանելի է շատ ավելի շատ, քան բնական էջային մակարդակի ռեժիմներ: Որքան կարեւոր է, թե ինչպե՞ս են նրանք համեմատվել երկու հայտնի մոդելների հետ: եւ Արդյոք React Server Components (RSC) Server-Side Rendering (SSR) Client-Side Rendering (CSR) Երբ SSG (Static Site Generation) դեռ կարեւոր է որոշ դեպքերում, այն կարող է տեսնել որպես Բարձրացվել է SSR- ի վրա Նրանք ներառում են տարբեր Runtime rendering ճանապարհներ, եւ իմանալ, որ նրանք կարեւոր են, որպեսզի կատարման եւ դիզայնի իմանալ ընտրություններ 2025. caching strategy RSC vs SSR vs CSR 💡 Երբ մենք համեմատենք: Ի՞նչ է նշանակում «Interactive Component»- ը: React- ի եւ Next.js- ի մասին Ո՞վ է այն Element, որը Արդյոք interactive component requires client-side JavaScript to respond to user input or browser events Սա ներառում է ( բայց ոչ միայն): Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Տեղադրիչները, որոնք update state on click Validation- ի կամ Controled Inputs- ի ձեւեր Մոդելներ եւ մոդելներ, որոնք փոխանցում են open/closed Արդյոք, ինչպիսիք են scrolling կամ hover Տեղադրիչներ, carousels, Filters, Sliders Նկարներ, որոնք օգտագործում են useState, useEffect կամ useReducer Եթե մի մասը ունի Միջազգային Արդյոք, կամ հավատում է, որ Այն պետք է կատարվի հաճախորդի վրա. event handlers state DOM or browser APIs Interactivity = Browser-side behavior + JS event listeners + local state. Այս տարբերությունը օգնում է բացահայտել : Ձեզ պետք է ստանալ JavaScript- ը այն UI-ների համար, որոնք չեն պետք է ինտերնետային լինել: why RSC exists Մոդելերը տեսնում են Նկարագրություն Նկարագրություն RSC (React Server Components) սարքավորումներ SSR (Server-Side Rendering) սարքավորումներ SSR (Server-Side Rendering) սարքավորումներ CSR (Client-Side Rendering) սարքավորումներ CSR (Client-Side Rendering) սարքավորումներ Տեղադրեք տեղը սերտիֆիկ սերտիֆիկ սերտիֆիկ Գլխավոր Գլխավոր JavaScript-ը ուղարկվել է Browser- ում JavaScript-ը ուղարկվել է Browser- ում Ոչ ոք Ոչ ոք Արդյոք Արդյոք Խնդրում ենք hydration Արդյոք Արդյոք Արդյոք ինտերնետային ինտերնետային Արդյոք Արդյոք Արդյոք Արդյոք ✅ Full Արդյոք Server Resources- ի հասկանալը Server Resources- ի հասկանալը ✅ Direct Հիմնական հոդված՝ GetServerSideProps Հիմնական հոդված՝ GetServerSideProps Արդյոք պետք է API calls Արդյոք պետք է API calls Երբ գնում է On-Demand կամ Streamed On-Demand կամ Streamed Հիմնական պահանջում Հիմնական պահանջում Բեռնել Browser- ում Հիմնական օգտագործման Case Հիմնական օգտագործման Case Statistical կամ data-bound տեսումներ Statistical կամ data-bound տեսումներ Մասնավոր կամ բնական UI Մասնավոր կամ բնական UI Interactive Flows, տեղական UX Interactive flows, local UX 🔍 Think in Components, Not Just Pages Next.js- ի նախորդ տարբերակներում, rendering strategies- ը օգտագործվել է . You had Հիմա Ո՞վ եք ընտրել, պետք է օգտագործեք Դա նշանակում էր մի աշխարհում, որտեղ rendering- ը կատարվում է ամեն ինչ կամ ոչինչ - այնպես էլ statistically է build- ի ժամանակ, կամ dynamically է յուրաքանչյուր պահանջում. page level getServerSideProps getStaticProps entire page But with եւ The Next.js 13+- ում տեղադրվել եւ 15- ում ստանդարտվել է Դա դարձնում է a that unlocks a new mindset. React Server Components (RSC) app/ rendering is no longer a top-down, one-size-fits-all decision per-component concern A New Way of Thinking: Declarative եւ Composable Rendering- ը Այս փոխանակը ավելի շատ է, քան API-ի փոխանակը, այն է դիզայնային փոխանակը, թե ինչպես եք ստեղծել ձեր frontend- ը: Declarative Օգտագործելով Orchestrating եւ Արդյոք բաղադրիչները մանրաձայնորեն փոխվում են, ապա դուք պարզապես — React- ը եւ Next.js- ը վերցնում են ամենը. Ինչպես Ինչպե՞ս declare what each component does and what it needs You don’t manually wire up API endpoints or pass props from SSR to components. You can just write: // Server Component export default async function ProductInfo() { const product = await db.getProduct(slug) return <div>{product.name}</div> } Այս մասը: Հիմնական Հիմնական Հիմնական Հիմնական Գնացվում է Server- ում Doesn’t send JS to the client Նրանք չեն պահանջում GetServerSideProps կամ API մակերեսը «Ես միայն մի մաս» - ոչ մի լրացուցիչ abstraction անհրաժեշտ է You describe the UI and its data needs , եւ rendering մեքենա նշում է մյուսը. declaratively Composable Ձեր UI-ի տարբեր մասերը կարող են օգտագործել տարբեր ռեժիմման պլաստակներ - Հիմա , and Արդյոք on the same page at the same time with minimal overhead For example: // Product page layout <ProductInfo /> // Server Component (no JS, rendered on the server) <AddToCartButton /> // Client Component (interactive) <SimilarProducts /> // Static Component (SSG with revalidation) Այս բաղադրիչները միասին ապրում են միասին, բայց յուրաքանչյուրը: Հիմնական Հիմնական Runs in a different environment (server, client, build) Օգտագործեք միայն այն տվյալները եւ կոդը, որը անհրաժեշտ է Գործիքները պարզապես այն են, ինչ պահանջվում է բեռնելը - ոչ ավելի, ոչ ավելի Այս մասին ավելի ճշգրտության համար, ես ստեղծել եմ մի Դա ցույց է տալիս, թե ինչպիսիք են տարբեր ռեժիմումային ռեժիմները, որոնք կարող են միասին ապրել մեկ էջում: Հիմնական Demo 3. How React Server Components Work Under the Hood Ինչպես React Server Components- ը աշխատում է կոճի տակ React Server Components (RSC)- ը ավելի քան մի նոր արտադրական պլաստիկ է: Նրանք հիմնականում փոխում են, թե ինչպես արտադրվում են, արտադրվում են եւ փոխանցում են նյութական խոշորները: RSC- ի արդյունավետ օգտագործման համար արտադրության մեջ կարեւոր է իմանալ and how it impacts the boundaries of state, interactivity, and data. how it works behind the scenes Server/Client Boundary: A Split React Tree- ը React applications using RSC are no longer fully rendered on the client. Instead, the : component tree is split into two worlds Հիմնական Հիմնական : Execute only on the server. No JavaScript is ever sent to the browser. Cannot hold local state or attach event listeners. Perfect for rendering static content and server-bound logic (e.g., DB access). Server Components Client Components- ը `Use Client- ը`-ն է, որը հարմարեցված է browser-friendly JavaScript- ում եւ աջակցում է ամբողջական ինտեգրտությունը, տեղական կարգը, useEffect- ը եւ գործառույթների կառավարումը: Երբ build- ում կամ runtime- ում, React- ը կառուցում է մի տուն, որտեղ server- ի եւ client- ի բաղադրիչները միասին ապրում են, եւ վերցնում են այն միասին rendering- ի ընթացքում: 📍 What Հատկանում է "use client" When you add Դա նշում է, որ ամբողջ մոդելը եւ իր արտահանողները որպես Next.js- ի բաղադրիչը կարող է ստեղծել: "use client" client-only Հիմնական Հիմնական Հիմնական Հիմնական Փոխրեք այդ ֆայլը ( եւ նրա կախվածություններները) բացասական JavaScript bundle- ում Արդյոք, այս գործառույթը բացահայտվում է սերվերի վրա: Տեղադրեք այն որպես Classic React CSR բաղադրիչ, որը hydration logic Այս կարգը աշխատում է որպես Բոլոր բաղադրիչները վերեւում կարող են արտադրվել սերվերի կողմից; բոլոր բաղադրիչները ներքեւում պետք է արտադրվում են բաղադրիչում: boundary marker Streaming: Rendering in Pieces, ոչ բոլորը մեկ անգամ RSC-ի հետազոտություններ Ինչպե՞ս կարող եք վերցնել սերտիֆիկը, այնպես որ, թե ինչպես կարող եք վերցնել սերտիֆիկը, թե ինչպես կարող եք վերցնել սերտիֆիկը: Ավելի լավ է, որ հաճախորդը պատրաստ է. streaming streams serialized fragments Հիմնական Հիմնական Հիմնական Server Components are rendered and sent as soon as possible Տեղադրիչները (հարկե <Suspense>- ի միջոցով) տեւել են Client Components- ը հիդրավլիկ է, միայն այն ժամանակ, երբ նրանք բեռնում են ✅ How is this possible? RSC- ը առաջարկում է ընտրական hydration- ը: Երբ Client Component- ը rendered է Server Component tree- ում, React- ը տեղադրում է տեղադրիչը (<div data-rsc-placeholder />) եւ փոխանցում է hydration- ը: Երբ հաճախորդը բեռնում է համապատասխան JS bundle: Հիմնական Հիմնական React lazily բեռնում է այս հատուկ նյութը Տեղադրում է տեղադրողը եւ սեղմում է այն կյանքի խնամին Մխիթարեցրեք այն միասին, առանց վերադառնալ ամբողջ էջը This design is : Ձեր ծրագիրը արագ սկսվում է, եւ ինտեգրտությունը առնվազն է առնվազն. decoupled and progressive <Suspense fallback={<LoadingDetails />}> <ProductDetails /> // Server Component </Suspense> <AddToCartButton /> // Client Component (hydrated later) ⚙️ Data Fetching and Code Splitting in RSC Ավելի կարեւոր «մատիկ» RSC-ի մասին: Հիմնական Ոչ հավատում է Հիմա , or manual prop-passing. 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} /> } Ինչո՞ւ դա հնարավոր է։ Հիմնական Հիմնական RSC բաղադրիչները աշխատում են որպես իրական սերվերի գործառույթներ, ոչ թե հաճախորդի compiled մոդուլներ: Նրանք կարող են ստանալ տվյալների բազաններ, ներքին API-ներ, ֆայլային համակարգեր, կամ ինչ-որ բան, որը ձեր սերվերի Runtime աջակցում է The result is rendered HTML (not JS) and streamed to the client Also: Հիմնական Հիմնական Հիմնական Հիմնական , since the result is static No hydration needed in the component itself — everything resolves before it hits the browser No loading UI logic Ոչ մի կոդը այս բաղադրիչի համար ուղարկվում է հաճախորդի համար, եթե ոչ մի հաճախորդի բաղադրիչ չի տեղադրվում Այսպիսով կարեւորորեն նվազեցնում է boilerplate- ի եւ bundle- ի չափը, իսկ անում է logic- ի հետ UI- ի հետ: React- ի երկարազոտական նպատակը վերջապես կատարվել է քանակում: 🚫 State, Hooks, and Lifecycle Considerations RSC Տեսակներ React Hooks , , or Քանի որ նրանք Արդյոք does not support useState useEffect useRef don’t run in the browser (Մենք պետք է բաղկացած ենք ազդեցությունների մեջ) Event handlers ✅ Feature Server- ի գործառույթը Feature Feature Server- ի գործառույթը Server- ի գործառույթը Հաճախորդի մասը Օգտագործման useState useEffect useEffect ❌ ❌ useContext useContext (Եթե ստանդարտ է) ✅ (Մենք պետք է բաղկացած ենք ազդեցությունների մեջ) async/await ❌ (should wrap in effects) (Մենք պետք է բաղկացած ենք ազդեցությունների մեջ) Event handlers Event handlers Event handlers ❌ ✅ ✅ This enforces a clean separation of responsibilities: Հիմնական Հիմնական Server Components: Data եւ Layout Client Components: Interactivity եւ Local State React Server Components- ը նախագծված է ձեր ծրագրի հեշտացնելով: Երբ դուք ինտեգրել եք սահմանափակման պայմանները, բեռնել մոդելը եւ async տվյալների հասնելը, դուք կարող եք Շատ ավելի քիչ վառելիք է, քան առաջ. compose fast, personalized, and minimal-JS apps 4. What’s the Best Practice? Combining RSC, SSR, and SSG 4. Ի՞նչ է լավագույն գործառույթը: RSC, SSR եւ SSG- ի համատեղ One of the most common questions React engineers face in Next.js 15- ը չէ «Ես պետք է օգտագործեմ RSC- ը»: “how do I combine RSC with SSR and SSG in a maintainable, high-performance way?” Next.js 15-ի գեղեցկությունը այն է, որ դուք դեռ չեք ընդգրկված մեկ ռեժիմման պլաստիկի համար էջում: Այժմ դուք կարող եք , օգտագործելով ամենամեծ հարմարավետ մեթոդը UI-ի յուրաքանչյուր մասի համար: compose rendering strategies at the component level This section introduces a practical framework for making that decision based on actual architectural needs. 🧭 Start with the Core Question: What does this component need? Ask these four questions for every component: Հիմնական Հիմնական Հիմնական Does it need to be interactive? ✅ Yes → Use a Client Component Արդյոք այն պետք է անվտանգ, պահանջի մասնավոր, կամ իրական ժամանակի տվյալները: ✅ Ահա → Կարդալ SSR Can it be precomputed or infrequently updated? ✅ Yes → Prefer SSG Does it fetch server data but never need to run on the client? ✅ Yes → Use RSC Ապրանքի էջի ռեժիմը Breakdown Այսպիսին է, թե ինչպես կարող է տպավոր էլեկտրոնային բիզնեսի արտադրանքի էջը ստեղծվել, օգտագործելով բոլոր երեք ռեժիմները: Հիմնական Արդյունաբերական ռեժիմ Reason ProductDetails RSC Fetched from DB, no interactivity, no need to hydrate Հիմնական PriceWithPersonalization SSR Depends on user session, dynamic per request ԱրդյունքներButton CSR-ն Հիմնական Requires interactivity and local state RelatedProducts SSG (with ISR) Հիմնական Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags StockStatusBanner RSC + streaming Frequently changing, streamed in with Suspense to not block TTFB Ապրանքի մանրամասներ RSC Բացվել է DB- ից, ոչ interactivity, ոչ պետք է hydrate Նրանք պահանջում են ինտերնետությունը եւ տեղական տարածք SSG (Մի հետ ISR) Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags Component Արդյունաբերական ռեժիմ Արդյունաբերական ռեժիմ Reason Reason ProductDetails RSC Fetched from DB, no interactivity, no need to hydrate Ապրանքի մանրամասներ ProductDetails RSC RSC Բացվել է DB- ից, ոչ interactivity, ոչ պետք է hydrate Բացվել է DB- ից, ոչ interactivity, ոչ պետք է hydrate Պաշտպանություն SSR Depends on user session, dynamic per request Պաշտպանություն PriceWithPersonalization SSR SSR Տեղադրվում է օգտագործող սենսացիոնով, մանրաձայնային պահանջով Depends on user session, dynamic per request Requires interactivity and local state AddToCartButton CSR Requires interactivity and local state Նրանք պահանջում են ինտերնետությունը եւ տեղական տարածք SSG (Մի հետ ISR) Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags RelatedProducts SSG (Մի հետ ISR) SSG (with ISR) Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags ԲրիտանիաBanner Frequently changing, streamed in with Suspense to not block TTFB ԲրիտանիաBanner StockStatusBanner RSC + streaming Frequently changing, streamed in with Suspense to not block TTFB Frequently changing, streamed in with Suspense to not block TTFB Each component is doing — ոչ ավելի, ոչ ավելի, ոչ ավելի: Չնայած ամբողջ էջի hydration, ոչ մի ամբողջ աշխարհում տվյալների վերցնել, ոչ մի անսահմանափակ JavaScript. just what it needs to do Դիզայն Best Practices- ի համար միասնական ռեժիմներ 1. Start Server-First սարքավորումներ Design every component as a Server Component by default. Opt into interactivity ( ) միայն այն ժամանակ, երբ անհրաժեշտ է: Այսպիսով պտուտակները փոքր են եւ հեշտությամբ փորձարկվում են: "use client" 2. Կարդացրեք գծերը Use folder naming or filename suffixes to make boundaries explicit: /components /server/ProductDetails.tsx /client/AddToCartButton.tsx /shared/ReviewStars.tsx ✅ 3. Embrace Suspense for progressive delivery Օգտագործեք to stream in non-critical RSCs without blocking the whole page: <Suspense> <Suspense fallback={<LoadingReviews />}> <ReviewList /> </Suspense> ✅ 4. Co-locate logic with components Կարդացեք, թե ինչ պետք է անել եւ թե ինչ պետք է անել, եթե դուք չգիտեք, թե ինչ պետք է անել: Հատկությունը մուտքի մուտքի մեջ, բաղադրիչը վերցնում է ամենը: async ISR- ի (Incremental Static Regeneration) օգտագործումը For cacheable, high-traffic pages like blog articles or marketing sections, use SSG + revalidation: export const revalidate = 3600 // regenerate every hour ️ Գործիքներ, որոնք պետք է փնտրեն Հիմնական Հիմնական Օգտագործելով «Use client» ստանդարտորեն — դուք կստանաք CSR- ի հետ ամեն ինչ ❌ Fetching data in client components when it could be server-fetched ❌ — instead, let client components be focused, isolated, and stateful Passing too much data between RSC and client components via props ❌ Պահպանելու SSR-style getServerSideProps logic ներսում RSC — ոչ մի անհրաժեշտություն, RSC է server-side ✅ Decision Tree Կասկածություն Here’s a simplified guide: Is it interactive? │ ├── Yes → Client Component (CSR) │ └── No │ ├── Needs per-request data? → SSR │ ├── Can be pre-rendered? → SSG │ └── Otherwise → RSC Երբ դուք ինտեգրել եք, թե ինչպե՞ս թարմացնել քարտերը, Արդյոք the decisions become intuitive The best practice isn’t about picking “the best rendering strategy.” Դա մասին — Սպիտակության, նպատակների եւ կատարման համար: designing rendering as an intentional part of your component architecture 6. Looking Ahead: Why RSC Is More Than Just a Feature 6. Looking Ahead: Why RSC Is More Than Just a Feature React Server Components- ը ոչ միայն արդյունավետության optimization- ը կամ DX- ի բարելավումը է: Ավելին նման է React Hooks- ի 2019 թ., RSC- ը 2025 թ. Արդյոք they represent a foundational shift in how we build React applications redefining the baseline for frontend architecture RSC- ը փոխում է Building in React- ի հոգեկան մոդելը Պայմանական React- ի զարգացման միշտ կառուցվել է այս հավատում: “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-ն սխալում է այդ հավատում: RSC- ի հետ, դուք այժմ հարցում եք: Հիմնական Հիմնական Հիմնական Հիմնական Can I skip hydration entirely? -Ինչպե՞ս կարող է սերտիֆիկը աշխատել սերտիֆիկի վրա: Can I colocate backend logic with my UI? Դա մեզ վերցնում է , not with wrappers and workarounds, but with Արդյոք the ability to separate display logic and interactivity cleanly first-class architectural boundaries It’s no longer “client-first.” It’s “purpose-first.” Ձեր UI-ի յուրաքանչյուր մասը գտնվում է այնտեղ, որտեղ այն առավել արդյունավետ է - սերվեր, հաճախորդ, կամ ստատիկ. Ecosystem Shift Toward Server-First Rendering- ը RSC- ը ոչինչ չի կատարվում միասին: Բարձրագույն Frontend- ի էլեկտրոնային համակարգը կատարվում է: Արդյոք server-first rendering renaissance Frameworks like: Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Remix- ը լայնորեն ներառում է սերվերի տվյալների բեռնելը եւ ձեւավորման գործառույթները: Astro- ը սեղմում է Zero-JS- ը սեղմելով միայն interactivity- ի նավահանգներ: Qwik- ը ջերմաստիճան վերցնում է ամենամեծ - բոլոր JS- ից մինչեւ բացառապես անհրաժեշտ է: , with RSC and App Router, now puts of the developer experience. Next.js 15 per-component rendering at the center Սա ոչ մի սխալն է, դա մի ճշմարտություն է, որը մենք բոլորս զգում ենք: Sending less JavaScript is the only way to scale interactivity and performance on the modern web. React Server Components- ը React- ի բնական պատասխանն է այդ փորձի համար - հստակորեն ներգրավված, անգլոնիկ եւ արտադրական պատրաստ է: 🔮 What to Expect Next Քանի որ React 19-ը եւ էլեկտրոնային համակարգը մոռանում են, մենք կարող ենք սպասել, որ: Հիմնական Հիմնական Հիմնական Հիմնական Հիմնական Ավելի մանրամասական debugging եւ profiling գործիքներ RSC փակների համար Լավագույն DevTools ինտեգրումը, որը ցույց է տալիս սահմանները եւ hydration timelines Higher-order մոդելներ abstract rendering ռեժիմերի (հարկե, <ServerOnly>, <DeferredClient> փաթեթներ) Բարձր օգտագործումը դիզայնային համակարգերի, սարքավորումներների եւ գրասենյակների մեջ (հարկե, RSC-aware UI kits) Արդյոք սիրում եք կարդալ։ Եթե այս հոդվածը օգնում է Ձեզ փոխել React- ի եւ Next.js- ի մասին for more deep dives Follow me on Hackerի մասին Hackerի մասին Խաղալ React, architecture, կամ RSC մigration մասին Or connect with me on LinkedIn LinkedIn
