Failed to update query page dynamically after deployment, while success locally

[arooe]

Summary

Hello, sir. My Photo list Page updates dynamically in my local machine(localhost), but remain static page (not update dynamically) when deploying to Cloudflare or Netlify.

Would you help me figure out what's wrong with that? Thank you!

My Repo

Here are my code.

photo for display (not updating after deployment)

import CImage from "./image";

type Results = {
  public_id: string,
  width: string,
  height: string,
}

type SearchResult = {
  resources: Results[]
}

export const dynamic = 'force-dynamic';

export default async function GalleryPage() {
  let { resources } = await cloudinary.v2.search
    .expression("resource_type:image")
    .sort_by("created_at", "desc")
    .max_results()
    .execute() as SearchResult;

  return (
    <section>
      <div className="flex justify-between">
        <h1 className="text-4xl font-bold">图库</h1>
        <UploadButton/>
      </div>
      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-10">
        {
          resources.map( ({public_id, width, height} ) =>
            <CImage src={public_id} key={public_id} width={width} height={height}/>
          )
        }
      </div>

    </section>)
}

photo component image.tsx:

"use client";

import { CldImage } from 'next-cloudinary';
import { OvalLoveTwo } from '@icon-park/react'

export default function CImage(props: any) {
  return (
    <div className='relative'>
      <CldImage
        width="300"
        height="300"
        sizes="100vw"
        alt="Description of my image"
        {...props}
      />
      <OvalLoveTwo className='absolute top-2 right-2' fill="#FFFFFF"  />
    </div>
  )
}

the upload button that triggers page refresh:

"use client";

import { CldUploadButton } from 'next-cloudinary';
import { Button } from "@/components/ui/button"
import { Upload } from '@icon-park/react';
import { useRouter } from 'next/navigation';

export default function UploadButton() {
  const router = useRouter()
  return (
    <Button asChild>
      <CldUploadButton
        uploadPreset="PhotoHub"
        onSuccess={()=>{
          router.refresh() // refersh the whole page
        }
      }>
        <Upload theme="outline" size="18" fill="#000000" strokeWidth={2} strokeLinecap="butt"/>
        <span className='pl-2'>上传图片</span>
      </CldUploadButton>
    </Button>
  )
}

Additional information

[My Repo](https://github.com/xext/PhotoHub)

Example

https://main--photo-hubs.netlify.app/