“React”ın yeni server komponentləri bloated web apps ölümüdür

ŞirkətSSR (Server-Side Rendering) CSR (Client-Side Rendering) Render Location Server Server Client JavaScript browser-ə göndərilmişdir ❌ None ✅ Yes ✅ Yes Hidratasiya lazımdır ✅ No ✅ Yes ✅ Yes Interactivity ✅ No ✅ Full ✅ Full Access to server resources ✅ Direct ✅ Via getServerSideProps ✅ Get API calls Needs 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 React Server Components (RSC) SSR (Server-Side Rendering) CSR (Client-Side Rendering)ŞirkətServer server müştəriləriŞirkətJavaScript browser-ə göndərilmişdir None ✅ Yes ✅ YesŞirkətƏsas səhifə Əsas səhifəŞirkətƏsas səhifə Əsas səhifəŞirkətƏtraflı xəbərlər Ətraflı xəbərlər Ətraflı xəbərlər Ətraflı xəbərlərŞirkət“Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in”ŞirkətStatik və ya data bağlı görüntülər Kişiselleştirilmiş və ya dinamik UI Interactive flows, local UXŞirkətŞirkət ŞirkətRSC (React Server komponentləri)ŞirkətSSR (Server-Side Rendering) – Server-Side Rendering – Server-Side Rendering – Server-Side Rendering – Server-Side RenderingŞirkətCSR (Customer-Side Rendering) – müştərinin qələbəsiŞirkətŞirkət Şirkət 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 Server server müştəriləriYerləşdirmə Şirkət Serverlər Şirkət JavaScript browser-ə göndərilmişdir None ✅ Yes ✅ YesJavaScript browser-ə göndərildi Bu heç Eyni zamanda Eyni zamanda Əsas səhifə Əsas səhifəHidratasiya lazımdır Nə Eyni zamanda Bir müddət Əsas səhifə Əsas səhifəŞirkət Şirkət Şirkət Tamamilə Ətraflı xəbərlər Ətraflı xəbərlər Ətraflı xəbərlər Ətraflı xəbərlərŞirkət Şirkət Şirkət Şirkət “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”nin “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in “Qəbələ”in”Şirkət On Demand və ya Streamed İstehsal üçün İnternetdə browser Əsas səhifə » Xəbərlər » Dərslər » Dərslər » Dərslər » Dərslər » Dərslər » DərslərŞirkət Şirkət Şirkət Şirkət ŞirkətŞirkətŞirkətŞirkətŞirkətŞirkətŞirkətŞirkət ŞirkətÖzəlŞirkətŞirkət Şirkət ŞirkətŞirkətƏsas səhifəŞirkətŞirkətŞirkət Şirkət Şirkət ŞirkətŞirkət Şirkət Şirkət ŞirkətQazaxıstan / GözləŞirkət Şirkət Event ManagerlərŞirkətŞirkət ŞirkətİŞİD ŞirkətŞirkətÖzəlŞirkətŞirkət Şirkət ŞirkətŞirkət Şirkət Şirkət Əsas səhifəŞirkət Bu Şirkət ŞirkətŞirkət ŞirkətBu Şirkət ŞirkətŞirkət Şirkət Şirkət Şirkət Şirkət Şirkət Şirkət Şirkət ŞirkətQazaxıstan / GözləŞirkət ŞirkətQazaxıstan / Gözlə Event ManagerlərŞirkətBuŞirkətİŞİD Şirkət İŞİD ŞirkətPPP-nin idarə etdiyi superkarlar – bu, artıq çox adi bir hala çevrilib – artıq çox adi bir hala çevrilib. PPP-nin idarə etdiyi superkarlar – bu, artıq çox adi bir hala çevrilib – artıq çox adi bir hala çevrilib.Strateji səbəbləri Strategiya xəritədə Şirkət RSC DB-dən alınmışdır, interaktivlik yoxdur, hidrat etmək lazım deyil Şirkət ŞirkətSSR ŞirkətŞirkət Şirkət AddToCartButton CSR Interaktivite və lokal statusu lazımdırŞirkət Şirkət Şirkət ŞirkətRelated ÜrünlərŞirkətŞirkət Şirkətİ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 Related Ürünlər Şirkət Şirkət ŞirkətRSC və streaming Şirkət RSC və streaming (Ə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 Şirkət Şirkət Şirkət Ş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. Hidratasiya butonluqları: Server-rendered HTML interaktiv bir app (hidratasiya) dönüştürmək performans şoku oldu, özellikle dinamik içəriş artdıqca. 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. İ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. 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ü: 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. 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. React Server Components (RSC) zero JavaScript overhead 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ıb 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ı. Client-Side Rendering (CSR) Bununla birlikte, CSR dəhşətli kompromislarla gəldi: Şirkət Şirkət Şirkət Şirkət Şirkət Yavaş başlanğıc yükü, özellikle mobil və ya pis ağlarda Content-drived pages üçün SEO “JavaScript-ə ağır paketlər – az interaktivlik olan saytlar üçün də HTML yükləndikdən sonra hidrasiya etirazı lazımdır, interaktiv vaxtı gecikdirir 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ə vaxt Xatırladaq ki, “React” üçün birinci sınıf ölkələr olaraq server-side rendering (SSR) və static site generation (SSG) təqdim edilib. Next.js Şirkət Şirkət Şirkət Ş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. SSG, içərinin dağıtma vaxtında hazırlanmasına imkan verir, bloglar, dokumalar və marketinq saytları üçün mükəmməldir. İ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ı. 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ı: - interaktiv olmaq lazım olmayan komponentlər üçün də. we were still sending too much JavaScript to the browser React Server Components (RSC) 2025-ci ildə Özgürlükdən sonra və Yeni bir dövrə girmişik: Artıq bu, app-ların yaradılmasının əsas hissəsidir. Next.js 15 React 19 React Server Components (RSC) SSR-dən başqa, hala hidrasiya və JavaScript-i müştərilərə göndərmək lazımdır. İŞİD RSC allows you to render components on the server — without sending any JavaScript to the browser at all Bu böyük dəyişiklikdir: Şirkət Şirkət Şirkət Şirkət Komponentlər artıq doğrudan server-side verilərinə qula bilərlər Statik içkilər hidrasiya ehtiyacı yoxdur Server və müştərinin komponentlərini tək bir React ağacında birləşdirə bilərsiniz. RSC SSR və SSG-nin yerini dəyişmir “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”. complements them 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 edildi React 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 İŞİD Hydration 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 İŞİD JavaScript 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 ulduzdu və ya (Və ya applikanın 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. getServerSideProps getStaticProps useEffect 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: İŞİD let components execute on the server by default, and only send JavaScript to the browser when it’s absolutely necessary İŞİD Eliminate unnecessary JavaScript RSC komponentləri server-side göstərməyə imkan verir Əgər bir komponent interaktivliyə ehtiyac yoxdursa, onun JS paketini hidrat etmək və ya yükləmək lazım deyil. olmadan İŞİD Server-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. Databaslara, 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. async/await İŞİD Improve 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. , yalnız sayfa düyməsi deyil, serverdə nə çalışmalıdır və browserdə nədir. 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-də Rendering Strategies: RSC vs SSR vs CSR Next.js 15 geliştiricilər üçün standart sayda stratejilərdən uzaq olan bir granular rendering modeli təqdim edir. Birinciliyində, bu iki modelin necə bənzəyəcəyini bilmək lazımdır: və İŞİD React Server Components (RSC) Server-Side Rendering (SSR) Client-Side Rendering (CSR) 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. SSRİ-nin üstündə inşa edilmişdir. Bu, 2025-ci ildə performans- və arkitektur-bilinçli qərarlar vermək üçün çox vacibdir. caching strategy RSC vs SSR vs CSR “İnteractive Component” – “İnteractive Component” nə deməkdir? React və Next.js ilə bağlı Bu elementin hər hansı İŞİD interactive component requires client-side JavaScript to respond to user input or browser events Bunlar şəklindədir (və bunlarla sınırlı deyil): Şirkət Şirkət Şirkət Şirkət Şirkət Şirkət Şirkət Click-on status güncellenən düymələr Validasiya və ya kontrollü girişlər Dropdowns and modals that shift open/closed - Açılan və / və ya qapanan modallar Sürücülük və ya hover vasitəsilə aktivləşdirilmiş animasyonlar Sürücülər, karoserlər, filtrlər Tədbirdə iştirak edən və ya iştirak edənlərin sayı artıb Əgər bir komponent İnternet Və ya özünə bağlıdır. Bu da müştərinin üzərinə gedir. event handlers state DOM or browser APIs Interactivity = Browser-side behavior + JS event listeners + local state. Bu xüsusiyyətləri anlayışla açıqlamaya kömək edir : interaktiv olmağa ehtiyacı olmayan UI parçaları üçün JavaScript göndərilməmək üçün. why RSC exists 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 İŞİD Think in Components, Not Just Pages Next.js-in əvvəlki versiyasındakı Rendering strategiyaları Sizə vardı və Seçdiyiniz hər hansı bir məsələdə Bu, 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. page level getServerSideProps getStaticProps Bütün sayfa Lakin onunla və o Next.js 13+-da təqdim edilmiş və 15 ildə standartlaşdırılmış direktoriyadır. . It becomes a Bu da yeni fikirlər yaradır. React Server Components (RSC) app/ rendering is no longer a top-down, one-size-fits-all decision per-component concern 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 yerine və Eləcə də bu proseslər manualdır, artıq — React and Next.js take care of the rest. how Niyə declare what each component does and what it needs Ə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 {product.name} } Bu komponentlər: Şirkət Şirkət Şirkət Şirkət Şirkət Runs on the server JS-i müştərilərə göndərmir VVD - Hollandiyada bu bölgüyə uyğun gəlmədiyi üçün adətən HDLC/SDLC protokollar dəsti kimi təsvir edilir “Yalnız bir komponentdir” – başqa abstraksiya ehtiyacı yoxdur UI və onun data ehtiyacları Motorlar isə hər şeyi başa düşürlər. declaratively Composable İstehsalçılıq sisteminin hər bir hissəsi ayrı-ayrı strategiyaları istifadə edə bilər. və və İŞİD on the same page at the same time with minimal overhead Misal olaraq: // Product page layout // Server Component (no JS, rendered on the server) // Client Component (interactive) // Static Component (SSG with revalidation) Bu elementlər aynı ağacda yaşayır, lakin hər biri: Şirkət Şirkət Şirkət Şirkət Başqa bir ortamda çalışır (server, müştərilər, bina) İhtiyacınız olan data və kodları İnternet üçün lazım olan şey - nə daha, nə də daha az Bunu daha konkret etmək üçün, bir Bu, bir sayda neçə-neçə strategiyaların birlikdə yaşayacağına işarə edir. minimal demo 3. How React Server Components Work Under the Hood React Server komponentləri qapının altında necə işləyir React 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. Nəticədə bu problemlər statusu, interaktivliyi və data ilə bağlıdır. how it works behind the scenes 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. Şirkət : component tree is split into two worlds Şirkət Ş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. 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. İ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ə Nəticədə "use client" Eyni zamanda əlavə Bir neçə ildir ki, bu sistem və bütün sistemlər Bu, Next.js İnşaat Pipe Line-i aşağıdakılara yönəldir: "use client" client-only Şirkət Şirkət Şirkət Şirkət Bu dosyayı (ve onun bağımlılıqlarını) ayrı bir JavaScript paketinə kompile edin Exclude that component from being run on the server React CSR komponentini hidrasiya logikası ilə klassik bir komponent kimi işləyin This directive acts as a Bütün komponentlər server-rendered edilə bilər; bütün komponentlər altında browser-də rendered olmalıdır. boundary marker Sonraki İçerikİnteraksiya: hər şey bir dəfə deyil Rəsmi öpüşmə Bu 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. Müştərilər hazırlaşdıqları zaman streaming streams serialized fragments Şirkət Şirkət Şirkət Şirkət Server komponentləri mümkün olduğunca dərhal göstərilir və göndərilir Əsas səhifə > Xəbərlər > Sürücülər > Sürücülər Client Components hydrate incrementally, only when they load 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 Şirkət Şirkət Şirkət React lazily loads that specific component - Bu konkret komponentə reaksiya Şəhidini tapar və onu canlı ağacın içində saxlayır Hydrates it in isolation, without re-rendering the entire page This design is : app sürətli başlayır, və interaktivlik online yavaş-yavaş gəlir. decoupled and progressive }> // Server Component // Client Component (hydrated later) ⚙️ Data Fetching and Code Splitting in RSC RSC-nin digər “magik” xüsusiyyətləri: Ona təvəkkül etmədən və , 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 } Bu niyə mümkündür? Şirkət Şirkət Şirkət Şirkət RSC komponentləri müştərinin kompilasiya etdiyi modullar kimi deyil, real server funksiyaları kimi çalışır They can access , or anything your server runtime supports databases, internal APIs, file systems Sonuç HTML (JS deyil) göstərilir və müştərilərə yayılır Həmçinin : Şirkət Şirkət Şirkət Şirkət Hidratasiyaya ehtiyac yoxdur, çünki rezultat statikdir. İnternetdə heç bir problem yoxdur – bütün problemlər həll olunacaq Bu komponent üçün heç bir kod müştərilərə göndərilmir - yalnız müştərinin limiti içində yerləşdirilməsin 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 traditional React hooks like , və ya Çünki onlar . does not support useState useEffect useRef don’t run in the browser Şirkət Feature Şirkət Server Component Şirkət Klient komponentləri Şirkət Kullanış Bu Şirkət İŞİD Şirkət useEffect ❌ Şirkət ✅ useContext Şirkət ✅ (if static) Şirkət ✅ Qazaxıstan / Gözlə ✅ ❌ (should wrap in effects) Event Managerlər ❌ İŞİ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: Şirkət Server Components: data and layout Client Components: interactivity and local state React Server Components are designed to simplify your app. Once you internalize the boundary rules, the streaming model, and async data access, you can with far less boilerplate than before. compose fast, personalized, and minimal-JS apps 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 , applying the most appropriate approach to each part of the UI. compose rendering strategies at the component level 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: Şirkət İnteraktiv olmaq lazımdırmı? ✅ Evet → Bir müştərinin komponentini istifadə edin Ə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 komponent — no more, no less. No full-page hydration, no global data fetching, no unnecessary JavaScript. just what it needs to do 📐 Design Best Practices for Combining Strategies Server-First işə başlayın Design every component as a Server Component by default. Opt into interactivity ( Buna görə də testlər daha da azlaşdırılır və testlər daha asanlaşdırılır. "use client" 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 to stream in non-critical RSCs without blocking the whole page: }> ✅ 4. Co-locate logic with components Don’t split data-fetching and UI across files unless necessary. In RSC, you can colocate logic directly inside the component tree — the framework takes care of the rest. async 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 Şirkət Şirkət Ş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” Server-dən alınması mümkün olduğunda müştərinin komponentlərindəki verilər. ❌ — instead, let client components be focused, isolated, and stateful Passing too much data between RSC and client components via props SSR-style getServerSideProps logiki RSC-nin içində - heç bir ehtiyac yoxdur, RSC server-side 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. İŞİD the decisions become intuitive Ən yaxşı strateji “Best Rendering Strategy” seçmək deyil. Bu barədə - Açıqlıq, niyyət və performans düşüncəsi ilə. designing rendering as an intentional part of your component architecture 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. 2019-cu ildə React Hooks kimi, 2025-ci ildə RSC İŞİD they represent a foundational shift in how we build React applications redefining the baseline for frontend architecture 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 Şirkət Şirkət Şirkət Hidratasiya prosesi tamamilə keçə bilərmi? Can this component run purely on the server? Mən özümdə “Backend Logic” istifadə edə bilərəmmi? Bizi qaytarır “Qəbələ” və “Qəbələ” ilə deyil, İŞİD the ability to separate display logic and interactivity cleanly first-class architectural boundaries 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. İŞİD server-first rendering renaissance Frameworklər kimi: Şirkət Şirkət Şirkət Şirkət “Remix” serverlərin data yükləməsinə və formalaşmasına çox çətindir. “Astro” “zero-JS” sistemini standart olaraq qəbul edir və yalnız interaktivlıq adalarını göndərir. 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. 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 Şirkət Şirkət Şirkət Şirkət More granular for RSC trees debugging and profiling tools Daha yaxşı DevTools bütünlükləri limitləri və hidrasiya vaxtı göstərmək üçün Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə » Əsas səhifə Sistemlər, frameworklər və kütləvi sistemlər (örn. RSC-aware UI kits) Bu kitabı sevirdinizmi? Bu yazı React və Next.js haqqında başqa fikirləşməyə kömək etdiyinizə Daha çox divar üçün Follow me on Hackerlər Hackerlər React, Architecture və ya RSC migration haqqında danışmaq üçün Or connect with me on LinkedIn LinkedIn