Engineering Note

Nuxt 3 ni Productionda Masshtablashtirish

Yuqori yuklamali e-commerce platformasini Nuxt 3 ga o'tkazishdan olingan saboqlar. Keshish strategiyalari va xatolarni ishlash.

Nuxt 3 Masshtablashtirish

Eski SPA dan Nuxt 3 ga o'tishda eng katta qiyinchilik sintaksis emas, balki gibrid renderingga o'tishdagi mental model o'zgarishi edi.

Gibrid Muammo

An'anaviy SPA da mijoz hamma narsani bajaradi. Nuxt 3 da siz qaror qabul qilishingiz kerak: nima serverda, nima mijozda va nima ikkalasida ishlaydi.

// Xato: Bu har joyda xavfsiz deb o'ylash
const windowWidth = window.innerWidth // Serverda xato beradi

Biz qat'iy javobgarlikni ajratishni qabul qildik:

  1. Ma'lumotlar Qatlami: DOM ga hech qachon tegmaydigan Composables.
  2. UI Qatlami: Ma'lumotlarni iste'mol qiluvchi komponentlar.
  3. Platforma Qatlami: Muhit farqlarini hal qiluvchi plaginlar.

Keshish Strategiyasi

Biz statik API javoblarini keshish uchun route rules dan foydalandik.

export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { swr: 3600 }
  }
})

Bu bizning TTFB imizni kontent sahifalari uchun 400ms dan 20ms ga kamaytirdi.