Nuxt 3组件中SSR调用外部服务的最佳实践及示例问询

是否为最佳实践？ #

是。在Nuxt3中，让组件独立完成服务端数据获取并参与SSR预渲染是完全符合框架设计的最佳实践：

• 组件级数据获取能实现代码复用，避免在页面层重复编写相同的数据请求逻辑
• 数据与组件绑定，实现逻辑隔离，更易维护
• Nuxt3的服务端渲染机制会自动处理组件的服务端数据获取，确保预渲染出包含完整数据的HTML，提升页面加载速度与SEO表现

实现示例 #

下面是一个可运行的组件级服务端数据获取示例，以产品卡片组件为例：

1. 编写组件（components/ProductCard.vue） #

<template>
  <div class="product-card" v-if="product">
    <h3>{{ product.title }}</h3>
    <p>价格: ${{ product.price }}</p>
    <p class="description">{{ product.description }}</p>
  </div>
  <div class="loading" v-else>加载中...</div>
</template>

<script setup>
const props = defineProps({
  productId: {
    type: Number,
    required: true
  }
})

// 服务端获取数据，自动参与SSR预渲染
const { data: product } = await useFetch(`https://fakestoreapi.com/products/${props.productId}`, {
  // 明确指定仅在服务端执行请求（默认已为true，可省略）
  server: true,
  // 设置唯一缓存键，避免相同productId重复请求
  key: `product-${props.productId}`
})
</script>

<style scoped>
.product-card {
  border: 1px solid #eee;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 8px;
}
.description {
  color: #666;
  font-size: 0.9rem;
}
.loading {
  padding: 1rem;
  color: #888;
}
</style>

2. 在页面中引用组件（pages/products.vue） #

<template>
  <div class="products-page">
    <h1>热门产品</h1>
    <ProductCard :product-id="1" />
    <ProductCard :product-id="2" />
    <ProductCard :product-id="3" />
  </div>
</template>

<script setup>
// 自动导入组件（Nuxt3默认支持，也可手动import）
// import ProductCard from '~/components/ProductCard.vue'
</script>

<style scoped>
.products-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
h1 {
  color: #333;
  margin-bottom: 2rem;
}
</style>

关键说明 #

• useFetch是Nuxt3推荐的数据获取组合式API，默认会在服务端执行请求，并将获取到的数据序列化后传递给客户端，避免客户端重复请求
• key参数用于缓存数据，相同key的请求会复用已有结果，提升服务端性能
• 组件中的数据会在服务端渲染阶段注入到HTML中，客户端接收到的是包含完整产品信息的预渲染页面，无需等待客户端请求完成即可展示内容

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