Nuxt 3 SSR & Nitro Architecture
16 mins read
Free Lesson
Fetch server data seamlessly during SSR without hydration mismatch using useFetch and useAsyncData.
Server-Side Data Fetching
<script setup>
// Runs on server during SSR, transfers payload to client seamlessly
const { data: courses, pending, error } = await useFetch('/api/courses')
</script>
<template>
<div v-if="pending">Loading courses...</div>
<div v-else class="grid grid-cols-3">
<div v-for="c in courses" :key="c.id">{{ c.title }}</div>
</div>
</template>