SSR

SSR — web sahifaning HTML mazmunini browserda emas, serverda render qilib clientga tayyor document ko‘rinishida yuborish usuli. To‘liq nomi Server-Side Rendering. Browser response’ni olganda asosiy content allaqachon HTML ichida mavjud bo‘ladi.

SSR klassik server template tizimlarida ham, zamonaviy JavaScript frameworklarida ham ishlatiladi. Zamonaviy frameworklarda server renderidan keyin client application sahifani interaktiv holatga o‘tkazishi mumkin.

Request oqimi

Oddiy SSR jarayoni:

1. browser URLga request yuboradi;
2. server route’ni aniqlaydi;
3. kerakli data olinadi;
4. component yoki template HTMLga render qilinadi;
5. HTML browserga yuboriladi;
6. browser documentni ko‘rsatadi;
7. zarur bo‘lsa JavaScript hydration bajaradi.

Har request uchun server render ishlashi yoki cache’dan tayyor HTML qaytishi mumkin.

Tayyor HTML

SSRning asosiy xususiyati — content response source ichida mavjud.

Bu:

• crawler;
• social preview;
• JavaScript sekin qurilma;
• birinchi paint;
• accessibility vositasi

uchun foydali bo‘lishi mumkin.

Biroq CSS, font va data dependency hali render tezligiga ta’sir qiladi.

Template SSR

Klassik backend framework template engine orqali HTML yaratadi.

Masalan:

controller
→ database
→ template
→ HTML response

Har navigatsiya yangi document yuklashi mumkin.

Bunday SSR odatda MPA bilan bog‘liq.

Component-based SSR

JavaScript yoki boshqa component framework serverda component tree’ni HTMLga aylantiradi.

Client ayni component code’ini yuklab hydration bajarishi mumkin.

Shundan keyin route va state SPAga o‘xshash davom etishi mumkin.

Hydration

Hydration server yuborgan statik HTMLni client JavaScript event va state bilan bog‘laydi.

Browser HTMLni qayta to‘liq yaratish o‘rniga mavjud markupni “jonlantiradi”.

Server va client render natijasi mos bo‘lishi kerak.

Aks holda hydration mismatch yuz beradi.

Hydration mismatch

Server va client turli HTML yaratsa framework warning yoki qayta render qilishi mumkin.

Sabablar:

• current time;
• random qiymat;
• browser-only API;
• timezone;
• locale;
• data o‘zgarishi;
• noto‘g‘ri HTML structure.

Deterministik dastlabki render muhim.

Time to First Byte

SSR server data va HTMLni tayyorlaguncha response boshlanmasligi mumkin.

Bu Time to First Byteni oshiradi.

Caching, streaming va data query optimizatsiyasi TTFBni kamaytiradi.

Server juda sekin bo‘lsa tayyor HTMLning foydasi kamayadi.

Streaming SSR

Server butun page tugashini kutmasdan HTML qismlarini oqim bilan yuborishi mumkin.

Masalan:

• shell avval;
• asosiy content keyin;
• sekin component fallback bilan;
• scriptlar bosqichma-bosqich.

Browser erta render boshlaydi.

Streaming server va proxy buffering sozlamalariga bog‘liq.

Data fetching

SSR vaqtida server backend service yoki database’dan data oladi.

Afzalligi:

• private networkga yaqin;
• secret clientga chiqmaydi;
• initial HTML to‘liq.

Kamchiligi:

• ko‘p ketma-ket query;
• har requestda load;
• downstream timeout;
• server availability dependency.

Parallel va cached query ishlatilishi mumkin.

SEO

Crawler tayyor content, heading, title va meta taglarni oladi.

Dynamic route bo‘yicha:

• canonical;
• description;
• Open Graph;
• structured data

serverda yaratilishi mumkin.

SSR noto‘g‘ri SEO structure’ni avtomatik tuzatmaydi.

Personalization

Server cookie va session asosida personalized HTML yaratishi mumkin.

Masalan, user nomi yoki dashboard.

Bunday response umumiy CDN cache’da saqlansa boshqa userga chiqib ketishi mumkin.

Cache policy va Varyga oid behavior ehtiyotkor boshqariladi.

Caching

SSR response quyidagi darajalarda cache qilinishi mumkin:

• component data;
• application cache;
• full page cache;
• reverse proxy;
• CDN;
• browser.

Public va personalized content ajratiladi.

Cache invalidation data freshness talabiga mos bo‘ladi.

Server load

CSRda renderning katta qismi user qurilmasiga yuklanadi.

SSRda server har request uchun render CPU va memory sarflashi mumkin.

High traffic:

• cache;
• autoscaling;
• static generation;
• incremental regeneration;
• streaming;
• edge rendering

orqali boshqariladi.

Security

Server-side code secret va internal APIga kira oladi.

User input template yoki queryga xavfsiz uzatiladi.

SSR HTML escaping XSSga qarshi muhim.

Serverda render qilinadigan component browser va server environment farqini hisobga oladi.

Browser-only API

window, document, localStorage va browser device API’lari serverda mavjud emas.

Component bu API’larni faqat client lifecycle’da chaqiradi.

Universal code environment tekshiruvi bilan yoziladi.

SSR va CSR

SSR initial HTMLni serverda yaratadi.

CSR browser JavaScript orqali UI yaratadi.

Ko‘p frameworklar ikkisini birlashtiradi:

SSR initial page
→ hydration
→ client-side navigation

Bu hybrid model.

SSR va SSG

SSR request vaqtida render qiladi.

SSG build vaqtida HTML yaratadi.

SSR tez-tez o‘zgaradigan yoki personalized contentga mos.

SSG public va kam o‘zgaradigan content uchun server loadini kamaytiradi.

Edge SSR

Server render foydalanuvchiga yaqin edge runtime’da bajarilishi mumkin. Bu network latency’ni kamaytiradi, ammo runtime API, connection va execution vaqti cheklangan bo‘lishi mumkin. Database uzoq regionda qolsa edge renderning foydasi kamayadi.

Selective hydration

Barcha sahifani bir vaqtning o‘zida hydration qilish o‘rniga faqat interaktiv componentlar yoki ko‘rinadigan qismlar faollashtirilishi mumkin. Bu main thread yukini kamaytiradi. Statik content client JavaScriptsiz qoladi.

Render xatosi

Server render xatosi butun response’ni to‘xtatmasligi uchun route yoki component error boundary ishlatiladi. Streaming boshlanganidan keyin HTTP statusni o‘zgartirish imkoniyati cheklanishi mumkin.

Bog‘liq tushunchalar

Server-Side Rendering, Hydration, Streaming SSR, Time to First Byte, CSR, SSG, SPA, MPA, SEO, Web rendering