2025-08-14

NextJS sahifalarni renderlash turlari

Next.js

Ko'pchilik Reactni bilaman, demak Nextni ham bilaman degan tushunchaga ega, lekin bu ba'zi qismlarga to'g'ri kelmaydi, Nextni to'liq funksiyalaridan foydalanmaslik yoki ulardan noto'g'ri foydalanish React > Next holatiga olib kelishi mumkin |

Nextda rendering

SSR - server-side rendering bunda page HTML holatida serverda render bo'ladi, no window, no browser bo'ladi, windowni featurelari DOM actionlarni serverda qo'llay olmaysiz, agar ishlatish kerak bo'ladigan bo'lsa aynan o'sha qismni CSR (Client-Side rendering) ga o'tkazish kerak bo'ladi.

Agar API response vaqti uzoq bo'lsa, serverda renderlash vaqti uzayib ketishi va bu foydalanuvchiga noqulaylik keltirishi mumkin.

SSG - Server-Side Generation build vaqtida tayyor HTML bo'ladi va client kirganda uni serverda prosta o'qib beradi, ya'ni har bir requestda server qo'shimcha renderlash amalga oshimaydi. Asosan faqat static bo'lgan qismlar uchun ishlatiladi, misol uchun saytning about sahifasi, shunaqa qismlarga ajratish uni DB va server bilan performanceni oshiradi, hech qanday API so'rovlar bo'lmaydi, hammasi tayyor HTML ni o'qib olish bilan bo'ladi, Next default renderingda SSG ishlatadi.

SSRdan farqi: SSR har bir requestda build vaqtida generate qilingan HTMLni o'qib beradi, bunda API so'rovlar ketmagandek kurinadi lekin Next backda serverda request yuboradi va yangilangan datani oladi. Bunda esa build vaqtida render qilinga HTML immutable hisoblanadi.

Savol bo'lishi mumkin, build vaqtida render bo'ladigan bo'lsa, biz yangi data bilan update qilmoqchi bo'lsak qayta build qilish kerakmi?

SSG da ha qayta build kerak bo'ladi, lekin Next shu narsani oldini olish uchun ISR (Incremental Static Regeneration) ni ishlab chiqqan

ISR - Incremental Static Regeneration build timeda generate qilinadi va datani revalidate qilish mumkin. Bunga vaqt beradi va shu vaqt ichida NextJS uni qayta build qiladi, misol 1 kunda, o'zgartirish mumkin, bunda build vaqtida generate qilinganligi uchun faqat build timeda APIdan datani olib generate qiladi, keyin qaytib APIga so'rov tashlamaydi revalidate qilinmaguncha.

CSR - Client Side Rendering Bu kuproq dynamic bo'ladigan joylar uchun ishlatiladi, To'liq clientda render bo'ladi. O'zimizni Reactni yo'li :)

PPR - Partial Prerendering (hozircha experimental, 2025-yil) Boshida static build time'da tayyor bo'lgan HTMLni ko'rsatadi bu birinchi yuklanishni tezlashtiradi. keyin dynamic qismlar serverdan steaming qilinadi, Bitta HTTP request orqali ham dynamic ham static content yuklanadi.

Ishlash mexanizmi:

  1. Server build-time’da statik shell tayyorlaydi.
  2. Dinamik komponentlar Suspense ichida bo‘ladi.
  3. Fallback UI ko‘rinadi, shu paytda dynamic qism parallel yuklanadi.
  4. Tayyor bo‘lgach, dynamic qismi sahifaga qo‘shiladi.

Shunday qilib, PPR — bu "bir sahifa = SSG + SSR mix" bo‘lib, tez ochilish + personalization beradi.


*Rendering turlarini noto'g'ri ishlatish sizni projectizni performance'ni pasaytirishi mumkin va yuklanish vaqtini uzaytirishi mumkin. Shuning uchun asosan componentlarni renderlash turlari bo'yicha ajratish muhim.

Hop endi buni qanday qilib aniqlaymiz qanday render bo'lib turganini ? Next projectga npm run build qilganizda qanday render bo'lganini ko'rsatadi

Next.js
2025 · nnolan