+-----------------------------------------------------------------------------------+
|                        SVELTEKIT ZERO-RUNTIME COMPILER MODEL                      |
|                                                                                   |
|  [ TRADITIONAL VIRTUAL DOM FRAMEWORKS (React / Vue) ]                             |
|  * Browser downloads 80 KB - 150 KB framework runtime engine.                     |
|  * Mobile CPU spends 300ms - 800ms parsing V-DOM diffing algorithms.              |
|  * Interaction to Next Paint (INP) spikes during heavy hydration passes.          |
|                                                                                   |
|  [ SVELTEKIT COMPILER ARCHITECTURE (Svelte 5 / Runes) ]                          |
|  * Svelte compiles components into direct DOM manipulation code at build time.    |
|  * Zero virtual DOM runtime shipped to the browser! (<15 KB client overhead).     |
|  * Main thread remains completely unblocked for immediate user interactions.      |
|  * 100% pre-rendered semantic HTML delivered to Googlebot in Wave 1!              |
+-----------------------------------------------------------------------------------+

+-----------------------------------------------------------------------------------+
|                        SVELTEKIT RENDERING CONFIGURATION                          |
|                                                                                   |
|  [ STATIC PRERENDERING: export const prerender = true; ]                          |
|  * HTML generated at build time; cached globally on CDN edge storage.             |
|  * Ideal for blogs, marketing pages, legal policies & documentation.              |
|                                                                                   |
|  [ UNIVERSAL SSR: export const ssr = true; (Default) ]                           |
|  * Server renders HTML dynamically on origin / edge serverless function.          |
|  * Ideal for dynamic product catalogs, real-time search & user portals.          |
|                                                                                   |
|  [ CLIENT-ONLY SPA: export const ssr = false; ]                                   |
|  * Disables server rendering; client browser mounts app.                          |
|  * WARNING: Only use for private /dashboard routes behind user authentication!    |
+-----------------------------------------------------------------------------------+

// src/routes/+layout.ts
export const prerender = true; // Pre-renders all static pages at build time
export const trailingSlash = 'never'; // Enforces consistent canonical URL structure

// src/routes/products/[id]/+page.server.ts
export const prerender = false; // Executes on server per incoming request

<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';

  export let data: PageData;
  const { post, canonicalUrl, ogImageUrl } = data;
</script>

<svelte:head>
  <!-- Primary Search Engine Meta Tags -->
  <title>{post.title} | Acme Svelte Labs</title>
  <meta name="description" content={post.excerpt} />
  <link rel="canonical" href={canonicalUrl} />

  <!-- OpenGraph Social Protocol -->
  <meta property="og:title" content={post.title} />
  <meta property="og:description" content={post.excerpt} />
  <meta property="og:url" content={canonicalUrl} />
  <meta property="og:image" content={ogImageUrl} />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="Acme Svelte Labs" />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={post.title} />
  <meta name="twitter:description" content={post.excerpt} />
  <meta name="twitter:image" content={ogImageUrl} />
</svelte:head>

<article>
  <h1>{post.title}</h1>
  <div>{@html post.contentHtml}</div>
</article>

// src/routes/blog/[slug]/+page.server.ts
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, url }) => {
  const post = await fetchPostBySlug(params.slug);
  if (!post) throw error(404, 'Post Not Found');

  return {
    post,
    canonicalUrl: `${url.origin}/blog/${params.slug}`,
    ogImageUrl: `${url.origin}/images/og/${params.slug}.png`,
  };
};

// src/routes/+layout.ts
export const trailingSlash = 'never'; // Options: 'never' | 'always' | 'ignore'

// src/routes/sitemap.xml/+server.ts
import type { RequestHandler } from './$types';

export const prerender = true;

export const GET: RequestHandler = async ({ url }) => {
  const baseUrl = url.origin;
  const posts = await getAllPublishedPosts();

  const xml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>${baseUrl}</loc>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>${baseUrl}/pricing</loc>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
  </url>
  ${posts
    .map(
      (post) => `
  <url>
    <loc>${baseUrl}/blog/${post.slug}</loc>
    <lastmod>${new Date(post.updatedAt || post.publishedAt).toISOString()}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>`
    )
    .join('')}
</urlset>`;

  return new Response(xml, {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'max-age=0, s-maxage=3600',
    },
  });
};

// src/routes/robots.txt/+server.ts
import type { RequestHandler } from './$types';

export const prerender = true;

export const GET: RequestHandler = async ({ url }) => {
  const robotsTxt = `User-agent: *
Allow: /
Disallow: /api/
Disallow: /dashboard/

User-agent: GPTBot
User-agent: ClaudeBot
User-agent: PerplexityBot
Allow: /
Allow: /blog/

Sitemap: ${url.origin}/sitemap.xml
`;

  return new Response(robotsTxt, {
    headers: {
      'Content-Type': 'text/plain',
      'Cache-Control': 'max-age=0, s-maxage=86400',
    },
  });
};

<!-- src/components/JsonLdArticle.svelte -->
<script lang="ts">
  export let title: string;
  export let description: string;
  export let url: string;
  export let publishedAt: string;
  export let authorName: string;

  const schema = {
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    headline: title,
    description: description,
    mainEntityOfPage: url,
    datePublished: publishedAt,
    author: {
      '@type': 'Person',
      name: authorName,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Acme Svelte Labs',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.png',
      },
    },
  };
</script>

<svelte:head>
  {@html `<script type="application/ld+json">${JSON.stringify(schema)}<\/script>`}
</svelte:head>

+-----------------------------------------------------------------------------------+
|                        SVELTEKIT I18N ROUTING ARCHITECTURE                        |
|                                                                                   |
|  src/routes/[[lang]]/+layout.server.ts (Language Param Matcher & Context)         |
|        │                                                                          |
|        ├── src/routes/[[lang]]/blog/[slug]/+page.svelte                           |
|        │     └── Injects: <link rel="alternate" hreflang="de" href="..." />       |
|        │                                                                          |
|        └── hooks.server.ts (Detects Accept-Language Header & Handles 302 Redirect)|
+-----------------------------------------------------------------------------------+

<!-- src/routes/[[lang]]/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
  const { post, canonicalUrl, alternates } = data;
</script>

<svelte:head>
  <title>{post.title}</title>
  <link rel="canonical" href={canonicalUrl} />
  
  <!-- Alternate Language Tags -->
  {#each alternates as alt}
    <link rel="alternate" hreflang={alt.lang} href={alt.url} />
  {/each}
  <link rel="alternate" hreflang="x-default" href={alternates[0].url} />
</svelte:head>

// src/routes/og/[slug].png/+server.ts
import type { RequestHandler } from './$types';
import satori from 'satori';
import { Resvg } from '@resvg/resvg-js';

export const prerender = true;

export const GET: RequestHandler = async ({ params }) => {
  const post = await fetchPostBySlug(params.slug);

  const svg = await satori(
    {
      type: 'div',
      props: {
        style: {
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          height: '100%',
          backgroundColor: '#0f172a',
          color: '#ffffff',
          padding: '80px',
          justifyContent: 'space-between',
          fontFamily: 'sans-serif',
        },
        children: [
          {
            type: 'div',
            props: {
              style: { fontSize: '28px', color: '#38bdf8', fontWeight: 'bold' },
              children: 'ACME SVELTE LABS',
            },
          },
          {
            type: 'div',
            props: {
              style: { fontSize: '56px', fontWeight: 'bold', lineHeight: 1.2 },
              children: post?.title || 'SvelteKit Technical SEO Architecture',
            },
          },
          {
            type: 'div',
            props: {
              style: { fontSize: '20px', color: '#94a3b8' },
              children: `Zero-JS Compiler Architecture • Published ${post?.publishedAt || '2026'}`,
            },
          },
        ],
      },
    },
    {
      width: 1200,
      height: 630,
      fonts: [],
    }
  );

  const resvg = new Resvg(svg);
  const pngBuffer = resvg.render().asPng();

  return new Response(pngBuffer, {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'public, max-age=31536000, immutable',
    },
  });
};

+-----------------------------------------------------------------------------------+
|                        BUGVISO SVELTEKIT AUDITING PIPELINE                        |
|                                                                                   |
|  [ SvelteKit App Submitted ] ──> [ FastAPI + ARQ Redis Worker Cluster ]           |
|                                         │                                         |
|                                         ▼                                         |
|  [ PLAYWRIGHT HEADLESS CHROMIUM ] ────> [ 4 PARALLEL AUDITING ENGINES ]           |
|  * Discovers client-hydrated <a> links  ├── 1. Code Coverage: Unused JS/CSS Bytes |
|  * Re-loads under Slow/Fast 3G profiles ├── 2. Speed: LCP, CLS & Sub-20ms INP     |
|  * Extracts Schema.org JSON-LD objects  ├── 3. SEO: Canonical & Trailing Slash QA |
|  * Validates RFC-9309 robots.txt rules └── 4. GEO: /llms.txt & AI Citability Linter|
|                                         │                                         |
|                                         ▼                                         |
|  [ ACTIONABLE DEVELOPER REMEDIATION PLAYBOOK + BRANDED REPORTLAB PDF DELIVERABLES]|
+-----------------------------------------------------------------------------------+