Türkçe çeviri: Full-Stack Meta-Frameworks

nasıl sonraki.js, Nuxt, ve Remix ver siz SSR, SSG, ve native metadata APIs -e düzelt SPA SEO sorun — ve neden route configuration hâlâ decides ne aslında ships.

İlk yayın tarihi: 26 Haz 2026 · Son güncelleme: 8 Ağu 2026 · Advanced
Diller

Meta-frameworks (sonraki.js on React, Nuxt on Vue, Remix on React) dır oluşturulmuş on top of base UI libraries -e ekle server rendering, static generation, file-based routing, ve oluşturulmuş-in metadata APIs. şunlar dır primitives, değil bir guarantee: güncel sonraki.js, Nuxt, ve SvelteKit tümü izin ver siz seç server, static, veya client-yalnızca output per route (veya per component boundary), bu nedenle bir project oluşturulmuş ile bir meta-framework -ebilir hâlâ ship bir empty shell on bir route şu opts -e client-yalnızca rendering. seç bir rendering mode şu ships bençerik in initial response (SSR, SSG, veya ISR/hybrid), kullan framework's native metadata API, ve o hâlde verify — per route — şu response aslında contains ne siz expect.

TL;DR — Meta-frameworks (sonraki.js on React, Nuxt on Vue, Remix on React) wrap bir base UI library ile server rendering, static generation, file-based routing, ve bir native metadata API. şunlar dır primitives şu -ebilir kaldır CSR sorun, değil bir guarantee şu onlar yap: rendering mode, metadata delivery, data freshness, error status, hydration, ve production runtime dır tümü decided per route (veya per component boundary) in güncel sonraki.js, Nuxt, SvelteKit, React Router, ve Astro — bu nedenle bir meta-framework project -ebilir hâlâ ship bir route şu behaves tam olarak like bir unrendered SPA. genelinde tümü three named frameworks rendering choices dır aynı shape — SSR (per-istek), SSG (oluştur-time), ve ISR/hybrid (cached + revalidated) — ve kural dır aynı: bençerik şu -meli rank sahiptir -e olmak in response ve survive streaming, hydration, ve production adapter, değil sadece local oluştur.

Library vs. framework — neden distinction önem taşır bençin SEO

bu bir architectural distinction, değil bir Google sıralama category. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: web.dev: Rendering on the Web Evaluate gerçek response HTML, bağlantılar, status codes, ve metadata her biri bençin route. Evidence for this claim Primary standard or official documentation supporting the adjacent article claim. Scope: Protocol semantics and Search behavior are kept separate; no indexing, ranking, or migration-timing guarantee is inferred. Confidence: high · Verified: Google: JavaScript SEO basics

React ve Vue dır rendering libraries. tarafından default onlar hydrate bir near-empty <div id="root"> in browser — canonical client-side-rendering setup, ve exact pattern şu creates JavaScript SEO risk: bençerik, bağlantılar, ve meta tags yapmayın var ol until bundle executes. Google -ebilir render şu, ama siz’ve taken on render queue, statelessness, ve parity problems covered in JavaScript SEO.

bir meta-framework dır layer şu verir siz bir way -e kaldır şu risk. o runs aynı React/Vue components on bir server (veya at oluştur time) ve ships HTML şu zaten contains bençerik — ne zaman bir route dır configured -e yap bu nedenle. mental model worth tutma: ** base library decides nasıl hard sizin SEO dır tarafından default; meta-framework decides nasıl easy düzelt dır, on bir per-route basis siz hâlâ sahip -e uygula ve o hâlde verify.** sonraki.js yapmaz yap React see-able tarafından Google — o yapar React able -e render on server bu nedenle output -ebilir zaten olmak see-able, provided route hasn’t opted back -e client-yalnızca rendering, metadata hasn’t olmuş diverted -e bir client-yalnızca yaz, ve response siz’re checking dır bir bir crawler -irdi aslında al (Nuxt’s route kurallar, SvelteKit’s hierarchical sayfa options, ve sonraki’s Server/Client Component split tümü izin ver bir tek project mix modes route tarafından route veya component tarafından component). Evidence for this claim Rendering mode can be selected per route (or per component boundary) in current meta-frameworks, so one project can mix static, server, client, and hybrid output rather than a single project-wide mode. Scope: Current Nuxt route-rules and SvelteKit hierarchical page-options docs; version/terminology specific. Confidence: high · Verified: Nuxt: Rendering Modes (route rules) SvelteKit: Page options

ne her meta-framework verir siz

three differ in details, ama SEO-relevant feature ayarla dır shared:

  • Server-side rendering (SSR) — components execute on server per istek; response dır complete HTML.
  • Static site generation (SSG) — sayfalar dır pre-rendered -e HTML at oluştur time ve sunulan olarak files (çoğu zaman -den bir CDN).
  • File-based routing — file tree maps -e URLs, bu nedenle her route dır bir gerçek, linkable, crawlable URL tarafından construction (no client-yalnızca route registry).
  • bir native metadata API — bir ilk-party way -e ayarla <title>, meta description, canonical, Open Graph, ve robots tags şu render -e server HTML.
  • Sitemap & robots conventions — bir documented file/route convention bençin generating sitemap.xml ve robots.txt olarak part of oluştur.

şu son two benşaret eder önem taşır -den fazla onlar bak: file-based routing anlamına gelir discovery rides on gerçek URLs, ve bir server-rendered metadata API anlamına gelir sizin title/description/ canonical dır in raw HTML — değil injected client-side nerede Google takes en çok-restrictive directive genelinde raw ve rendered.

three frameworks, compared

sonraki.jsNuxtRemix
Base libraryReactVueReact
Default renderingSSR/SSG (hybrid; per-route)Universal (SSR) tarafından defaultSSR tarafından default
RoutingFile-based (App Router / sayfalar Router)File-based (pages/, app/)Nested routes (now React Router)
Metadata APImetadata export / generateMetadata (App Router); next/head (sayfalar)useSeoMeta() / useHead()meta export per route
Static exportYes (output: 'export')Yes (nuxi generate / prerendering)Via prerendering / SSG adapters
Incremental/hybridISR (revalidate)Route kurallar / ISR-style cachingCache-Control + edge caching
Image optimizationnext/image<NuxtImg> (@nuxt/image)Bring-sizin-kendi / adapter
Status quoen çok popular; App Router defaultVue yanıt -e sonraki.jsMerged -e React Router v7

bir few notes şu yapmayın fit bir table cell:

  • sonraki.js dır en çok widely kullanılan ve App Router’s metadata export yapar server-rendered tags path of least resistance. onun distinctive feature dır ISR — statically generate, o hâlde revalidate on bir timer veya on demand.
  • Nuxt dır “Next.js for Vue” in spirit: SSR tarafından default, plus @nuxtjs/seo module ecosystem (sitemap, robots, schema.org, OG image) şu bundles en çok SEO chores. useSeoMeta() dır idiomatic metadata API.
  • Remix dır server-ilk tarafından design — o leans on web standards (forms, fetch, HTTP caching) yerine bir separate static layer, ve exposes SEO via bir per-route meta export. olarak of React Router v7, Remix’s model dır React Router, bu nedenle yeni çalışır çoğu zaman starts orada.

Rendering modes ve ne her anlamına gelir bençin crawlers

labels repeat genelinde frameworks; SEO consequence dır ne önem taşır:

  • SSR (server-side rendering) — HTML oluşturulmuş per istek. Crawler view: full bençerik in ilk response; freshest data; maliyetler server time per hit. Low SEO risk.
  • SSG (static site generation) — HTML oluşturulmuş once at deploy, sunulan olarak files. Crawler view: fastest olası response, bençerik fully present; data dır olarak fresh olarak sizin son oluştur. Lowest SEO risk.
  • ISR / hybrid (incremental static regeneration, route kurallar, etc.) — sun bir static sayfa, o hâlde regenerate o in background sonra bir revalidate window veya on demand. Crawler view: static-fast ile near-fresh bençerik — ama olmak aware bir crawler -ebilir olmak sunulan bir slightly stale cached sürüm until sonraki revalidation, bu nedenle ayarla window -e match nasıl fast bençerik aslında changes.
  • CSR (client-side rendering) — base-library default meta-framework vardır -e kaçın. Crawler view: empty-ish shell şu depends on rendering. Highest risk; reserve o bençin genuinely non-indexable, behind-login UI.

decision kural dır aynı genelinde tümü three frameworks: anything şu -meli rank -meli ship onun bençerik in initial HTML — bu nedenle SSR, SSG, veya ISR, never pure CSR. full framework-agnostic rendering menu (hydration, edge, streaming, dynamic rendering) lives on JavaScript SEO.

Mode choice dır per route, değil per project

güncel sonraki.js, Nuxt, ve SvelteKit tümü uygula rendering mode at route (veya component) level yerine olarak bir tek project-wide ayarlama — bu nedenle “bu site runs Nuxt” söyler siz nothing hakkında ne herhangi bir bir URL yapar. Nuxt’s route kurallar izin ver bir project mix prerendered, server-rendered (ile caching), ve client-yalnızca (ssr: false) routes in aynı config; SvelteKit’s ssr/csr/prerender sayfa options uygula hierarchically, bu nedenle bir child route -ebilir override ne bir parent layout ayarla; sonraki’s Server/Client Component boundary çalışır aynı way bençinde bir tek route. Weigh her route on:

DimensionStatic (SSG)Server (SSR)Client-yalnızca (CSR)
Freshnessolarak of son oluşturgüncel on her istekgüncel, ama yalnızca sonra JS runs
PersonalizationNone (aynı HTML bençin everyone)Per-istek, server-sideClient-side, sonra hydration
oluştur/server maliyetoluştur-time yalnızcaPer-istek server maliyetLowest server maliyet, highest client maliyet
CacheabilityTrivially cacheable at edgegerektirir explicit cache/revalidate kurallarCacheable shell, değil bençerik
JS dependency bençin bençerikNoneNone bençin initial responsebençerik depends entirely on JS executing
başarısızlık behaviorStale until sonraki oluştur/revalidate5xx veya fallback eğer server istek failsEmpty shell eğer JS fails veya dır blocked

None of bunlar dır bir universal winner — bir route şu changes per signed-in kullanıcı dır bir poor fit bençin SSG regardless of ne rest of project kullanır, ve bir route şu never changes yapmaz ihtiyaç duy per-istek server maliyet.

mistakes şu survive move -e bir meta-framework

bir framework removes default CSR risk; o yapmaz yap siz immune:

  • Opting back -e client-yalnızca rendering — e.g. SvelteKit’s ssr = false (hangi docs söyle “renders an empty ‘shell’ page instead”), veya fetching critical bençerik in bir client-yalnızca effect bu nedenle o’s absent -den server HTML. bu bir per-route veya per-component decision, bu nedenle bir sayfa opting out yapmaz göster up tarafından testing bir farklı sayfa.
  • Skipping metadata API — yazma document.title in bir client effect instead of framework’s server-rendered metadata export, bu nedenle title değildir in raw HTML.
  • Assuming metadata delivery dır bir universal path — güncel sonraki.js (App Router, v16.2,10 docs, son updated 2026-06-23) streams metadata separately bençin dynamically rendered sayfalar tarafından default, injecting o once generateMetadata resolves. o disables şu streaming — sunma metadata in initial <head> instead — bençin crawlers ve bots o detects tarafından kullanıcı agent şu expect metadata up front (sonraki names Twitterbot, Slackbot, ve Bingbot olarak örnekler), configurable via htmlLimitedBots option. Evidence for this claim Metadata delivery is not one universal path: Next.js streams metadata for ordinary clients but disables streaming for detected HTML-limited bots (e.g. Twitterbot, Slackbot, Bingbot), serving it in the initial head instead. Scope: Current Next.js App Router docs (v16.2.10, docs last updated 2026-06-23); bot list and mechanism are configurable and release-specific. Confidence: high · Verified: Next.js: Metadata and OG images (streaming metadata) hangi bots al hangi path, ve whether streaming dır kullanılan at tümü, dır bir sürüm- ve config-specific detail worth checking karşı docs bençin release siz’re on, değil assumed -den framework name.
  • ISR revalidation Windows de uzun — sunma stale prices/stock/bençerik -e crawlers; daha broadly, herhangi bir data/cache/revalidation misconfiguration (yanlış cache key, missed invalidation, bir broken preview/draft state) -ebilir produce missing, stale, veya personalized-looking output hatta on bir route bu otherwise rendered yapğru biçimde.
  • Assuming error component veya bir yönlendirme düzeltmeler HTTP status — once streaming sahiptir begun, ne status code ve headers bir crawler aslında receives on bir direct istek, bir değil-found path, bir thrown server error, bir yönlendirme, veya bir client-navigation başarısızlık gerektirir -e olmak tested separately her biri bençin durum; bir framework’s error boundary yapmaz guarantee herhangi bir bir of them resolves way UI suggests. Evidence for this claim Framework error components and redirects do not guarantee the HTTP status a crawler sees once streaming has begun; test direct requests, not-found paths, thrown errors, redirects, and client-navigation failures separately. Scope: General Google Search crawling guidance, not framework-specific. Confidence: high · Verified: Google: Understand JavaScript SEO basics (status codes, testing)
  • Treating rendered HTML olarak proof of working interactivity — hydration -ebilir hâlâ başarısız ol -den nondeterministic server output, browser-yalnızca APIs kullanılan de early, invalid markup, veya üçüncü-party scripts mutating DOM önce React/Vue attaches; sayfa -ebilir bak complete in view-kaynak ve hâlâ ship broken controls.
  • Sending daha -e client -den framework requires — data passed -den bir server-rendered component -e bir client component sahiptir -e olmak serializable, ve (in sonraki.js) yalnızca environment variables prefixed NEXT_PUBLIC_ ship -e client bundle tarafından default — ama neither protection stops siz -den manually passing secrets veya excess per-kullanıcı data olarak bir prop; initial sayfa olma SEO-visible yapmaz anlamına gel everything serialized -e o dır meant -e olmak kamuya birçık.
  • Trusting bir local oluştur -e predict production output — deployment adapters ve runtimes differ in ne onlar support. sonraki.js’s kendi docs mark static export (output: 'export') olarak “Limited” feature support ve söyle o “yapmaz support sonraki.js features şu require bir server”; Astro’s on-demand rendering “gerektirir bir adapter” matched -e target runtime önce herhangi bir on-demand route çalışır at tümü. Evidence for this claim Deployment target changes what a meta-framework can actually do in production: a Next.js static export does not support features that require a server, and Astro's on-demand rendering requires an adapter matched to the host runtime. Scope: Current Next.js deployment docs (v16.2.10) and Astro rendering-modes docs; adapter support varies by platform and release. Confidence: high · Verified: Next.js: Deploying Astro: On-demand rendering (adapters) Streaming, regional/edge execution, filesystem access, ve cache/revalidation behavior -ebilir tümü differ tarafından ana makine — verify deployed route, değil sadece local oluştur.
  • Comparing direct-load output -e client-navigated output olarak eğer onlar’re aynı test et — bir client-side route transition -ebilir exercise bir farklı metadata-update ve data-fetch path -den bir fresh istek; test et her ikisi, değil sadece bir.
  • Blocking framework’s asset directory (/_next/, /_nuxt/) in robots.txt, hangi breaks hydration ve rendering.
  • Treating “it works in my browser” olarak proof — hâlâ verify ile URL Inspection’s rendered HTML, tam olarak olarak siz -irdi bençin herhangi bir JS site.

nerede -e go sonraki: framework guides

bu sayfa dır concept overview; her framework sahiptir onun kendi deep dive:

  • sonraki.js SEO — sayfalar Router vs App Router, Metadata API ve generateMetadata, next/image ve temel Web Vitals, ISR timing ve nasıl Googlebot sees revalidation, sitemap/robots conventions, ve en çok yaygın sonraki.js SEO mistakes.
  • Nuxt SEO — SSR tarafından default, useSeoMeta() ve useHead(), Nuxt’s rendering modes ve route kurallar, @nuxtjs/seo module ecosystem (sitemap, robots, schema, OG image), ve nasıl Nuxt compares -e plain Vue bençin indexability.
  • Remix SEO — server-ilk rendering, per-route meta export, loaders ve HTTP caching bençin crawlers, React Router v7 merge, ve nasıl Remix differs -den sonraki.js’s static-ilk instincts.

bençin base libraries underneath bunlar frameworks (React SEO, Vue SEO) ve framework-agnostic rendering ve parity kurallar, see JavaScript SEO.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.