nuxt3 页面开启预渲染，服务端的请求还会执行吗？

Question

nuxt3，页面开启了预渲染 prerender: true ，使用 useFetch() 进行的请求，还会执行并更新数据吗？求解？

Answer 1

引自免费微信小程序：皆我百晓生

在 Nuxt 3 中，当你为页面启用预渲染（prerender: true）时，这意味着该页面在服务器渲染时会生成静态的 HTML 页面内容。因此，当你在页面上使用 useFetch() 进行请求时，这些请求会在服务器端执行并获取数据，这些数据会被直接插入到生成的 HTML 中。这就意味着预渲染时服务器端的请求确实会执行。

一旦页面被预渲染并发送到客户端，当用户访问页面时，Vue 实例将会被创建，Vue 会接管页面的状态管理。此时，如果你在组件内部使用 useFetch() 或其他数据获取方法，它们会在客户端重新执行。这是因为预渲染只是一个初始状态的快照，而 Vue 应用在客户端运行时需要实时的数据更新和交互。

简而言之：

• 在服务器端预渲染时，useFetch() 请求会执行并获取数据，这些数据会被插入到生成的 HTML 中。
• 在客户端运行时，任何新的数据获取（如使用 useFetch()）都会在客户端重新执行，并更新页面的状态和数据。

为了更好地理解这一过程，你可以想象预渲染就像是一个照片的快照，而客户端的运行则更像是动态的录像。预渲染捕捉的是某一时刻的静态画面，而客户端运行则提供了实时的交互和更新。

关于代码示例，如果你需要在 Nuxt 3 中使用 useFetch() 并处理预渲染的情况，基本的代码结构如下：

<template>
  <!-- 你的页面内容 -->
</template>

<script>
import { useFetch } from '@nuxtjs/composition-api';

export default {
  setup() {
    const fetchData = useFetch('你的API地址'); // 使用你的API地址替换这里
    const data = fetchData().value; // 在服务器端预渲染时，这将包含从API获取的数据
    // ... 其他逻辑处理和数据更新 ...
  },
};
</script>

在这个例子中，useFetch() 在服务器端预渲染时会执行并获取数据。当页面在客户端运行时，如果数据发生变化或需要更新，useFetch() 会再次执行以获取最新的数据。