前提・実現したいこと

現在Next.jsで、練習として映画情報をAPIで取得して表示、また、映画の感想やメモを記録できるWebアプリケーションを作成しています。
データベースはfirestoreを利用しています。

映画のメモを表示するページを、Next.jsのgetStaticPaths,getStaticPropsを用いて、/movie-note/[title] として動的ページを作成しました。
Topページで作成した映画メモのリストを表示、選択すると各メモのページへ移動して詳細が見れるという仕組みです。
また、各ページ（/movie-note/[title]）では常にフォームで内容を編集できるようにしています。フォームの書き換え→更新ボタンを押す→firestoreのデータを更新する　という流れです。
更新ボタンを押せば更新と共にTop画面に戻るという実装にしているのですが、再びそのページを選択すれば、更新した内容に変更されている状態にしたいです。

アプリケーションのイメージです。

発生している問題

上記の目的のため、SSGで静的生成した動的ルートのページにおいて、マウント時にCSRを行って、新しい内容に更新しようと考えました。
しかし、更新して再びそのページを訪れると、古い内容が表示されてしまいます。
ログで確認すると、新しい情報は取れてきています。

そもそも、静的生成したページ内でCSRを行って、マウント時に最新の情報で表示できるという認識自体が間違っているのでしょうか。
私の認識の間違っている点、ソースコードでおかしな点があれば、ご教示いただけると幸いです。

ちなみに、ISRを行うためにgetStaticPropsにrevalidateを設定しているのですが、色々といじっているうちに、vercelにあげた状態で、ISRが効かなくなってしまいました。
初めは効いていたように思うのですが...。
(ローカルな状態でyarn build⇨yarn startした時はリロードすると最新の内容に書き変わります。)

更新しても古い情報のまま表示され、リロードしても変わらない、という状況です。
こちらに関しても、何かお気づきの点がありましたらご教示いただきたいです。

自分の練習用のアプリケーションのため、非常に簡易的な実装で作っていますが、そこは目を瞑っていただけると幸いです...

該当のソースコード

movie-note/[title].js

import { useCallback, useEffect, useState } from 'react';
import Router from 'next/router';

import { Footer } from 'src/components/layout/Footer';
import { Header } from 'src/components/layout/Header';
import { PrimaryButton } from 'src/components/button/PrimaryButton';
import { DeleteConfirmDialog } from 'src/components/DeleteConfirmDialog';
import {
  deleteMovieNote,
  getMovieNoteData,
  getMovieNotesTitles,
  updateMovieNote,
} from 'src/lib/movieNotes';
import { MovieNoteForm } from 'src/components/movie-note/MovieNoteForm';

export default function MovieNote({ movieNote: initialData }) {
  const [ movieNote, setMovieNote ] = useState(initialData);

  const fetcher = async () => {
    const result = await getMovieNoteData(initialData.title);
    console.log(result);    //⇦この時点では、更新された新しい情報が入ってきます
    setMovieNote(result);   
  };

  useEffect(() => {
    fetcher();
  }, []);

  const [year, setYear] = useState(movieNote.year);
  const [month, setMonth] = useState(movieNote.month);
  const [day, setDay] = useState(movieNote.day);
  const [evaluation, setEvaluation] = useState(movieNote.evaluation);
  const [impression, setImpression] = useState(movieNote.impression);

  //DeleteComfirmDialog の開閉に関するstate
  const [dialogOpen, setDialogOpen] = useState(false);

  //DeleteComfirmDialog の開閉に関する関数
  const handleClickDialogOpen = useCallback(() => {
    setDialogOpen(true);
  }, []);

  const handleDialogClose = useCallback(() => {
    setDialogOpen(false);
  }, []);

  const data = {
    title: `${movieNote.title}`,
    src: `${movieNote.src}`,
    year: `${year}`,
    month: `${month}`,
    day: `${day}`,
    watchDate: `${year}${month}${day}`,
    evaluation: `${evaluation}`,
    impression: `${impression}`,
  };

  //映画メモのデータを変更
  const onClickUpdate = useCallback(async () => {
    const id = movieNote.id;
    await updateMovieNote(data, id);
    Router.push('/');
  }, [data]);

  //映画メモを削除
  const onClickDelete = useCallback(async () => {
    const id = movieNote.id;
    await deleteMovieNote(id);
    Router.push('/');
  }, [data]);

  return (
    <div className='min-h-screen p-0 flex flex-col items-center'>
      <Header />
      <div className='flex-grow w-4/5 max-w-lg mx-auto my-10'>
        <div className='flex justify-end'>
          <button
            className='text-xs sm:text-sm block border border-solid border-black px-4 py-3 mr-4 rounded-lg hover:bg-gray-100 focus:outline-none'
            onClick={() => Router.back()}
          >
            戻る
          </button>
          <PrimaryButton onClick={onClickUpdate}>更新</PrimaryButton>
          <button
            className='rounded-full bg-red-400 bg-opacity-50 w-11 h-11 text-center ml-4 hover:bg-opacity-80 focus:outline-none'
            onClick={handleClickDialogOpen}
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              className='h-6 w-6 mx-auto'
              fill='none'
              viewBox='0 0 24 24'
              stroke='currentColor'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth='2'
                d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'
              />
            </svg>
          </button>
        </div>
        <MovieNoteForm
          value={movieNote.title}
          year={year}
          month={month}
          day={day}
          evaluation={evaluation}
          impression={impression}
          setYear={setYear}
          setMonth={setMonth}
          setDay={setDay}
          setEvaluation={setEvaluation}
          setImpression={setImpression}
        />
      </div>
      <DeleteConfirmDialog
        open={dialogOpen}
        handleClose={handleDialogClose}
        onClickDelete={onClickDelete}
      />
      <Footer />
    </div>
  );
}

//titleのとりうる値のリストを返す
export async function getStaticPaths() {
  const paths = await getMovieNotesTitles();
  return {
    paths,
    fallback: 'blocking',
  };
}
//titleに基づいて必要なデータを取得
export async function getStaticProps({ params }) {
  const movieNote = await getMovieNoteData(params.title);
  return {
    props: {
      movieNote,
    },
    revalidate: 5,
  };
}