求助：Strapi博客后台改内容后网站未更新，适配revalidate遇报错

我用Strapi搭建了博客，但在Strapi管理面板修改内容后，网站前端的内容并未同步更新。查资料得知需要用revalidate或getServerSideProps解决，但不知道怎么在现有代码里修改，尝试调整后其他部分直接报错。相关代码如下：

blog/page.jsx #

'use server'

import React from 'react'
import Card from "@/components/Card"
import config from '@/config'
import fetchBlogs from "@/helpers/fetch-blogs"

const Blog = async () => {
  const [ visibilityBlogs, blogs ] = await Promise.all([
    fetchBlogs('filters[Visibility][$eq]=true'),
    fetchBlogs('filters[Visibility][$eq]=false')
  ]);

  return (
    <>
        <div className='main'>

            {visibilityBlogs.data.map(visibilityBlog => (
                <Card
                    key={visibilityBlog.attributes.id} 
                    label={visibilityBlog.attributes.Category} 
                    title={visibilityBlog.attributes.Title} 
                    summary={visibilityBlog.attributes.Summary}
                    date={visibilityBlog.attributes.Date}
                    href={`/blog/${visibilityBlog.attributes.Link}`}
                    imgSrc={`${visibilityBlog.attributes.ImageBig.data.attributes.url}`}
                    imgAlt='Избранное' 
                    className="mt-4"
                />
            ))}

            <div className='grid max-md:grid-cols-1 max-xl:grid-cols-2 grid-cols-3 gap-4 mt-4'>
            {blogs.data.map(blog => (
                <Card
                    key={blog.attributes.id} 
                    label={blog.attributes.Category} 
                    title={blog.attributes.Title} 
                    summary={blog.attributes.Summary}
                    date={blog.attributes.Date} 
                    href={`/blog/${blog.attributes.Link}`}
                    imgSrc={`${blog.attributes.ImageAvatar.data.attributes.url}`}
                    imgAlt='Миниатюра' 
                    className=""
                />
            ))}
            </div>
        </div>
    </>
  )
}

export default Blog;

blog/[slug]/page.jsx #

'use server'

import React from 'react'
import getCategoryColor from '@/helpers/get-category-color';
import Image from 'next/image';
import config from '@/config'
import fetchBlogs from "@/helpers/fetch-blogs"
import MarkdownIt from "markdown-it"
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { notFound } from "next/navigation";

const BlogDetails = async (props) => {
  
  const blogs = await fetchBlogs(`filters[Link][$eq]=${props.params.slug}`)

  if (!blogs || blogs.data === null || blogs.data.length === 0) {
    notFound();
  }

  const blog = blogs.data[0];

  const md = MarkdownIt({
    html: true
  });
  const result = md.render(blog.attributes.Content);

  return (
    <>
        <div className='main mt-6'>
          <div className='grid grid-cols-[1fr_160px] mb-6 gap-10 items-center'>
            <h2 className='text-4xl'>{blog.attributes.Title}</h2>
            <div id='cardLabel' className={`text-[18px] ${getCategoryColor(blog.attributes.Category)} font-medium justify-center rounded-full flex items-center h-10 justify-self-end min-w-[140px]`}>{blog.attributes.Category}</div>
          </div>

          <div className='flex relative'>
            <Image className='rounded-2xl mb-6' src={`${blog.attributes.ImageBig.data.attributes.url}`} alt="" width={1280} height={387} />
            <div className={`absolute mt-4 ml-4 ${getCategoryColor(blog.attributes.Category)} p-2 flex justify-center items-center rounded-xl backdrop-blur-sm`}>{blog.attributes.Date}</div>
          </div>

          <div className='flex w-full justify-center'>
            <div className='w-9/12 text-justify' dangerouslySetInnerHTML={{__html: result}}></div>
          </div>

          <Link className='back-to-blog rounded-full bg-red-500 hover:bg-red-500/75 s-10 p-3' href="/blog">
              <ArrowLeft />
          </Link>

        </div>
    </>
  )
}

export default BlogDetails;

fetch-blogs.js #

import config from '@/config'

const fetchBlogs = async (params) => {
    const reqOptions = {
        headers: {
            Authorization: `Bearer ${process.env.API_TOKEN}`
        }
    };

    const request = await fetch(`${config.api}/api/blogs?populate=*&${params}`, reqOptions)
    const response = await request.json();

    return response;
    
}

export default fetchBlogs;

解决方案（Next.js App Router 环境） #

你的代码基于Next.js App Router（page.jsx + 'use server'），无需使用旧的getServerSideProps，通过以下两种方式即可解决内容同步问题：

方式1：增量静态再生（ISR）- 定时自动刷新 #

在页面组件中导出revalidate配置，指定页面重新生成的间隔（单位：秒），既保留静态页面的性能优势，又能定期拉取Strapi的最新内容。

修改 blog/page.jsx

在组件末尾添加：

export const revalidate = 60; // 每60秒重新验证一次

修改 blog/[slug]/page.jsx

同样在组件末尾添加：

export const revalidate = 60; // 每60秒重新验证一次

方式2：动态渲染（实时获取最新内容） #

如果需要每次用户访问页面都直接拉取Strapi的最新内容，无需缓存，可以导出dynamic配置为'force-dynamic'，效果等同于旧版的getServerSideProps。

在两个页面组件末尾添加：

export const dynamic = 'force-dynamic';

进阶优化：Strapi Webhook 触发即时刷新 #

若需要修改内容后立即同步前端，可在Strapi后台配置Webhook，当内容更新时调用Next.js的revalidate API手动触发页面重新生成，适合需要即时同步的场景。

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