我使用的是strapi和next.js，我一开始可以获取数据，但是当我更改strapi中的数据时，数据没有更新

Question

我正在使用 Strapi 和 next.js，我首先可以获取数据，但是当我更改 Strapi 中的数据时，数据不会更新。当我第一次构建它时，它会获取数据，我更改了 Strapi 中的数据，并且没有在 next.js 中更新，我可以在 Strapi 的本地主机中看到数据更改，但在 next.js 应用程序中看不到数据更改。这是我的 next.js 代码：

页面.tsx

    import Blogs from './components/Blogs';
    import Categories from './components/Categories';
    import Image from 'next/image'
    
    
    async function fetchBlogs(){
      const options = {
        headers : {
    
          Authorization: `Berer ${process.env.STRAPI_API_TOKEN}`
        }
      }
    
    
    try {
     
      const res = await fetch ("http://127.0.0.1:1337/api/blogs?populate=*", options);
      const response = await res.json();
      return response;
    
    } catch (err) {
    
      console.error(err);
    
    }
    }
    
    async function fetchCategories(){
      const options = {
        headers : {
    
          Authorization: `Berer ${process.env.STRAPI_API_TOKEN}`
        }
      }
    
    
    try {
     
      const res = await fetch ("http://127.0.0.1:1337/api/categories", options);
      const response = await res.json();
      return response;
    
    } catch (err) {
    
      console.error(err);
    
    }
    }
    
    export default async function Home() {
      const categories = await fetchCategories();
      const blogs = await fetchBlogs();
    
      return (
       <div> 
        
        <Categories categories={categories} />
        <Blogs blogs={blogs} />
        </div>
    
      );
    
      

}

类别.tsx

"use client";
import Rect from 'react'


const Category = ({cat}: any) => {
    return (

        <div 
        onClick ={() => {}} 
        className = "bg-[#af8533] p-4 rounded-lg shadow-md cursor-pointer"
        >

          {cat.attributes.Title}

        </div> 

    );
};

export default Category

类别.psx

import React from 'react'
import Category from './Category'



    const Categories = ({categories}: any) => {

      return (
        <div className='flex gap-6 mb-8'>
          {categories?.data?.map((category: any) => (
            <div key={category.id}>
              <Category cat={category} />
            </div>
          ))}
        </div>
      );
};

export default Categories;

Answer 1

默认情况下，在 Next.js 中使用

fetch

也会填充缓存，该缓存可重复用于后续请求以优化网络使用。即使后端数据发生变化，Next.js 也会默认先使用缓存，这意味着它将显示之前获取的数据。

有多种方法可以根据事件（例如刷新按钮）或根据时间手动刷新数据。我邀请您阅读文档这里。

基于时间的示例：

fetch('https://...', { next: { revalidate: 3600 } })

手动触发示例：

export default async function Page() {
  const res = await fetch('https://...', { next: { tags: ['collection'] } })
  const data = await res.json()
  // ...
}


// In another file
'use server'
 
import { revalidateTag } from 'next/cache'
 
export default async function action() {
  revalidateTag('collection')
}

或者，如有必要，您可以完全选择退出缓存。

旁注：您拼写错误

Bearer

写作

Berer

。