SvelteKit das Full-Stack-Framework für Svelte

import { notFound } from 'next/navigation'

type Article = { title: string; summary: string }

export default async function Page() {
  const response = await fetch('https://cms.example.com/api/article', {
    cache: 'no-store',
  })
  if (response.status === 404) notFound()
  if (!response.ok) throw new Error('Der Inhalt konnte nicht geladen werden.')
  const article: Article = await response.json()

  return <article>
    <h1>{article.title}</h1>
    <p>{article.summary}</p>
  </article>
}

<script setup lang="ts">
type Article = { title: string; summary: string }

const { data: article, error } = await useFetch<Article>(
  'https://cms.example.com/api/article',
  { cache: 'no-store' },
)
if (error.value) {
  throw createError({
    statusCode: error.value.statusCode === 404 ? 404 : 502,
    statusMessage: 'Der Inhalt konnte nicht geladen werden.',
  })
}
if (!article.value) throw createError({ statusCode: 404 })
</script>

<template>
  <article v-if="article">
    <h1>{{ article.title }}</h1>
    <p>{{ article.summary }}</p>
  </article>
</template>

import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types'

type Article = { title: string; summary: string }

export const load: PageServerLoad = async ({ fetch }) => {
  const response = await fetch('https://cms.example.com/api/article', {
    cache: 'no-store',
  })
  if (response.status === 404) error(404, 'Inhalt nicht gefunden.')
  if (!response.ok) error(502, 'Der Inhalt konnte nicht geladen werden.')
  const article: Article = await response.json()
  return { article }
}

<script lang="ts">
import type { PageData } from './$types'
let { data }: { data: PageData } = $props()
</script>

<article>
  <h1>{data.article.title}</h1>
  <p>{data.article.summary}</p>
</article>