使用Strapi与Next.js修改数据后无法实时更新的解决方案

问题描述 #

用Strapi做后端、Next.js开发前端时，首次构建能正常拉取数据，但在Strapi后台修改内容后，前端始终显示首次构建的旧数据，无法获取更新后的内容。

问题原因 #

Next.js静态生成模式下会默认缓存页面数据，不会主动重新请求后端拉取最新内容，导致数据无法实时同步。

解决方案 #

在fetch请求的配置中添加时间驱动的缓存重新验证，指定缓存失效时长，让Next.js定期重新获取最新数据。

代码示例 #

import React from 'react';
import Blogs from './components/Blogs';
import Categories from './components/Categories';
import Image from 'next/image';

async function fetchBlogs() {
    const options = {
        headers: {
            Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`,
        },
        next: { revalidate: 3600 } // 每3600秒（1小时）重新验证缓存
    };

    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: `Bearer ${process.env.STRAPI_API_TOKEN}`,
        },
        next: { revalidate: 3600 } // 每3600秒（1小时）重新验证缓存
    };

    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>
    );
}

关键说明 #

• next: { revalidate: 3600 }：该配置指定当前请求的缓存有效期为3600秒（1小时），超过时长后，Next.js会在用户下次访问页面时重新请求后端拉取最新数据并更新缓存。
• 可根据业务需求调整revalidate数值，比如设为60表示每1分钟重新验证一次。
• 确保Strapi的API Token配置正确，避免因权限问题导致无法获取最新数据。

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