React- ի նոր Server Components- ը կարող է լինել ծախսերը Bloated Web Apps- ում

(*Եթե ցանկանում եք վերցնել եւ ուղղակիորեն վերցնել տեխնիկական սխալը, վերցնել 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- ի վրա, նոր արտադրական պրայթամը ստացել է կենտրոնական սենյակ:React Server Components (RSC)RSC-ները թույլ են տալիս մշակողներին սեղմել server-rendered եւ client-rendered բաղադրիչները մի միակ React tree- ում: Ապրանքները կարեւոր են: Հիմնական մասերը UI- ում այժմ կարող են մաքուր HTML- ում տվել:zero JavaScript overheadԱրդյոք, այդ մասերի համար ոչ մի client-side hydration- ը պահանջվում է: Data picking logic- ը նաեւ հեշտությամբ կատարվում է սերվերի ներքին բաղադրիչների վրա, ինչպիսիք են շատ անսահմանափակ API calls- ի բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների բաղադրիչների համար:

Այս հոդվածը ոչ թե 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) սարքավորումներ

Ապրիլը ձեռք բերել է իր հայտնիությունըClient-Side Rendering (CSR)— մի մոդել, որտեղ բեռախոսը բեռնում է JavaScript- ը, կատարում է այն, եւ կառուցում է ամբողջ UI-ը հաճախորդի վրա: Այս մեթոդը տալիս է մշակողներին ամբողջական վերահսկողությունը ինտեգրտության եւ պայմանների վրա, եւ հեշտեցնում է դիզայնը դիզայնային մեկ էջային ծրագրերի (SPAs) վրա:

Այսպիսով, CSR- ը հասանելի է միասին:

Հիմնական
• Հիմնական լիցքավորումը, հատկապես բջջային կամ խոշոր ցանցում
Հիմնական
• Լավ SEO- ը Content-Driven Pages- ի համար
Հիմնական
• JavaScript- ի հզոր բուլտֆիլներ — նույնիսկ բուլտֆիլների համար, որոնք minimally interactive են
Հիմնական
• HTML- ի բեռնելից հետո պահանջվում էր hydration- ի քայլը, որը տեւել է ժամանակը interactive- ում:
Հիմնական

Երբեմն, այդ սահմանափակումներ են պարզապես «Ո՞վ են բաները». Այնուհետեւ Next.js փոխել է խաղը.

Ինչպե՞ս Next.js- ը SSR- ի եւ SSG- ի համար առաջարկել է React- ի զարգացման

ԵրբNext.jsԱրդյոք, ինչպիսիք են React- ի առաջին դասընթացը, այն ներառում է Server-side rendering (SSR) եւ Static Site Generation (SSG) որպես առաջին դասընթացների քաղաքները: Սա նշել է վերլուծման վայրը: Frontend- ի մշակողները այժմ կարող են ընտրել, թե ինչպես եւ երբ rendering- ը կատարվում է:

Հիմնական
• 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 թվականին

Երբ ազատվել էNext.js 15եւReact 19Մենք ներսում ենք նոր ժամանակը:React Server Components (RSC)Ահա այն, թե ինչպես մենք ստեղծում ենք app- ները.

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- ը, այնcomplements them, բացահայտելով finer-grained վերահսկողությունը կատարումը, bundle չափը, եւ rendering գործառույթը.

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

Հիմնական հարցը, ինչպիսիք են այն, թե ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն, ինչպիսիք են այն.getServerSidePropsկամgetStaticProps(Տեսանյութ՝ APIsuseEffect) ստանալ տվյալները, ապա փոխանցել այն components միջոցով props. Այս բաժանման ավելացվել է գիտական overhead եւ դարձել է կոդը դժվար է միասին տեղադրել եւ վերցնել.

Ի՞նչ խնդիրներ 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- ի մասերը կարող են օգտագործելasync/awaitԱրդյոք, դուք կարող եք ուղղակիորեն հասնել տվյալների բազաներ, ֆայլային համակարգեր, կամ API- ում - co-locating տվյալները եւ տեսնել լոգին自然, առանց անհրաժեշտության API- ի ճանապարհների կամ prop բորում.

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) դեռ կարեւոր է որոշ դեպքերում, այն կարող է տեսնել որպեսcaching strategyԲարձրացվել է SSR- ի վրաRSC vs SSR vs CSRՆրանք ներառում են տարբեր Runtime rendering ճանապարհներ, եւ իմանալ, որ նրանք կարեւոր են, որպեսզի կատարման եւ դիզայնի իմանալ ընտրություններ 2025.

💡 Երբ մենք համեմատենք: Ի՞նչ է նշանակում «Interactive Component»- ը:

React- ի եւ Next.js- ի մասինinteractive componentՈ՞վ է այն Element, որը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.

Այս տարբերությունը օգնում է բացահայտելwhy RSC exists: Ձեզ պետք է ստանալ JavaScript- ը այն UI-ների համար, որոնք չեն պետք է ինտերնետային լինել:

Մոդելերը տեսնում են

ՀիմնականՏեսակ 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) սարքավորումներ

RSC (React Server Components) սարքավորումներ

Հիմնական

SSR (Server-Side Rendering) սարքավորումներ

SSR (Server-Side Rendering) սարքավորումներ

Հիմնական

CSR (Client-Side Rendering) սարքավորումներ

CSR (Client-Side Rendering) սարքավորումներ

Տեղադրել Server Server ClientՏեղադրեք տեղը

Տեղադրեք տեղը

Հիմնական

սերտիֆիկ

սերտիֆիկ

սերտիֆիկ

սերտիֆիկ

Հիմնական

Գլխավոր

Գլխավոր

JavaScript- ը ուղարկվել է browser- ի համար ոչ ✅ ոչ ✅ ոչՀիմնական

JavaScript-ը ուղարկվել է Browser- ում

JavaScript-ը ուղարկվել է Browser- ում

Հիմնական

Ոչ ոք

Ոչ ոք

Արդյոք

Արդյոք

Արդյոք

Արդյոք

Խնդրում ենք hydrationԽնդրում ենք hydration

Խնդրում ենք hydration

Արդյոք

Արդյոք

Արդյոք

Արդյոք

Արդյոք

Արդյոք

Հիմնական

ինտերնետային

ինտերնետային

Հիմնական

Արդյոք

Արդյոք

Հիմնական

Արդյոք

Արդյոք

Հիմնական

✅ Full

Արդյոք

Հեղինակային ծառայություններ ✅ Direct ✅ Via getServerSideProps ✅ Needs API calls

Server Resources- ի հասկանալը

Server Resources- ի հասկանալը

Արդյոք

✅ Direct

Հիմնական

Հիմնական հոդված՝ GetServerSideProps

Հիմնական հոդված՝ GetServerSideProps

Հիմնական

Արդյոք պետք է API calls

Արդյոք պետք է API calls

Երբ այն կատարվում է On-demand կամ Streamed Per request On load in browserԵրբ գնում է

Երբ գնում է

Հիմնական

On-Demand կամ Streamed

On-Demand կամ Streamed

Հիմնական

Հիմնական պահանջում

Հիմնական պահանջում

Բեռնել Browser- ում

Բեռնել Browser- ում

Հիմնական օգտագործման բաղադրիչ Statistical or data-bound views Customized or dynamic UI Interactive flows, local UXՀիմնական

Հիմնական օգտագործման 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- ը օգտագործվել էpage level. You had getServerSidePropsՀիմաgetStaticPropsՈ՞վ եք ընտրել, պետք է օգտագործեքentire pageԴա նշանակում էր մի աշխարհում, որտեղ rendering- ը կատարվում է ամեն ինչ կամ ոչինչ - այնպես էլ statistically է build- ի ժամանակ, կամ dynamically է յուրաքանչյուր պահանջում.

But with React Server Components (RSC)եւ Theapp/Next.js 13+- ում տեղադրվել եւ 15- ում ստանդարտվել էrendering is no longer a top-down, one-size-fits-all decisionԴա դարձնում է aper-component concern that unlocks a new mindset.

A New Way of Thinking: Declarative եւ Composable Rendering- ը

Այս փոխանակը ավելի շատ է, քան API-ի փոխանակը, այն է դիզայնային փոխանակը, թե ինչպես եք ստեղծել ձեր frontend- ը:

Declarative

Օգտագործելով OrchestratingԻնչպեսեւԻնչպե՞սԱրդյոք բաղադրիչները մանրաձայնորեն փոխվում են, ապա դուք պարզապեսdeclare what each component does and what it needs— React- ը եւ Next.js- ը վերցնում են ամենը.

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 declaratively, եւ rendering մեքենա նշում է մյուսը.

Composable

Ձեր UI-ի տարբեր մասերը կարող են օգտագործել տարբեր ռեժիմման պլաստակներ -on the same pageՀիմաat the same time, and 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- ի արդյունավետ օգտագործման համար արտադրության մեջ կարեւոր է իմանալhow it works behind the scenes and how it impacts the boundaries of state, interactivity, and data.

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:

Հիմնական
• Server Components: 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).
Հիմնական
• Client Components- ը `Use Client- ը`-ն է, որը հարմարեցված է browser-friendly JavaScript- ում եւ աջակցում է ամբողջական ինտեգրտությունը, տեղական կարգը, useEffect- ը եւ գործառույթների կառավարումը:

Երբ build- ում կամ runtime- ում, React- ը կառուցում է մի տուն, որտեղ server- ի եւ client- ի բաղադրիչները միասին ապրում են, եւ վերցնում են այն միասին rendering- ի ընթացքում:

---

📍 What "use client"Հատկանում է

When you add "use client"Դա նշում է, որ ամբողջ մոդելը եւ իր արտահանողները որպեսclient-onlyNext.js- ի բաղադրիչը կարող է ստեղծել:

Հիմնական
• Փոխրեք այդ ֆայլը ( եւ նրա կախվածություններները) բացասական 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:

1. React lazily բեռնում է այս հատուկ նյութը
Հիմնական
2. Տեղադրում է տեղադրողը եւ սեղմում է այն կյանքի խնամին
Հիմնական
3. Մխիթարեցրեք այն միասին, առանց վերադառնալ ամբողջ էջը

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-ի մասին:you can fetch data directly inside components withՀիմնականasync/awaitՈչ հավատում էgetServerSidePropsՀիմաuseEffect, or manual prop-passing.

// 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:

Հիմնական
• No hydration needed, since the result is static
Հիմնական
• No loading UI logic in the component itself — everything resolves before it hits the browser
Հիմնական
• Ոչ մի կոդը այս բաղադրիչի համար ուղարկվում է հաճախորդի համար, եթե ոչ մի հաճախորդի բաղադրիչ չի տեղադրվում
Հիմնական

Այսպիսով կարեւորորեն նվազեցնում է boilerplate- ի եւ bundle- ի չափը, իսկ անում է logic- ի հետ UI- ի հետ: React- ի երկարազոտական նպատակը վերջապես կատարվել է քանակում:

🚫 State, Hooks, and Lifecycle Considerations

RSC does not supportՏեսակներ React HooksuseState, useEffect, or useRefՔանի որ նրանքdon’t run in the browserԱրդյոք

Գործիք Server Component Client Component useState ❌ ✅ useEffect ❌ ✅ useContext ✅ (հարկե Statistical) ✅ async/await ✅ ❌ (հարկե սխալներ) Event handlers ❌ ✅Գործիք Server Component Client ComponentՕգտագործմանՀիմնական

ՀիմնականԱրդյոքՀիմնականՕգտագործեքContext ✅ (հարկե Statistical) ✅ՀիմնականՀիմնականasync / վախենումՀիմնականՀիմնական

(Մենք պետք է բաղկացած ենք ազդեցությունների մեջ)

ՀիմնականՀիմնականՀիմնականՀիմնական

Event handlers

ՀիմնականՀիմնական

✅

ՀիմնականՀիմնական

Feature

Հիմնական

Server- ի գործառույթը

ՀիմնականՀաճախորդի մասըՀիմնականՀիմնական

Feature

Feature

Հիմնական

Server- ի գործառույթը

Server- ի գործառույթը

Հաճախորդի մասը

Հաճախորդի մասը

Օգտագործման

Օգտագործման

useState

Հիմնական

Օգտագործման արդյունքըՀիմնական

Հիմնական

useEffect

useEffect

Հիմնական

❌

❌

ՕգտագործեքContext ✅ (հարկե Statistical) ✅Հիմնական

useContext

useContext

(Եթե ստանդարտ է)

(Եթե ստանդարտ է)

✅

Հիմնականasync / վախենումՀիմնականՀիմնականՀիմնական

(Մենք պետք է բաղկացած ենք ազդեցությունների մեջ)

Հիմնականasync / վախենում

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-ի գեղեցկությունը այն է, որ դուք դեռ չեք ընդգրկված մեկ ռեժիմման պլաստիկի համար էջում: Այժմ դուք կարող եքcompose rendering strategies at the component level, օգտագործելով ամենամեծ հարմարավետ մեթոդը UI-ի յուրաքանչյուր մասի համար:

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:

Հիմնական
1. Does it need to be interactive?
   • ✅ Yes → Use a Client Component
2. Արդյոք այն պետք է անվտանգ, պահանջի մասնավոր, կամ իրական ժամանակի տվյալները: ✅ Ահա → Կարդալ SSR
Հիմնական
3. Can it be precomputed or infrequently updated?
   • ✅ Yes → Prefer SSG
Հիմնական
4. 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

Հիմնական հոդված՝ Strategic Reason

Ապրանքի մանրամասներ

RSC

Հիմնական

Բացվել է DB- ից, ոչ interactivity, ոչ պետք է hydrate

PriceWithPersonalization SSR- ը հիմնված է օգտվողի կայքում, մանրաձայնային պահանջի համարՀիմնականԱրդյունքներButtonՀիմնականCSR-նՀիմնական

Նրանք պահանջում են ինտերնետությունը եւ տեղական տարածք

ՀիմնականՀիմնականRelated Ապրանքներ

SSG (Մի հետ ISR)

Հիմնական

Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags

ՀիմնականStockStatusBanner RSC + streaming Հատկապես փոխվում է, Streamed in with Suspense to not block TTFBՀիմնականՀիմնական հոդված՝ Strategic ReasonՀիմնական

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

ԱրդյունքներButtonՀիմնականCSR-նՀիմնական

Requires interactivity and local state

ԱրդյունքներButton

AddToCartButton

CSR-ն

CSR

Հիմնական

Requires interactivity and local state

Նրանք պահանջում են ինտերնետությունը եւ տեղական տարածք

ՀիմնականRelated Ապրանքներ

SSG (Մի հետ ISR)

Հիմնական

Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags

Related Ապրանքներ

RelatedProducts

SSG (Մի հետ ISR)

SSG (with ISR)

Հիմնական

Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags

Անվտանգ է սխալել build-time, կարող է վերականգնել ամեն 24 ժամ կամ ամեն Tags

ԲրիտանիաBanner

ՀիմնականRSC + Streaming- ըՀիմնականՀիմնական

Frequently changing, streamed in with Suspense to not block TTFB

ԲրիտանիաBanner

StockStatusBanner

RSC + Streaming- ը

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 just what it needs to do— ոչ ավելի, ոչ ավելի, ոչ ավելի: Չնայած ամբողջ էջի hydration, ոչ մի ամբողջ աշխարհում տվյալների վերցնել, ոչ մի անսահմանափակ JavaScript.

Դիզայն 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

Օգտագործեք<Suspense> to stream in non-critical RSCs without blocking the whole page:

<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
• ❌ Passing too much data between RSC and client components via props — instead, let client components be focused, isolated, and stateful
Հիմնական
• ❌ Պահպանելու 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- ի բարելավումը է:they represent a foundational shift in how we build React applicationsԱվելին նման է React Hooks- ի 2019 թ., RSC- ը 2025 թ.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?
Հիմնական

Դա մեզ վերցնում էthe ability to separate display logic and interactivity cleanly, not with wrappers and workarounds, but with 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- ից մինչեւ բացառապես անհրաժեշտ է:
Հիմնական
• Next.js 15, with RSC and App Router, now puts per-component rendering at the center of the developer experience.
Հիմնական

Սա ոչ մի սխալն է, դա մի ճշմարտություն է, որը մենք բոլորս զգում ենք:

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- ի մասին

Follow me on Hackerի մասին for more deep dives

Hackerի մասին

Or connect with me on LinkedInԽաղալ React, architecture, կամ RSC մigration մասին

LinkedIn