CSR nima va Nuxt'da uni qachon tanlash kerak?

MiddleNuxt.js #nuxt #csr #spa

Savol

Nuxt kontekstida CSR (Client-Side Rendering) nima va uni SSR o'rniga qachon ishlatish kerak?

Qisqa javob

CSR paytida brauzer deyarli bo'sh HTML va JS-bandlni oladi, u esa allaqachon klientda butun interfeysni quradi. Nuxt'da bu ssr: false orqali yoqiladi — ilova klassik SPA'ga aylanadi.

Batafsil javob

Nuxt renderlash strategiyasini moslashuvchan tanlash imkonini beradi:

Global darajada — nuxt.config.tsdagi ssr: false butun loyihani SPA'ga aylantiradi (masalan, SEO muhim bo'lmagan, avtorizatsiya ortidagi admin-panel uchun).
Aniq nuqtada — <ClientOnly> komponenti kontentni faqat klientda renderlaydi (windowga bog'liq uchinchi tomon kutubxonalari, grafiklar, xaritalar uchun foydali).
Marshrutlar bo'yicha (Nuxt 3.9+) — nuxt.config.tsdagi routeRules faqat aniq sahifalar uchun ssr: false belgilash imkonini beradi, qolganlari uchun SSR saqlanib qoladi.

CSR SSR'dan afzalroq bo'lgan holatlar:

SEO talablarisiz ichki vositalar/dashboardlar.
Birinchi kontentgacha bo'lgan vaqtdan ko'ra, birinchi yuklanishdan keyingi tajriba (SPA'dagidek) muhimroq bo'lgan ilovalar.
Renderlashni klientga ko'chirish orqali serverga yuklamani kamaytirish.

Misol

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/admin/**': { ssr: false } // admin-panel faqat klientda renderlanadi
  }
})

<ClientOnly>
  <HeavyChartLibrary :data="chartData" />
  <template #fallback>
    <USkeleton class="h-64 w-full" />
  </template>
</ClientOnly>

Qo'shimcha savollar

SPA-rejimning SSR bilan solishtirganda qanday afzallik va kamchiliklari bor?
routeRules bitta loyihada SSR/CSR/ISR'ni birlashtirishga qanday yordam beradi?
Nima uchun <ClientOnly> hydration mismatch'ning oldini olish uchun foydali?