Vue.js: What is the difference between useAsyncData and useLazyFetch in Nuxt 3?

1<script setup>
2// Blocks navigation until resolved
3const { data } = await useAsyncData("posts", () => {
4    return $fetch("/api/posts")
5})
6</script>

1<script setup>
2// Does NOT block navigation
3const { data, pending } = useLazyFetch("/api/posts")
4</script>
5
6<template>
7    <div v-if="pending">Loading...</div>
8    <div v-else>{{ data }}</div>
9</template>