CSR

CSR — web interfeysning asosiy HTML mazmunini serverdan tayyor holda olish o‘rniga, browserdagi JavaScript yordamida render qilish usuli. To‘liq nomi Client-Side Rendering. Server ko‘pincha minimal HTML shell, script va static assetlarni yuboradi, keyin browser applicationni ishga tushiradi.

CSR SPA arxitekturasida keng tarqalgan, lekin har client-rendered sahifa to‘liq SPA bo‘lishi shart emas.

Dastlabki oqim

CSR sahifasining odatiy yuklanishi:

1. browser HTML shell oladi;
2. CSS va JavaScript bundle yuklanadi;
3. JavaScript parse va execute qilinadi;
4. application ishga tushadi;
5. API data olinadi;
6. componentlar render qilinadi;
7. event listenerlar ishlay boshlaydi.

Katta bundle yoki sekin qurilma initial contentni kechiktirishi mumkin.

HTML shell

Server yuborgan HTML ko‘pincha minimal root elementga ega:

<div id="app"></div>

JavaScript shu element ichiga UI tree’ni joylashtiradi.

NoScript fallback yoki boshlang‘ich loading state qo‘shilishi mumkin.

JavaScript bundle

Bundle application code, framework va dependencylarni o‘z ichiga oladi.

Performancega:

• bundle hajmi;
• compression;
• parse va compile;
• execution;
• third-party script;
• source map;
• polyfill

ta’sir qiladi.

Faqat download hajmi emas, main threaddagi bajarilish vaqti ham muhim.

API data

CSR UI uchun data’ni browserdan API orqali oladi.

Request:

• fetch;
• XHR;
• GraphQL client;
• WebSocket;
• boshqa transport

orqali bajarilishi mumkin.

Loading, error va empty state clientda ko‘rsatiladi.

Component rendering

Framework state asosida DOMni yangilaydi.

Yondashuvlar:

• virtual DOM;
• fine-grained reactivity;
• compiler-generated update;
• direct DOM.

Render model performance va developer tajribasiga ta’sir qiladi.

Client routing

SPA’da route JavaScript tomonidan boshqariladi.

History API URLni o‘zgartiradi.

Route uchun kerakli component va data yuklanadi.

Server deep linklar uchun HTML shell qaytarishi kerak.

Initial performance

CSR dastlab content ko‘rsatishdan oldin ko‘p ishni browserga yuklaydi.

Sekin telefon yoki zaif CPUda:

• script parse;
• hydration bo‘lmasa ham render;
• API kutish;
• main thread bloklanishi

muammo bo‘lishi mumkin.

Critical UI’ni server yoki static HTML bilan berish hybrid yechim hisoblanadi.

Code splitting

Barcha route code’i bir bundle’da bo‘lmasa, kerakli qism dinamik yuklanadi.

Route-based splitting initial bundle’ni kamaytiradi.

Juda ko‘p mayda chunk esa request soni va dependency waterfall yaratishi mumkin.

Chunk preload va caching bilan muvozanatlanadi.

Loading state

Data va code kelguncha foydalanuvchiga holat ko‘rsatiladi.

Variantlar:

• skeleton;
• progress;
• placeholder;
• oldingi cached data;
• route-level fallback.

Cheksiz spinner xato yoki offline holatini tushuntirmaydi.

SEO

Crawler JavaScriptni bajarishi kerak bo‘lishi mumkin.

Search engine capability va render budgeti farq qiladi.

Public content uchun:

• SSR;
• SSG;
• prerender;
• dynamic renderingga oid tarixiy yondashuvlar;
• yaxshi metadata

qo‘llanishi mumkin.

CSR SEOga mutlaq to‘sqinlik emas, lekin qo‘shimcha talab yaratadi.

Accessibility

JavaScript DOMni yangilaganda:

• focus;
• heading;
• landmark;
• route announcement;
• keyboard;
• error message

boshqarilishi kerak.

To‘liq page reloadda browser avtomatik bajaradigan ayrim behavior SPA navigatsiyada qo‘lda ta’minlanadi.

Security

CSR code va public configuration user browserida ko‘rinadi.

Secret API key yoki private credential bundle ichiga kiritilmaydi.

Authorization serverda bajariladi.

XSS attackerga client state va user sessioni bilan ishlash imkonini berishi mumkin.

Token storage

CSR application bearer token ishlatsa uni qayerda saqlash threat modelga ta’sir qiladi.

localStorage XSSda o‘qilishi mumkin.

HttpOnly cookie JavaScript tomonidan o‘qilmaydi, ammo CSRF va cookie policy hisobga olinadi.

Universal yagona storage yechimi mavjud emas.

Offline va cache

CSR service worker, IndexedDB va query cache bilan offline yoki tez qayta ochilish imkonini olishi mumkin.

Cache server data’sining source of truth emas.

Invalidation va user logoutda tozalash talab qilinadi.

Browser compatibility

CSR application ko‘p browser API va JavaScript feature’ga tayanadi.

Build tool:

• transpilation;
• polyfill;
• module format;
• target browser

ni boshqaradi.

Eski browser uchun katta polyfill zamonaviy userlarga ortiqcha yuk bo‘lishi mumkin.

CSR va SSR

CSR renderni browserda bajaradi.

SSR initial HTMLni serverda yaratadi.

Hybrid model server HTMLidan boshlanib, keyingi navigatsiyani clientda bajarishi mumkin.

Render strategiyasi route bo‘yicha farqlanishi ham mumkin.

CSR va SSG

SSG build vaqtida tayyor HTML beradi.

Keyin JavaScript clientda interaktivlik qo‘shishi mumkin.

Demak statik yaratilgan sahifa keyingi bosqichda CSR elementlariga ega bo‘lishi mumkin.

Monitoring

Client-side errorlar server logida ko‘rinmasligi mumkin.

Kuzatiladi:

• JavaScript exception;
• blank screen;
• route load;
• API failure;
• long task;
• memory;
• real user metric;
• chunk error.

Main thread

CSR JavaScript, style calculation, layout va user eventlari bir xil main threadda raqobat qilishi mumkin. Uzoq task input kechikishi va scrollning qotishiga olib keladi. Katta hisoblash Web Workerga ko‘chirilishi, render ishlari bo‘linishi mumkin.

API versioni

Client bundle user cache’ida uzoq qolishi mumkin. Backend yangi contractga birdan o‘tsa eski client ishlamaydi. API bir muddat backward-compatible bo‘ladi yoki client versioni aniqlanib yangilanish talab qilinadi.

Empty shell

JavaScript bloklangan yoki bundle yuklanmagan holatda minimal HTML faqat bo‘sh root bo‘lib qolishi mumkin. Critical xabar, browser support va recovery matni server HTMLida bo‘lishi mumkin.

Bog‘liq tushunchalar

Client-Side Rendering, JavaScript bundle, SPA, Client routing, API, SSR, SSG, Code splitting, Browser rendering, Web performance