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

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

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