Single-Page Application (SPA) — brauzer dastlab bitta asosiy HTML hujjatini yuklab, keyingi sahifa o‘tishlari va interfeys yangilanishlarini JavaScript orqali bajaradigan veb-ilova arxitekturasi. Server odatda ma’lumotni API ko‘rinishida beradi, client router esa URL va ekran holatini boshqaradi. Natijada to‘liq hujjat qayta yuklanmasdan, faqat zarur komponentlar o‘zgaradi.
Ishlash tartibi
Birinchi so‘rov HTML shell, CSS va JavaScript bundle’ni olib keladi. Ilova ishga tushgach API’dan ma’lumot so‘raydi va DOM’ni yangilaydi. Ichki havola bosilganda router History API orqali URL’ni o‘zgartiradi, mos komponentni chiqaradi va kerakli ma’lumotni yuklaydi. Back va forward tugmalari popstate bilan integratsiya qilinadi.
Deep link serverda ham qo‘llab-quvvatlanishi kerak. Foydalanuvchi /products/42 manzilini to‘g‘ridan-to‘g‘ri ochsa, server shu path uchun shell qaytaradi; aks holda 404 yuz beradi. API endpoint va statik asset pathlari fallback qoidasidan chiqarib tashlanadi.
Afzallik va xarajatlar
SPA murakkab interaktiv interfeysda desktop dasturiga yaqin tajriba beradi. Client holati sahifalar orasida saqlanadi, ayrim resurslar bir marta yuklanadi va optimistic update ishlatish osonlashadi. Offline yoki uzilib-qaytadigan tarmoq uchun Service Worker bilan qo‘shimcha imkoniyat yaratiladi.
Biroq boshlang‘ich JavaScript katta bo‘lsa, download, parse va execution vaqt oladi. Sust telefonlarda bundle olinganidan keyin ham interfeys uzoq vaqt javobsiz qolishi mumkin. Code splitting, route-level lazy loading, tree shaking va ishlatilmaydigan dependencylarni olib tashlash muhim. Clientdagi ko‘p kod xotira sarfi va xatolar maydonini oshiradi.
Render strategiyalari
Faqat client-side rendering’da boshlang‘ich HTML mazmuni kam bo‘lishi mumkin. Server-side rendering birinchi ekran HTML’ini serverda tayyorlab, keyin hydration orqali client interaktivligini ulaydi. Static generation oldindan ma’lum sahifalarni build vaqtida yaratadi. Amaliy framework bir ilovaning turli route’lari uchun turli strategiyani birlashtirishi mumkin.
Hydration paytida server va client markup mos kelmasa ogohlantirish, qayta render yoki ko‘rinish sakrashi yuz beradi. Vaqt, tasodifiy qiymat va browser-only API server renderdan ajratiladi. Streaming HTML foydalanuvchiga tayyor qismlarni ertaroq ko‘rsatadi, ammo loading va error boundary dizaynini talab qiladi.
Holat va xavfsizlik
Local UI state, server cache, URL state va global session bir xil omborga majburan joylanmaydi. Filter va pagination URL’da saqlansa havola ulashish hamda back tugmasi tabiiy ishlaydi. Server ma’lumotlari cache’da bo‘lsa invalidation va stale holat boshqariladi. Uzoq yashaydigan tabda memory leak va eskirgan credential hisobga olinadi.
Client kodi foydalanuvchiga ochiq va o‘zgartirilishi mumkin; authorization faqat interfeysda tekshirilmaydi. API har so‘rovda ruxsatni tasdiqlaydi. XSS SPA uchun ayniqsa xavfli, chunki hujumchi token va butun client sessiyasiga kirishi mumkin. HTML kiritish cheklanadi, dependencylar tekshiriladi va Content Security Policy qo‘llanadi.
Accessibility
Route almashganda sahifa to‘liq yuklanmagani uchun fokus, document title va screen reader e’loni avtomatik yangilanmasligi mumkin. Router yangi sahifa sarlavhasini o‘rnatadi, fokusni mantiqiy joyga ko‘chiradi va loading holatini bildiradi. Havolalar haqiqiy <a> elementi bo‘lib, modifier key va yangi tab xulqini saqlashi lozim.
Deployment mosligi
Frontend bundle va backend API bir vaqtda yangilanmasligi mumkin. Yangi client eski endpoint bilan, ochiq qolgan eski tab esa yangi server bilan ishlay olishi uchun contract o‘zgarishlari bosqichma-bosqich joriy qilinadi. Asset fayllari content hash bilan nomlanadi va eski versiya bir muddat saqlanadi; aks holda deployment oralig‘ida lazy-loaded chunk 404 qaytarishi mumkin.
Bog‘liq tushunchalar
Client-side rendering, Client-side routing, History API, Server-side rendering, State management, Service Worker, Web application