Nuxt3与Pinia：SSR阶段初始数据为何无法加载？

你的问题核心在于SSR阶段没有等待异步数据获取完成就渲染组件，同时缺少Nuxt对Pinia状态的脱水（dehydrate）处理，导致禁用JavaScript时客户端无法拿到SSR阶段获取的数据。

Pinia本身支持SSR，但需要结合Nuxt的SSR数据获取机制来确保数据在渲染前加载完成，并将状态传递给客户端。

具体问题点 #

1. 在Comments.vue的setup中直接调用了异步action sortByNewest，但没有等待它执行完成。SSR渲染时这个异步请求还没返回，所以组件渲染的是空数组。
2. 没有使用Nuxt提供的useAsyncData来管理SSR数据获取，导致Pinia的状态无法被Nuxt序列化（脱水）到客户端，禁用JS时客户端无法恢复初始状态。

修复步骤 #

1. 修改Comments.vue，用useAsyncData包裹异步操作 #

useAsyncData是Nuxt专门用于SSR数据获取的工具，它会自动处理数据的获取、状态脱水和客户端恢复：

<template>
  <section>
        <CommentsList :comments="commentStore.comments" />
  </section>
</template>

<script setup>
import { useCommentStore } from '@/stores/comment'

const route = useRoute()
const selected = ref('newest')

const commentStore = useCommentStore()

// 用useAsyncData确保SSR阶段等待数据加载完成
// 第一个参数是唯一key，用于缓存和状态恢复
await useAsyncData(`comments-${route.params.id}`, () => {
  return commentStore.sortByNewest(route.params.id)
})
</script>

2. 确保Pinia在Nuxt中正确配置 #

检查nuxt.config.ts是否安装并配置了@pinia/nuxt模块，这是Pinia支持Nuxt SSR的必要条件：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  // 可选：自动导入Pinia相关API
  pinia: {
    autoImports: [
      'defineStore',
      ['defineStore', 'definePiniaStore'],
    ],
  },
})

3. 确认Store中的异步请求处理正确 #

你的sortByNewest action使用了Nuxt的$fetch，它会自动处理SSR和客户端的请求差异，这部分无需修改，可额外返回数据让useAsyncData更好地跟踪状态：

async sortByNewest(routeParamsId: string) {
  const data = await $fetch(`/api/comments/newest/${routeParamsId}`)
  this.comments = data
  return data // 可选：返回数据让useAsyncData跟踪
}

原理说明 #

• SSR阶段：useAsyncData会等待异步请求完成，Pinia的comments状态被填充后，组件才会渲染，此时输出的HTML中包含评论数据。
• 客户端：Nuxt会将SSR阶段获取的Pinia状态序列化到页面中，禁用JS时直接显示SSR生成的HTML；启用JS时，Nuxt会自动恢复Pinia的状态，无需重复请求（除非缓存失效）。

内容的提问来源于stack exchange，提问作者redshift