Nuxt3如何实现SSR服务端渲染

文档：useAsyncData · Nuxt Composables v3

这样实现：

<template>
  <table border>
    <thead>
      <tr>
        <th>id</th>
        <th>title</th>
        <th>body</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in posts" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.body }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="page=page+1">page+1:{{page}}</button>
  <div>status:{{status}}</div>
</template>
<script setup lang="ts">
const page = ref(1)

interface Post {
  id: number
  title: string
  body: string
}

const { data: posts,status } = await useAsyncData(
  'posts',
  () => $fetch<Post[]>('https://jsonplaceholder.typicode.com/posts?_limit=5', {
    params: {
      _page: page.value
    }
  }), {
    watch: [page]
  }
)
</script>
<style>
body {
  background-color: #1a1a1a;
  color: white;
}
</style>