如何强制Nuxt应用在生产环境重新渲染数据？

1. 排除特定页面的预渲染 #

静态生成模式下，Nuxt会将页面预渲染为静态HTML文件，Hostinger服务器会缓存这些文件，导致新数据无法展示。你可以在nuxt.config.js中配置排除需要实时数据的页面，让它每次从客户端动态获取数据：

export default {
  generate: {
    // 填入需要实时更新的路由，比如/data-list
    exclude: ['/your-dynamic-page']
  }
}

2. 给API请求添加缓存破折号 #

在axios请求中加入时间戳参数，强制浏览器不缓存API响应，确保每次请求都拿到最新数据：

// 在Vuex action或页面的asyncData/fetch方法中
async fetchData({ commit }) {
  const response = await this.$axios.get('/api/your-target-data', {
    params: {
      t: Date.now() // 时间戳参数，避免浏览器缓存旧响应
    }
  });
  commit('SET_LATEST_DATA', response.data);
}

3. 配置Hostinger禁用HTML文件缓存 #

登录Hostinger的h面板，找到Cache Management选项，关闭静态HTML文件的缓存，或者设置极短的缓存过期时间。如果是Apache服务器，还可以在项目根目录添加.htaccess文件，写入缓存控制规则：

<FilesMatch "\.(html|htm)$">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</FilesMatch>

4. 用客户端fetch方法动态拉取数据 #

在页面组件中设置fetchOnServer: false，让数据仅在客户端获取，同时监听路由变化，每次进入页面都重新拉取数据：

export default {
  fetchOnServer: false,
  async fetch() {
    const freshData = await this.$axios.get('/api/your-target-data');
    this.$store.commit('UPDATE_DATA', freshData);
  },
  watch: {
    '$route'() {
      this.fetch(); // 路由切换时重新获取数据
    }
  }
}

5. 定时自动刷新数据（可选） #

如果需要页面自动更新数据，可以在页面挂载后设置定时任务：

export default {
  mounted() {
    // 示例：每60秒刷新一次数据
    setInterval(() => {
      this.$store.dispatch('fetchData');
    }, 60000);
  }
}

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