(Əgər öncə keçmək istəyirsənsə və doğrudan teknik çöküşə dalmaq istəyirsənsə, 1. React Server Components niyə təqdim edildi.)
2013-cü ildə aparılmış arxeoloji tədqiqat işləri burada 120 kv.metrlik ərazidə yaşayış yerinin qalığının olduğunu söyləməyə əsas verir (1).
Bu client-centric model fleksib və yüksək interaktiv idi, və o illərdir “modern” web apps defined.
- Şirkət
- Daha uzun Time-to-Interactive (TTI): Hefty JavaScript paketləri və müştərinin tərəfində iş anlamında istifadəçilər sayəsində interaksiya edə bilməmişdən əvvəl daha uzun müddət gözləyirlər. Şirkət
- Hidratasiya butonluqları: Server-rendered HTML interaktiv bir app (hidratasiya) dönüştürmək performans şoku oldu, özellikle dinamik içəriş artdıqca. Şirkət
- Applikasyonlar sıklıqla lazım olandan daha çox JavaScript göndərir, daha effektiv olaraq təqdim edilə biləcək funksiyalar və ya içərilər üçün kodla tarayıcıları ağırlaşdırır. Şirkət
- İstehsal etməyən performans: App nə qədər böyük və daha kompleks olursa, bütün cihazlarda və ağ vəziyyətlərində sürətli performansın davam etdirilməsi daha çətin olur. Şirkət
Next.js bu ağrıların bir hissəsini Server-Side Rendering (SSR), Static Site Generation (SSG) və digər optimizasyonlar gətirərək həll etmək üçün ortaya çıxdı.Bu tekniklər ilk yükləmə vaxtını yaxşılaşdırdı və UI rendering işinin bir hissəsini serverə yüklədi.
Next.js 15 React 19 ilə işlədikdə, yeni bir rendering paradigması orta sahəyə düşdü:React Server Components (RSC)Xatırladaq ki, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlıq etməsi, ABŞ-ın İŞİD-ə qarşı hökmdarlığa qarşı hökmdarlığa qarşı hökmdarlıqdır.zero JavaScript overheadVVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu.
Xatırladaq ki, 2025-ci ildə Next.js-i etkili şəkildə istifadə etmək haqqında yazmağa başladığım zaman, React Server Components-in özünə layiqli bir deep-dive-a layiq görülməsinə layiq görüldü.Sonra, RSC-nin qapısının altında necə işlədiyini, Next.js 15-də necə istifadə edə biləcəyini və niyə frontend arhitekturasında fundamentaldır.
Sonunda, ümid edirəm ki, RSC-nin bu işin araşdırılması və yazılması prosesi ilə etdiyim kimi açıqlıqla və təşəkkürlə gələcəksiniz.
Intro: From CSR to RSC — How Rendering Evolved in React
PPP tam olaraq bu bölgüyə uyğun gəlmədiyi üçün adətən HDLC/SDLC protokollar dəsti kimi təsvir edilir.Son 10 ildə, React proqramları yaratdığımız yol fundamentaldır və bununla birlikte, renderinq haqqında düşünürük.
“React”də “Client-Side Rendering” (CSR) haqqında kısa bir öhdəlik
“React” onun popülerliyini qazanıbClient-Side Rendering (CSR)Bu model, browser JavaScript-i yükləyir, onu işləyir və bütün UI-yi müştəri üzərində qurur.Bu qasım geliştiricilər üçün interaktivitenin və statusun tam kontrolünü verdi və dinamik single-page applications (SPA-lar) yaratmaq asanlaşdırdı.
Bununla birlikte, CSR dəhşətli kompromislarla gəldi:
- Şirkət
- Yavaş başlanğıc yükü, özellikle mobil və ya pis ağlarda Şirkət
- Content-drived pages üçün SEO Şirkət
- “JavaScript-ə ağır paketlər – az interaktivlik olan saytlar üçün də Şirkət
- HTML yükləndikdən sonra hidrasiya etirazı lazımdır, interaktiv vaxtı gecikdirir Şirkət
Bir müddət, bu kəskinliklər yalnız “bunlar necə idi” idi.Sonra Next.js oyunu dəyişdi.
Next.js SSR və SSG-yə necə gətirdi
Nə vaxtNext.jsXatırladaq ki, “React” üçün birinci sınıf ölkələr olaraq server-side rendering (SSR) və static site generation (SSG) təqdim edilib.
- Şirkət
- SSR-ə görə, saytlar istədiyinə görə xəlq edilə bilər, bu da dinamik içərinin SEO və yükləmə həcmini artırır. Şirkət
- SSG, içərinin dağıtma vaxtında hazırlanmasına imkan verir, bloglar, dokumalar və marketinq saytları üçün mükəmməldir. Şirkət
- İncremental Static Regeneration (ISR) statik saytların dağıtılmasından sonra güncellenməsinə imkan verərək bu qapıya qapı açdı. Şirkət
Bu fleksibilitenin yaradıcılara performans, SEO və geliştiricinin deneyimi arasında daha yaxşı bir balans tapmasına kömək oldu.
Amma SSR və SSG ilə də, hala qalmış bir problem vardı:we were still sending too much JavaScript to the browser- interaktiv olmaq lazım olmayan komponentlər üçün də.
React Server Components (RSC) 2025-ci ildə
Özgürlükdən sonraNext.js 15vəReact 19Yeni bir dövrə girmişik:React Server Components (RSC)Artıq bu, app-ların yaradılmasının əsas hissəsidir.
SSR-dən başqa, hala hidrasiya və JavaScript-i müştərilərə göndərmək lazımdır.RSC allows you to render components on the server — without sending any JavaScript to the browser at allİŞİD
Bu böyük dəyişiklikdir:
- Şirkət
- Komponentlər artıq doğrudan server-side verilərinə qula bilərlər Şirkət
- Statik içkilər hidrasiya ehtiyacı yoxdur Şirkət
- Server və müştərinin komponentlərini tək bir React ağacında birləşdirə bilərsiniz. Şirkət
RSC SSR və SSG-nin yerini dəyişmircomplements them“Qazaxıstan” “Qazaxıstan” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda” “Qazaxıstanda”.
2025-ci ildə, RSC hər bir senior React inqilabının idarə etməsi lazım olan əsas konseptidir.
1. Why React Server Components Were Introduced
React Server komponentləri niyə təqdim edildiReact proqramları daha kompleks olmaqla, sektor onun uğurunun ağırlığını hiss etməyə başladı.Client-Side Rendering (CSR), Server-Side Rendering (SSR) və Static Site Generation (SSG) performanslı web proqramları qurmaq üçün farklı strategiyalar təqdim etdiyinə görə, bunların hər biri ölçüdə daha görünür oldu.
CSR, SSR və SSG
1 İŞİDHydration overhead
SSR və ya SSG ilə də, bir dəfə HTML tarayıcıya çatdıqda, React sayfanı “hidratlaşdırmaq” lazımdır – olay dinləyicilərini bağlamaq, komponentləri yenidən başlatmaq və proqramı memoriada effektiv şəkildə yenidən qurmaq.
2 İŞİDJavaScript bundle bloat
CSR ilə, sayının bir hissəsi olan hər bir komponent, faydalı və API çağırma tarayıcına göndərilməlidir – interaktiv və ya deyil. SSR və SSG bunu az bir qədər azaldır, lakin bunların əksəriyyətinin müştərilərdə davam etdirilməsinə ehtiyacı vardır.
ÜçüncüDisconnected data-fetching logic
VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdugetServerSidePropsvə yagetStaticProps(Və ya applikanınuseEffectVVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu.
RSC-nin hansı problemləri həll etmək üçün yaradılmışdır
React Server Components (RSC) bu artan ağrılı yerlərə basit, lakin güclü bir fikirlə qarşılaşmaq üçün yaradılmışdır:let components execute on the server by default, and only send JavaScript to the browser when it’s absolutely necessaryİŞİD
İŞİDEliminate unnecessary JavaScript
RSC komponentləri server-side göstərməyə imkan verirolmadanƏgər bir komponent interaktivliyə ehtiyac yoxdursa, onun JS paketini hidrat etmək və ya yükləmək lazım deyil.
İŞİDServer-side data access within the component tree
Xatırladaq ki, ABŞ-ın İtaliyada qələbə qazandığını qeyd etmək mümkün deyil.async/awaitDatabaslara, fail sistemlərinə və ya API-lərə doğrudan qulaq asmaq üçün – verileri bir-birinə yerləşdirmək və API-nin yollarına və ya prop borularına ehtiyac yoxdur.
İŞİDImprove rendering efficiency and developer experience
Xatırladaq ki, bu problemin həllində olan problemlər var, lakin bu problemlərin həllində olan problemlər var.
RSC SSR və SSG-nin yerini dəyişmək niyyətində deyil, onları tamamlayır.at the component level, yalnız sayfa düyməsi deyil, serverdə nə çalışmalıdır və browserdə nədir.
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-də Rendering Strategies: RSC vs SSR vs CSRNext.js 15 geliştiricilər üçün standart sayda stratejilərdən uzaq olan bir granular rendering modeli təqdim edir.React Server Components (RSC)Birinciliyində, bu iki modelin necə bənzəyəcəyini bilmək lazımdır:Server-Side Rendering (SSR)vəClient-Side Rendering (CSR)İŞİD
VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir.caching strategySSRİ-nin üstündə inşa edilmişdir.RSC vs SSR vs CSRBu, 2025-ci ildə performans- və arkitektur-bilinçli qərarlar vermək üçün çox vacibdir.
“İnteractive Component” – “İnteractive Component” nə deməkdir?
React və Next.js ilə bağlıinteractive componentBu elementin hər hansırequires client-side JavaScript to respond to user input or browser eventsİŞİD
Bunlar şəklindədir (və bunlarla sınırlı deyil):
- Şirkət
- Click-on status güncellenən düymələr Şirkət
- Validasiya və ya kontrollü girişlər Şirkət
- Dropdowns and modals that shift open/closed - Açılan və / və ya qapanan modallar Şirkət
- Sürücülük və ya hover vasitəsilə aktivləşdirilmiş animasyonlar Şirkət
- Sürücülər, karoserlər, filtrlər Şirkət
- Tədbirdə iştirak edən və ya iştirak edənlərin sayı artıb Şirkət
Əgər bir komponentevent handlersİnternetstateVə ya özünə bağlıdır.DOM or browser APIsBu da müştərinin üzərinə gedir.
Interactivity = Browser-side behavior + JS event listeners + local state.
Bu xüsusiyyətləri anlayışla açıqlamaya kömək edirwhy RSC exists: interaktiv olmağa ehtiyacı olmayan UI parçaları üçün JavaScript göndərilməmək üçün.
Modeli bir gözləyir
Özəl
Özəl
Özəl
RSC (React Server komponentləri)
RSC (React Server komponentləri)
SSR (Server-Side Rendering) – Server-Side Rendering – Server-Side Rendering – Server-Side Rendering – Server-Side Rendering
CSR (Customer-Side Rendering) – müştərinin qələbəsi
Yerləşdirmə
Serverlər
Serverlər
Serverlər
müştərilər
müştərilər
JavaScript browser-ə göndərildi
Bu heç
Eyni zamanda
Eyni zamanda
Hidratasiya lazımdır
Nə
Eyni zamanda
Eyni zamanda
interaktivliyi
interaktivliyi
Nə
Nə
Tamamilə
✅ Full
Tamamilə
Server resurslarına daxil olmaq
Server resurslarına daxil olmaq
Doğrudan
Doğrudan
Tədbirdə iştirak edib
Tədbirdə iştirak edib
İstehsal etmək lazımdır
İstehsal etmək lazımdır
Çıxdığında
Çıxdığında
On Demand və ya Streamed
İstehsal üçün
İnternetdə browser
İdeal iş yeri
İdeal iş yeri
Static və ya data-bound görüntüləri
Static və ya data-bound görüntüləri
Personalized və ya dinamik UI
Personalized və ya dinamik UI
Interactive Streams, Yerli UX
Interactive Streams, Yerli UX
İŞİDThink in Components, Not Just Pages
Next.js-in əvvəlki versiyasındakı Rendering strategiyalarıpage levelSizə vardıgetServerSidePropsvəgetStaticPropsSeçdiyiniz hər hansı bir məsələdəBütün sayfaBu, renderinqin hər şey və ya heç bir şey ola bilmədiyi bir dünyada anlamlı idi – ya statik olaraq yaratma vaxtında, ya da hər bir istefa görə dinamik olaraq.
Lakin onunlaReact Server Components (RSC)və oapp/Next.js 13+-da təqdim edilmiş və 15 ildə standartlaşdırılmış direktoriyadır.rendering is no longer a top-down, one-size-fits-all decision. It becomes a per-component concernBu da yeni fikirlər yaradır.
Düşüncənin yeni yolu: Deklarativ və kompozitif göstəricilik
Bu dəyişiklik bir API-nin dəyişməsindən daha çoxdur, frontendinizin qurğulanmasında konseptual dəyişiklikdir.
Declarative
Orkestr olmaq yerinehowvəNiyəEləcə də bu proseslər manualdır, artıqdeclare what each component does and what it needs — React and Next.js take care of the rest.
Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə
// Server Component
export default async function ProductInfo() {
const product = await db.getProduct(slug)
return <div>{product.name}</div>
}
Bu komponentlər:
- Şirkət
- Runs on the server Şirkət
- JS-i müştərilərə göndərmir Şirkət
- VVD - Hollandiyada bu bölgüyə uyğun gəlmədiyi üçün adətən HDLC/SDLC protokollar dəsti kimi təsvir edilir Şirkət
- “Yalnız bir komponentdir” – başqa abstraksiya ehtiyacı yoxdur Şirkət
UI və onun data ehtiyaclarıdeclarativelyMotorlar isə hər şeyi başa düşürlər.
Composable
İstehsalçılıq sisteminin hər bir hissəsi ayrı-ayrı strategiyaları istifadə edə bilər.on the same pagevəat the same timevəwith minimal overheadİŞİD
Misal olaraq:
// Product page layout
<ProductInfo /> // Server Component (no JS, rendered on the server)
<AddToCartButton /> // Client Component (interactive)
<SimilarProducts /> // Static Component (SSG with revalidation)
Bu elementlər aynı ağacda yaşayır, lakin hər biri:
- Şirkət
- Başqa bir ortamda çalışır (server, müştərilər, bina) Şirkət
- İhtiyacınız olan data və kodları Şirkət
- İnternet üçün lazım olan şey - nə daha, nə də daha az Şirkət
Bunu daha konkret etmək üçün, birminimal demoBu, bir sayda neçə-neçə strategiyaların birlikdə yaşayacağına işarə edir.
3. How React Server Components Work Under the Hood
React Server komponentləri qapının altında necə işləyirReact Server Components (RSC) yalnız yeni bir rendering strategiyasından daha çoxdur, komponent ağaclarının qurulduğu, göstərildiyi və göndərildiyi yolu fundamentaldır.how it works behind the scenesNəticədə bu problemlər statusu, interaktivliyi və data ilə bağlıdır.
Server/Client Sınırı: Split React Ağacı
Xatırladaq ki, ABŞ-ın ABŞ-da işləmək üçün bir neçə ildir ki, bu problemlər həll olunmayıb.component tree is split into two worldsŞirkət :
- Şirkət
- Server komponentləri: Yalnız serverdə işləyir. Browser-a heç vaxt JavaScript göndərilməz. Yerli statusu saxlamaq və ya hadisələr dinləmək mümkün deyil. Statik içərini və server-bound logiki (təkcə, DB Access) göstərmək üçün mükəmməldir. Şirkət
- Müştərilər komponentləri: "user client" ilə açıq-aşkar işarə edilməlidirlər. Bunlar tarayıcı dostu JavaScript-ə kompilasiya edilir və tam interaktiviteyi, lokal statusu, useEffect və hadisələrin işlətilməsini dəstəkləyir. Şirkət
İnşaat və ya sürət vaxtında, React server və client komponentlərinin birlikdə var olduğu bir ağacı qurar və renderdə bunları birləşdirir.
Bu nə"use client"Nəticədə
Eyni zamanda əlavə"use client"Bir neçə ildir ki, bu sistem və bütün sistemlərclient-onlyBu, Next.js İnşaat Pipe Line-i aşağıdakılara yönəldir:
- Şirkət
- Bu dosyayı (ve onun bağımlılıqlarını) ayrı bir JavaScript paketinə kompile edin Şirkət
- Exclude that component from being run on the server Şirkət
- React CSR komponentini hidrasiya logikası ilə klassik bir komponent kimi işləyin Şirkət
This directive acts as a boundary markerBütün komponentlər server-rendered edilə bilər; bütün komponentlər altında browser-də rendered olmalıdır.
Sonraki İçerikİnteraksiya: hər şey bir dəfə deyil
Rəsmi öpüşməstreamingBu barədə “Snickers” jurnalına istinadən xəbər verir ki, “Snickers” jurnalına istinadən xəbər verir ki, bu barədə “Snickers” jurnalına istinadən xəbər verir.streams serialized fragmentsMüştərilər hazırlaşdıqları zaman
- Şirkət
- Server komponentləri mümkün olduğunca dərhal göstərilir və göndərilir Şirkət
- Əsas səhifə > Xəbərlər > Sürücülər > Sürücülər Şirkət
-
Client Components hydrate incrementally, only when they load
Şirkət
Bu necə mümkün olacaq?
VVD - Hollandiyada futbolçu bu adla tanımır, orada VVD daha çox mərkəz-sağı təmsilən edən siyasi partiyanın adının qısaltması kimi bilinir - artıq sorğu-suala ehtiyacı olmayan ulduzdu.
Once the client has loaded the corresponding JS bundle:
- Şirkət
- React lazily loads that specific component - Bu konkret komponentə reaksiya Şirkət
- Şəhidini tapar və onu canlı ağacın içində saxlayır Şirkət
- Hydrates it in isolation, without re-rendering the entire page Şirkət
This design is decoupled and progressive: app sürətli başlayır, və interaktivlik online yavaş-yavaş gəlir.
<Suspense fallback={<LoadingDetails />}>
<ProductDetails /> // Server Component
</Suspense>
<AddToCartButton /> // Client Component (hydrated later)
⚙️ Data Fetching and Code Splitting in RSC
RSC-nin digər “magik” xüsusiyyətləri:you can fetch data directly inside components with async/awaitOna təvəkkül etmədəngetServerSidePropsvəuseEffect, or manual prop-passing.
// Server Component
export default async function Dashboard() {
const stats = await getStatsForUser()
return <StatsView data={stats} />
}
Bu niyə mümkündür?
- Şirkət
- RSC komponentləri müştərinin kompilasiya etdiyi modullar kimi deyil, real server funksiyaları kimi çalışır Şirkət
- They can access databases, internal APIs, file systems, or anything your server runtime supports Şirkət
- Sonuç HTML (JS deyil) göstərilir və müştərilərə yayılır Şirkət
Həmçinin :
- Şirkət
- Hidratasiyaya ehtiyac yoxdur, çünki rezultat statikdir. Şirkət
- İnternetdə heç bir problem yoxdur – bütün problemlər həll olunacaq Şirkət
- Bu komponent üçün heç bir kod müştərilərə göndərilmir - yalnız müştərinin limiti içində yerləşdirilməsin Şirkət
Bu, boilerplate və bundle boyutunu böyük ölçüde azaldır, lakin logiki UI ilə kolloyaldır - uzun müddətli bir React hökmü sonunda ölçüdə gerçekleştirilir.
Qadınlar, uşaqlar və ömrünün səbəbləri
RSC does not support traditional React hooks like useState, useEffectvə yauseRefÇünki onlardon’t run in the browser.
| Şirkət Feature | Şirkət Server Component | Şirkət Klient komponentləri | Şirkət
|---|---|---|
| Şirkət Kullanış | Bu | Şirkət İŞİD |
| Şirkət
| Şirkət
❌ | Şirkət ✅ |
|
| Şirkət ✅ (if static) | Şirkət ✅ |
| Qazaxıstan / Gözlə |
✅ |
❌ (should wrap in effects) |
| Event Managerlər | Şirkət
❌ | İŞİD |
Server komponentləri
Klient komponentləri
Kullanım effektləri
❌
✅
useContext
(Əgər statik olsa)
İŞİD
✅
(efektlər ilə bağlı olmalıdır)
Bu
Server komponentləri
Klient komponentləri
Feature
Özəl
Server komponentləri
Server komponentləri
Klient komponentləri
Klient komponentləri
Kullanış
useState
❌
İŞİD
İŞİD
Kullanım effektləri
✅
Kullanım effektləri
useEffect
Bu
Bu
✅
✅
useContext
(Əgər statik olsa)
İŞİD
useContext
useContext
(Əgər statik olsa)
✅ (if static)
İŞİD
✅
✅
(efektlər ilə bağlı olmalıdır)
async/await
✅
İŞİD
❌ (should wrap in effects)
(efektlər ilə bağlı olmalıdır)
Event handlers
Event handlers
❌
Bu
✅
This enforces a clean separation of responsibilities:
- Server Components: data and layout
- Client Components: interactivity and local state Şirkət
React Server Components are designed to simplify your app. Once you internalize the boundary rules, the streaming model, and async data access, you can compose fast, personalized, and minimal-JS apps with far less boilerplate than before.
4. What’s the Best Practice? Combining RSC, SSR, and SSG
SSC, SSR və SSG kombinasiyası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 compose rendering strategies at the component level, applying the most appropriate approach to each part of the UI.
Bu bölmədə real arhitektonik ehtiyaclara görə bu qərarın alınması üçün bir pratik çərşənbə təqdim edilir.
Başlamaq lazımdır: Bu element nədir?
Ask these four questions for every component:
- İnteraktiv olmaq lazımdırmı? ✅ Evet → Bir müştərinin komponentini istifadə edin Şirkət
- Əsas səhifə / Xəbərlər / Əsas səhifə / Əsas səhifə / Əsas səhifə
- Can it be precomputed or infrequently updated?
- ✅ Yes → Prefer SSG
- O, server verileri alır, lakin heç vaxt müştəridə çalışmaq lazımdır? ✅ Evet → RSC istifadə
Etiket: “Product Page Strategy”
Here’s how a typical e-commerce prduct page might be composed using all three strategies:
komponentləri
komponentləri
Strategiya xəritədə
Növbəti
Reason
Ürün detalları
ProductDetails
RSC
RSC
DB-dən alınmış, interaktivlik yoxdur, hidrate olmaq lazım deyil
Fetched from DB, no interactivity, no need to hydrate
PriceWithPersonalization
Dərslər: Kullanıcının sessiyasına bağlı, dinamik dilə
PriceWithPersonalization
PriceWithPersonalization
SSR
SSR
Dərslər: Kullanıcının sessiyasına bağlı, dinamik dilə
Dərslər: Kullanıcının sessiyasına bağlı, dinamik dilə
Tədbirdə
AddToCartButton
CSR
CSR
Requires interactivity and local state
Requires interactivity and local state
SSG (ISR ilə birlikdə)
RelatedProducts
SSG (ISR ilə birlikdə)
SSG (with ISR)
İnşaat vaxtında cache etmək üçün təhlükəlidir, hər 24 saatda və ya tag-a görə yeniləmək mümkündür
İnşaat vaxtında cache etmək üçün təhlükəlidir, hər 24 saatda və ya tag-a görə yeniləmək mümkündür
StockStatusBanner
Xüsusən dəyişdirilir, TTFB-ni blok etməmək üçün Suspense ilə yayılır
StockStatusBanner
StockStatusBanner
RSC + streaming
Frequently changing, streamed in with Suspense to not block TTFB
Xüsusən dəyişdirilir, TTFB-ni blok etməmək üçün Suspense ilə yayılır
Hər bir komponentjust what it needs to do — no more, no less. No full-page hydration, no global data fetching, no unnecessary JavaScript.
📐 Design Best Practices for Combining Strategies
Server-First işə başlayın
Design every component as a Server Component by default. Opt into interactivity ("use client"Buna görə də testlər daha da azlaşdırılır və testlər daha asanlaşdırılır.
2 - Sınırları açıq tutun
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
Use <Suspense> to stream in non-critical RSCs without blocking the whole page:
<Suspense fallback={<LoadingReviews />}>
<ReviewList />
</Suspense>
✅ 4. Co-locate logic with components
Don’t split data-fetching and UI across files unless necessary. In RSC, you can colocate async logic directly inside the component tree — the framework takes care of the rest.
ISR (Incremental Static Regeneration - İstirahət Statik Regenerasiyası)
For cacheable, high-traffic pages like blog articles or marketing sections, use SSG + revalidation:
export const revalidate = 3600 // regenerate every hour
Sonraki İçerikGünəşdən qaçmaq lazımdır
- Şirkət
- “İstehsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” – “İstihsalçılıq” Şirkət
- Server-dən alınması mümkün olduğunda müştərinin komponentlərindəki verilər. Şirkət
- ❌ Passing too much data between RSC and client components via props — instead, let client components be focused, isolated, and stateful
- SSR-style getServerSideProps logiki RSC-nin içində - heç bir ehtiyac yoxdur, RSC server-side Şirkət
Seçki Ağacı Sumqayıt
Burada asanlaşdırılmış bir rehberimiz var:
Is it interactive?
│
├── Yes → Client Component (CSR)
│
└── No
│
├── Needs per-request data? → SSR
│
├── Can be pre-rendered? → SSG
│
└── Otherwise → RSC
Bir neçə ildir ki, bir neçə ildir ki, bu problemlər həll olunacaq.the decisions become intuitiveİŞİD
Ən yaxşı strateji “Best Rendering Strategy” seçmək deyil.
Bu barədədesigning rendering as an intentional part of your component architecture- Açıqlıq, niyyət və performans düşüncəsi ilə.
6. Looking Ahead: Why RSC Is More Than Just a Feature
Niyə RSC yalnız bir xüsusiyyətdən daha çoxdur?“React Server” komponentləri yalnız performans optimizasiyası və ya DX artırılması deyil.they represent a foundational shift in how we build React applications2019-cu ildə React Hooks kimi, 2025-ci ildə RSCredefining the baseline for frontend architectureİŞİD
RSC Reaktdə binanın psixoloji modeli dəyişir
Tradisional React quruluşu hər zaman bu varsayma üzərində yaradılmışdır:
“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 bu düşüncəyə qadirdir.
RSC ilə soruşursunuz:
- Şirkət
- Hidratasiya prosesi tamamilə keçə bilərmi? Şirkət
- Can this component run purely on the server? Şirkət
- Mən özümdə “Backend Logic” istifadə edə bilərəmmi? Şirkət
Bizi qaytarırthe ability to separate display logic and interactivity cleanly“Qəbələ” və “Qəbələ” ilə deyil,first-class architectural boundariesİŞİD
Artıq “Customer First” deyil.“purpose-first.”
UI-nin hər bir hissəsi ən effektiv olduğu yerdə var – server, client və ya statik.
Ecosystem Shift: Server-First Rendering ilə işləmək
Xatırladaq ki, ABŞ-ın daha geniş bir ekosistemi, daha geniş bir ekosistemi var.server-first rendering renaissanceİŞİD
Frameworklər kimi:
- Şirkət
- “Remix” serverlərin data yükləməsinə və formalaşmasına çox çətindir. Şirkət
- “Astro” “zero-JS” sistemini standart olaraq qəbul edir və yalnız interaktivlıq adalarını göndərir. Şirkət
- Qwik hidratasiyasını ekstremə götürür – açıq-aşkar ehtiyac duyana qədər bütün JS-ləri gecikdirir.
- Next.js 15, RSC və App Router ilə, artıq hər komponentdə renderinq geliştiricilərin deneyiminin orta yerində yerləşdirir. Şirkət
Bu, hamımız hiss etdiyimiz çətin bir həqiqətin yansımasıdır:
Sending less JavaScript is the only way to scale interactivity and performance on the modern web.
React Server Components bu problemə react-native cavabdır – dərin bütünlüklə, ergonomik və istehsal hazırdır.
🔮 What to Expect Next
“React 19” və ekosistemin yetişdirildiyi kimi, gözləmək olar:
- Şirkət
- More granular debugging and profiling tools for RSC trees Şirkət
- Daha yaxşı DevTools bütünlükləri limitləri və hidrasiya vaxtı göstərmək üçün Şirkət
- Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə Şirkət
- Sistemlər, frameworklər və kütləvi sistemlər (örn. RSC-aware UI kits) Şirkət
Bu kitabı sevirdinizmi?
Bu yazı React və Next.js haqqında başqa fikirləşməyə kömək etdiyinizə
Follow me on HackerlərDaha çox divar üçün
HackerlərOr connect with me on LinkedInReact, Architecture və ya RSC migration haqqında danışmaq üçün
LinkedIn
