93-dars

SSR vs CSR

Sizga restoran menyusini olib kelish kerak. Ikki yo'l bor:

• Ofitsiant tayyor menyuni olib keladi — siz darhol o'qiy olasiz. (SSR)
• Sizga bo'sh qog'oz va retsept beriladi, o'zingiz yozib chiqasiz — biroz kutasiz, lekin keyin qog'oz allaqachon sizda, tez varaqlaysiz. (CSR)

SSR = Server-Side Rendering — HTML server tomonida tayyor holda yasaladi. CSR = Client-Side Rendering — HTML brauzerning o'zida, JavaScript orqali yasaladi.

---

1. CSR (masalan, oddiy React ilovasi)

Server sizga deyarli bo'sh HTML yuboradi:

<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>

bundle.js — bu 500KB-1MB hajmdagi JavaScript fayl. Brauzer:

1. Bo'sh sahifani ko'rsatadi (<div id="root"></div> — hech narsa yo'q)
2. bundle.jsni yuklaydi (internet tezligiga bog'liq — sekin bo'lishi mumkin)
3. JS'ni ishga tushiradi
4. JS document.getElementById('root') ichiga HTML'ni o'zi yasab qo'shadi
5. Faqat shundan keyin foydalanuvchi biror narsa ko'radi

---

2. SSR (masalan, Next.js server-side)

Server sizga tayyor HTML yuboradi:

<!DOCTYPE html>
<html>
<body>
  <div id="root">
    <h1>Assalomu alaykum, Bekzod!</h1>
    <p>Sizda 5 ta xabar bor</p>
  </div>
  <script src="bundle.js"></script>
</body>
</html>

Brauzer buni olgan zahoti — darhol matnni ekranga chiqaradi, hech qanday JS kutmasdan. bundle.js — bu yerda ham yuboriladi, lekin u keyinroq, faqat tugmalarni "jonlantirish" (masalan, click ishlashi) uchun kerak bo'ladi.

---

3. Vaqt chizig'i orqali solishtirish

CSR:
0ms -------- HTML keldi (bo'sh) -------- foydalanuvchi HECH NARSA ko'rmaydi
     |
300ms ------ JS (bundle.js) yuklandi -------- hali bo'sh
     |
500ms ------ JS ishga tushdi, DOM yasadi -------- ENDI ko'rinadi

SSR:
0ms -------- HTML keldi (TO'LIQ) -------- foydalanuvchi DARHOL ko'radi
     |
300ms ------ JS yuklanmoqda -------- sahifa ko'rinadi, lekin tugmalar hali ishlamaydi
     |
500ms ------ JS ishga tushdi -------- endi tugmalar ham ishlaydi

Muhim farq: SSR'da foydalanuvchi tezroq biror narsa ko'radi (bu ko'rsatkich First Contentful Paint — FCP deyiladi), lekin sahifa to'liq interaktiv bo'lishi (tugmalar ishlashi) — ikkalasida ham deyarli bir xil vaqt oladi, chunki JS baribir yuklanishi va ishga tushishi kerak.

---

4. Nega SSR kerak — 2 ta aniq sabab

Sabab 1: Qidiruv tizimlari (SEO)

Google botining ishlash tamoyili — u sahifani ochadi va HTML'ni o'qiydi (ba'zan JS'ni ham bajaradi, lekin sekinroq va ishonchsizroq).

CSR'da bot dastlabki HTML'ni o'qisa:

<div id="root"></div>

— hech narsa yo'q, bo'sh. Bot sizning kontentingizni "ko'rmasligi" mumkin.

SSR'da bot darhol to'liq matnni ko'radi — chunki HTML allaqachon tayyor. Shuning uchun blog, onlayn-do'kon kabi "Google orqali topilishi kerak" saytlar uchun SSR muhim.

Sabab 2: Sekin internet/qurilmalar

Agar foydalanuvchida sekin internet bo'lsa, CSR'da u uzoq vaqt bo'sh ekran ko'radi (JS yuklanguncha). SSR'da esa hech bo'lmaganda matnni darhol ko'radi, garchi tugmalar hali ishlamasa ham.

---

5. Nega CSR ham kerak — bekorga ixtiro qilinmagan

• Server yuki kamroq — SSR'da har bir so'rovda server HTML yasashi kerak (bu — protsessor vaqti). CSR'da server faqat statik fayllarni beradi, ishni brauzer qiladi.
• Sahifalar orasida o'tish tez — SPA (Single Page Application)da, bir marta bundle.js yuklangandan keyin, keyingi sahifalarga o'tish server bilan qayta gaplashmasdan, faqat JS orqali, juda tez bo'ladi (masalan, Gmail'da papkalar orasida o'tish — sahifa qayta yuklanmaydi).
• Admin panel, ichki dashboard kabi — SEO kerak bo'lmagan joylarda CSR yetarli va soddaroq.

---

6. Muammo — SSR'ning o'zi ham to'liq yechim emas: Hydration

Diqqat qiling: SSR HTML yuboradi, lekin bu HTML — jonsiz. Tugmani bossangiz, hech narsa bo'lmaydi, chunki unga hali JavaScript "ulanmagan". Buni "jonlantirish" jarayoni — Hydration deyiladi (bu — keyingi mavzumiz bo'ladi, hozircha faqat nomini bilib turing).

SSR HTML keldi → ko'rinadi, lekin O'LIK (click ishlamaydi)
        │
        ▼
JS yuklandi → Hydration boshlandi → React/Vue mavjud HTML'ga "click eventlarini ulaydi"
        │
        ▼
Endi TO'LIQ jonli — click ishlaydi

---

7. V8 va brauzer darajasida — nega bu farq real

CSR'da V8 ichida nima bo'ladi

1. Brauzer bo'sh HTML'ni parse qiladi — DOM tree deyarli bo'sh
2. bundle.js yuklanadi — V8 uni parse qiladi (bu — o'zi vaqt oladi, katta fayl bo'lsa sezilarli)
3. V8 kodni bajaradi: ReactDOM.render(...) chaqiriladi
4. Bu funksiya ichida minglab document.createElement, appendChild chaqiriladi
5. Har bir shu chaqiruv — DOM'ga tegish, ya'ni reflow/repaintga sabab bo'lishi mumkin (agar batch qilinmasa)
6. Faqat shundan keyin — ekranda rasm paydo bo'ladi

SSR'da V8 ichida nima bo'ladi

1. Brauzer to'liq HTML'ni parse qiladi — DOM tree darhol to'liq quriladi (browser'ning HTML parser'i buni V8'dan tashqarida, C++ darajasida, juda tez bajaradi)
2. Ekranda rasm darhol paydo bo'ladi — JS umuman kerak emas bu bosqichda
3. bundle.js fonda yuklanadi, V8 uni parse qiladi
4. Hydration jarayoni ishga tushadi — lekin bu DOM yaratmaydi (u allaqachon bor), faqat mavjud elementlarga event listener'larni "ulaydi" (addEventListener chaqiradi) — bu, yangi DOM yaratishdan ancha arzon operatsiya

Asosiy V8 darajasidagi xulosa: CSR'da butun DOM daraxti JavaScript orqali, dinamik qurilishi kerak — bu ko'p createElement/appendChild chaqiruvi, ko'p reflow. SSR'da DOM daraxti brauzerning tez, ichki HTML parseri orqali quriladi (bu — V8'dan tashqari, alohida, optimallashtirilgan C++ kod), JS faqat keyinroq, tayyor daraxtga "ulanish" uchun ishlatiladi.

---

8. Xulosa jadvali

	CSR	SSR
Server nima yuboradi	Deyarli bo'sh HTML + katta JS	To'liq tayyor HTML
Foydalanuvchi qachon ko'radi	JS yuklanib, ishga tushgandan keyin	Darhol
SEO	Yomon (bot bo'sh HTML ko'radi)	Yaxshi
Server yuki	Kam	Ko'p (har so'rovda HTML yasaydi)
Sahifalar orasida o'tish	Juda tez (server bilan gaplashmaydi)	Sekinroq (har safar serverga so'rov)
Qachon mos	Dashboard, admin panel, ilova-uslubidagi saytlar	Blog, onlayn-do'kon, marketing sayt