nuxt3 开启预渲染，怎么重新请求数据再渲染

Question

nuxt3 预渲染
页面数据是接口根据多语言返回的，开启预渲染后，切换语言不能重新获取对应新语言的数据，有什么办法解决吗？

export default defineNuxtConfig({
  routeRules: {
    '/home/index': {
      prerender: true // 开启预渲染
    },
    ...
  },
})

Answer 1

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

在使用Nuxt 3进行预渲染时，处理多语言数据确实是一个挑战。预渲染是在构建时进行的，而多语言数据需要在运行时根据用户选择的语言动态获取。为了在切换语言时重新获取数据并重新渲染页面，你可以采用以下方法：

解决方案：结合使用预渲染和动态路由

1. 使用预渲染生成基础页面结构：对于你的/home/index路由开启预渲染，生成基础页面结构。
2. 动态获取数据：在客户端（浏览器）使用JavaScript（例如使用asyncData或fetch）动态获取接口数据，并填充到页面中。
3. 处理多语言数据：根据用户选择的语言，重新请求接口并获取对应的新语言数据。

步骤：

步骤一：预渲染基础页面结构

你的nuxtconfig.js中的配置是正确的，你已经为/home/index路由开启了预渲染。

步骤二：动态获取数据并填充到页面

在你的组件中（例如Home.vue），你可以使用asyncData或fetch来获取数据，并把它填充到页面中。假设你使用的是asyncData：

<template>
  <!-- 你的模板代码 -->
</template>

<script>
export default {
  async asyncData({ store, route }) {
    // 获取语言参数，假设它在query中或者从store中获取
    const lang = ...; // 获取语言逻辑代码
    const data = await store.dispatch('fetchData', lang); // 使用你的逻辑请求数据
    return { data }; // 返回的数据可以在页面中直接使用
  },
  // 其他代码...
}
</script>

步骤三：处理多语言数据重新请求问题

当用户在前端切换语言时，你可以监听这个事件，然后重新请求数据。假设你使用了Vue的路由守卫或者事件监听器来检测语言切换事件：

// 在你的组件内或全局路由守卫中监听语言切换事件
watch: {
  '$route': function() { // 或者其他监听逻辑来检测语言切换事件
    // 重新请求数据逻辑代码...
  }
},
methods: {
  async fetchDataForNewLang() { // 重新请求数据的函数实现... }
}

当用户切换语言时，调用fetchDataForNewLang方法来重新请求数据。然后，你可以使用Vue的响应式机制来更新数据并触发页面的重新渲染。这样，页面会根据新语言的数据进行更新。同时，由于你已经进行了预渲染，页面的基础结构已经存在，所以更新会更快。

注意事项：

• 确保你的服务器支持预渲染和动态路由的组合。预渲染是在构建时进行的，而动态路由是在运行时请求的。服务器需要根据请求的不同阶段（构建或运行时）返回相应的内容。
• 优化你的接口和数据处理逻辑以应对频繁的数据请求（尤其是在语言切换时）。这可能会涉及到缓存策略、接口性能优化等。