Nuxt'da SSR qanday ishlaydi?

Savol

Nuxt'da server tomonida rendering (SSR) qanday ishlaydi?

Qisqa javob

SSR paytida server Vue-ilovasini bajaradi va har bir so'rov uchun tayyor HTML generatsiya qiladi. Brauzer darhol chizilgan sahifani oladi, so'ngra Vue uni klientda "gidratatsiya" qilib, interaktiv holga keltiradi.

Batafsil javob

Nuxt'ning standart rejimi — universal rendering: komponentlarning bir xil kodi ham serverda (birinchi renderlash uchun), ham klientda (keyingi interaktivlik va sahifalar orasidagi o'tishlar uchun) bajariladi.

Sahifa so'rovi bosqichlari:

1. Server komponentlarni bajaradi, jumladan useAsyncData/useFetch, va HTML quradi.
2. Serverda yuklangan ma'lumotlar payloadga serializatsiya qilinadi va HTML ichiga joylashtiriladi.
3. Brauzer tayyor HTML oladi — foydalanuvchi JS yuklanishidan oldin, kontentni darhol ko'radi.
4. Klientda Vue "gidratatsiya" qilinadi: allaqachon chizilgan DOM va payload'dan qayta foydalanadi (takroriy so'rovlar o'rniga), voqea ishlovchilarini bog'laydi.

SSR'ning afzalliklari: tez First Contentful Paint, SEO/ijtimoiy tarmoqlarning to'g'ri ishlashi (kraulerlar tayyor HTML'ni ko'radi), sekin qurilmalarda yaxshiroq — og'ir ish serverda bajarilgan.

Kamchiliklari: serverga yuklama, ham Node.js'da, ham brauzerda ishlaydigan kod yozish zarurati (serverda window/documentga to'g'ridan-to'g'ri kirish yo'q).

Misol

<script setup>
// Birinchi yuklanishda serverda bajariladi,
// klient tomonidagi navigatsiyada ma'lumotlar payload'da allaqachon bor — qayta so'rov shart emas
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)
</script>

Qo'shimcha savollar

• Gidratatsiya nima va agar server hamda klient HTML'lari mos kelmasa (hydration mismatch) nima bo'ladi?
• SSR kontekstida useFetch oddiy fetchdan nimasi bilan farq qiladi?
• Serverda renderlanadigan komponentda windowga xavfsiz qanday murojaat qilinadi?