2 min čtení

Nuxt / Vue: kde začať a ako vybrať architektúru

Úvodné rozhodnutia medzi SSR, SSG a SPA režimom pre reálne projekty.

Ak na začiatku zvolíš zlý režim renderovania, problém sa ukáže až po nasadení: slabé SEO, pomalý TTFB alebo zbytočne drahá infra. Cieľ je zvoliť režim podľa produktu, nie podľa trendu.

Oficiálne zdroje:

Čo si z článku odnesieš

  • ako rozhodnúť medzi SSR, SSG a SPA podľa typu stránky
  • čo dať do routeRules, aby sa dalo kombinovať viac režimov v jednom projekte
  • ako sa vyhnúť drahému refaktoru po prvých mesiacoch

Praktický postup

  1. Rozdeľ stránky na 3 skupiny: SEO kritické, interné po prihlásení, a hybridné (napr. katalóg + detail).
  2. Pre SEO stránky preferuj SSR alebo prerender, pre interné dashboardy často stačí SPA režim.
  3. Nastav routeRules, aby mal každý typ stránky jasné pravidlo cachovania a renderu.
  4. Výsledok over na reálnych URL, nie iba v lokálnom dev režime.

Príklad z praxe

TS
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/blog/**': { swr: 300 },
    '/app/**': { ssr: false }
  }
})

Ako overíš, že je to správne

  • Skontroluj HTML výstup v page source pre SEO URL.
  • Zmeraj TTFB a LCP aspoň na homepage a detaile článku.
  • Spusť npm run lint, npm run typecheck, npm run test, npm run build.

Najčastejšie chyby

  • globálne zapnuté SSR bez rozlíšenia stránok,
  • prerender pre stránky, ktoré sú vysoko personalizované,
  • chýbajúca dokumentácia, prečo bol zvolený konkrétny režim.

Mini úloha

  1. Vyber 5 URL z projektu a priraď im SSR/SSG/SPA režim s odôvodnením.
  2. Doplň routeRules minimálne pre dve skupiny stránok.
  3. Zapíš rozhodnutie do README alebo ADR.

Čo bude ďalej

V ďalšom článku: Štruktúra Nuxt/Vue projektu bez chaosu.

Předchozí článekReact vs Next.js: kedy použiť čoNásledující článekDocker CLI základy: image vs container bez chaosu
Zpět na seznam článků