Éles üzem: SEO, i18n, cache, hibakövetés

20.1A négy kérdés

20.2SEO: a minimum, ami nélkül nem indulsz

A Nuxt SSR-je azért fontos SEO-szempontból, mert a keresőrobot a kezdeti HTML-t nézi. Minden, ami csak hidratálás után kerül a fejlécbe, valószínűleg nem számít. Ebből az első és legfontosabb szabály:

// pages/termek/[slug].vue
const { data: termek } = await useFetch(`/api/termek/${slug}`)

// kliensen is elérhető, reaktív
useSeoMeta({
  title: () => termek.value?.nev,
  description: () => termek.value?.leiras,
  ogTitle: () => termek.value?.nev,
  ogImage: () => termek.value?.kep,
  twitterCard: 'summary_large_image',
})

A canonical, amit mindenki elront

Egy Nuxt-app ugyanazt a tartalmat elérhetővé teszi /termek/bogre, /termek/bogre/, /termek/bogre?utm_source=hirlevel és — ha elfelejtetted a workers_dev: false-t (17.3) — appnev.subdomain.workers.dev/termek/bogre címen is. A keresőnek meg kell mondani, melyik az igazi.

// nuxt.config.ts — a Nuxt SEO csomag ebből dolgozik
export default defineNuxtConfig({
  site: {
    url: 'https://bolt.hu',
    name: 'Bolt',
  },
})

20.3A Nuxt SEO csomag

A @nuxtjs/seo egy gyűjtőmodul, ami hat kisebbet húz be. Nem kell mind — érdemes tudni, melyik mit ad, hogy dönthess (13. modul szűrője szerint):

20.4OG-kép Workers-en — a WASM-realitás

A dinamikus Open Graph kép (a link megosztásakor megjelenő előnézet) látványos, és a nuxt-og-image Workers-en is működik — de nem ingyen, és érdemes tudatosan dönteni róla.

A képet nem böngésző rajzolja, hanem egy WASM-ra fordított renderelő: a Satori vagy az újabb Takumi. Ezek a bináris modulok bekerülnek a Workered bundle-jébe, ami a 15. modul limitjeit terheli. Emellett futásidőben betűtípusra van szükségük, amit az asset-kötésen keresztül olvasnak be:

// wrangler.jsonc — a fontok betöltéséhez kell az ASSETS binding
{
  "assets": {
    "directory": ".output/public",
    "binding": "ASSETS"
  }
}

// nuxt.config.ts — a WASM-változat kikényszerítése
defineNuxtConfig({
  ogImage: {
    compatibility: { runtime: { resvg: 'wasm' } },
  },
})

20.5i18n: a stratégia, ami később nem cserélhető

A @nuxtjs/i18n négy útvonal-stratégiát kínál, és ez az egyik olyan döntés, amit utólag változtatni fájdalmas: az URL-jeid megváltoznak, ami átirányítási táblát és elveszett keresőrangsort jelent.

// nuxt.config.ts
i18n: {
  locales: [
    { code: 'hu', language: 'hu-HU', file: 'hu.json' },
    { code: 'en', language: 'en-GB', file: 'en.json' },
  ],
  defaultLocale: 'hu',
  strategy: 'prefix_except_default',
  baseUrl: 'https://bolt.hu',      // a hreflang abszolút URL-ekhez kell
  lazy: true,                       // nyelvenként külön chunk
}

Két szabály a hreflangról

A modul automatikusan generálja a hreflang-tageket, ha a fenti konfiguráció megvan — de két dolgot érdemes érteni, mert ezeken bukik el a legtöbb többnyelvű oldal:

• A hivatkozásoknak oda-vissza kell mutatniuk. Minden nyelvi változatnak önmagára is kell hivatkoznia, és minden alternatívára. Ha egy irány hiányzik, a kereső a klasztert megbontja, és a hreflang hatástalan lesz.
• A canonical nem mutathat másik nyelvre. Ez a leggyakoribb hiba: a magyar oldal canonicalje az angolra mutat, mert „az az eredeti”. Ezzel azt üzened, hogy a magyar oldal duplikátum, és a kereső ki fogja hagyni. Minden nyelvi változat önmagára mutasson canonicallel, a nyelvi kapcsolatot pedig a hreflang jelentse be.

20.6Cache-stratégia három rétegben

A cache-elésnek három egymásra épülő rétege van egy Nuxt-appban Workers-en, és a leggyakoribb hiba az, hogy valaki egy rétegben gondolkodik, miközben egy másik dolgozik ellene.

A fejlécek: kinek szól melyik?

// böngészőnek 5 perc, edge-nek 1 óra
setResponseHeader(event, 'Cache-Control', 'public, max-age=300, s-maxage=3600')

A legdrágább hiba az egész tanfolyamban

Van egy csendes védőháló is: a Cloudflare Cache API soha nem cache-el Set-Cookie fejlécet tartalmazó választ (19.6). Ez sok esetben megvéd — de ne erre építs: ha a session-süti már korábban ki lett adva, az adott válaszban nincs Set-Cookie, és a védőháló nem lép működésbe.

// server/middleware/no-cache-auth.ts — öv és nadrágtartó
export default defineEventHandler((event) => {
  const ut = getRequestURL(event).pathname
  if (ut.startsWith('/app') || ut.startsWith('/api/')) {
    setResponseHeader(event, 'Cache-Control', 'private, no-store')
  }
})

20.7Hibakövetés: Sentry Workers-en

A 16. modul hibakeresésről szólt — arról, hogy te hogyan találod meg a hibát. Ez a szakasz arról szól, hogy hogyan tudod meg, hogy van. A Workers Logs (16.8) ehhez kevés: az kereshető napló, nem riasztó rendszer. Egy éles alkalmazáshoz kell valami, ami szól.

npm install @sentry/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],
  runtimeConfig: {
    public: { sentry: { dsn: process.env.NUXT_PUBLIC_SENTRY_DSN } },
  },
  sentry: {
    org: 'sajat-org',
    project: 'bolt',
    authToken: process.env.SENTRY_AUTH_TOKEN,
  },
  sourcemap: { client: 'hidden' },
})

// server/plugins/sentry.ts — a Cloudflare-specifikus rész
import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'

export default defineNitroPlugin(sentryCloudflareNitroPlugin({
  dsn: process.env.NUXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
}))

// wrangler.jsonc — két dolog kell hozzá
{
  "compatibility_flags": ["nodejs_compat"],   // AsyncLocalStorage miatt
  "version_metadata": { "binding": "CF_VERSION_METADATA" }
}

A source map-lánc

Két, egymástól független source map-igényed van, és mindkettőt külön kell megoldani:

A 'hidden' érték azt jelenti, hogy a source map elkészül és feltöltődik a Sentrybe, de a kiszolgált JS-fájlokban nincs rá hivatkozás — vagyis a látogató nem tudja visszafejteni a forrásodat, a hibakövetőd viszont igen.

20.8Megfigyelés: mit nézel, és milyen gyakran

Az eszközök megvannak; a kérdés, hogy mit kezdesz velük. Egy működő ritmus:

20.9Élesindulási ellenőrzőlista

Ez a lista a teljes tanfolyam zárókövei egy helyen. Nem mind vonatkozik minden projektre, de mindegyikre döntést kell hozni — nem elfelejteni.

Biztonság és adat

1. Minden hitelesített útvonalon Cache-Control: private, no-store (20.6).
2. Nincs modul-szintű mutable állapot; a felhasználói adat kérésenként keletkezik (6. modul).
3. A tenant-szűrés kikényszerített, nem konvención alapul (11.7).
4. A session-titok legalább 32 karakter, és minden környezetben más (10. modul).
5. A runtimeConfig publikus ágában nincs olyan, aminek nem szabad kikerülnie (12. modul).
6. Az API-hibák message-e nem szivárog a kliensre (16.9).

Deploy és üzemeltetés

7. A build és a deploy egyetlen scriptben, hogy ne lehessen szétcsúsztatni (17.4).
8. Minden binding minden környezetben szerepel — a bindingok nem öröklődnek (17.3).
9. workers_dev: false, preview_urls: true (17.3).
10. A migrációk bővítés-szűkítés mintát követnek, hogy a rollback működjön (17.10).
11. Füstteszt fut a preview URL ellen a forgalomra állítás előtt (16.6).

Teljesítmény és költség

12. A bundle mérete és az indulási idő mérve, CI-kapuval a limitek 80%-ánál (15. modul).
13. Ami statikussá tehető, statikus — az ingyenes (17.1).
14. A soha nem interaktív komponenseken hydrate-never (15.2).
15. Egy SSR-oldal nem hív 6-nál több külső forrást párhuzamosan (19.5).

Találhatóság

16. site.url beállítva; canonical minden oldalon önmagára mutat (20.2).
17. robots.txt és sitemap a helyén; a staging kizárva az indexelésből (20.3).
18. Többnyelvűségnél az útvonal-stratégia véglegesítve, hreflang oda-vissza mutat (20.5).
19. A meta-adatok a setup-ban készülnek, nem onMounted-ben (20.2).

Megfigyelhetőség

20. observability.enabled bekapcsolva, ésszerű head_sampling_rate-tel (16.8).
21. Mindkét source map-lánc kész: kliens a Sentrynek, szerver a Cloudflare-nek (20.7).
22. Sentry (vagy egyenértékű) beállítva, version_metadata bindinggel (20.7).
23. Van legalább egy riasztás, ami valakinek tényleg szól — és a hibakódra illeszkedik (20.8).
24. A logolás strukturált JSON, nem összefűzött szöveg (16.8).

20.10Ellenőrizd magad