Content not updated

Question

I know this is a stupid question. But please help me. I create a blog using Strapi, but when I change the content in the Strapi admin panel, the content on the site itself is not updated. I read about this on the Internet. There they write to use either revalidate or getServerSideProps. But I don't know how to change this in my code. I tried changing this, but errors immediately appeared in other places.

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([
    await fetchBlogs('filters[Visibility][$eq]=true'),
    await 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];

  // console.log('blogs', 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;

Answer 1

By default, all the fetch requests made in next.js are cached. you can edit your fetch-blogs.js component like below to opt out of caching which will always show latest content on your strapi backend.

fetch-blogs.js

import config from "@/config";

const fetchBlogs = async (params) => {
  const request = await fetch(`${config.api}/api/blogs?populate=*&${params}`, {
    headers: { Authorization: `Bearer ${process.env.API_TOKEN}` },
    cache: "no-store",
  });
  const response = await request.json();
  return response;
};

export default fetchBlogs;

You can read more about caching in Next.Js here