Как правильно сбросить Router cache в Nextjs 14

Фреймворк - Nextjs 14 (app dir) Я пишу приложение полностью на ssr.

Логика работы приложения: На странице (page) я получаю данные из server action (там вызывается фетч с куками для заголовков и просто возвращает данные) и опускаю эти данные через пропсы на клиентский компонент для дальнейшей работы с ними. Сам RSC установлен как force-dynamic.

Пример: На странице я получаю список статей, опускаю их на клиент и отрисовываю. На клиенте есть кнопка «добавить статью» которая редиректит меня на страницу для создания статьи. После заполнения данных и подтверждения вызывается server action внутри которого выполняется fetch с сохранением и после этого меня возвращает на первую страницу.

Проблема: Я не понимаю как правильно обновить кеш начальной страницы после добавления статьи на другой странице. Т.е. я просто не понимаю логику того, как это должно работать. Изначально я ставил router.refresh в useEffect->return,[] и это работало, но вызывать рефреш страницы при каждом анмаунте мне кажется не правильным подходом, т.к. страница рефрешится не только после изменений, а при каждом выходе из нее (а это раздражает, ведь из за router.refresh() прыгают шрифты на секунду). Далее я попытался делать рефреш на странице добавления статьи перед редиректом и это тоже работало и вообще не понятно почему. В документации указано что рефреш обновляет только текущий роут, коим является на данный момент страница создания статьи. Была так же попытка использовать revalidatePath в server action после выполнения fetch запроса. И это тоже работает при чем вообще не важно что я укажу в этой функции. RevalidatePath принимает url, от чего я ожидаю что именно этот урл он и сбросит, но нет. Я могу указать там хоть пустую строку и он всеравно будет каким то образом рефрешить, даже если указать несуществующий урл.

Вопрос: От этого всего у меня полнейший диссонанс, я не могу быть уверен в стабильности ни одного из выше перечисленных решений, т.к. я не понимаю логику их работы. Я бы хотел узнать как мне ПРАВИЛЬНО сбрасывать кеш в данном случае? Если не использовать ничего из выше перечисленного, то данные на странице будут кешироваться 30 секунд, что для меня катастрофично.

Код server action

'use server';

export const fetchArticles = async (): Promise<ArticlesResp> => {
 const { data } = await protectedFetch(`url`);
 return data;
};

Код главной страницы

async function Page() {
  const articles = await fetchArticles();

  return (
    <section className="grid-default flex flex-col pt-14 font-body">
      <div className="my-6">
        <ArticlesModule articles={articles} />
      </div>
    </section>
  );
}

export const dynamic = 'force-dynamic';
export default Page;

Код главного клиентского компонента

'use client';

function ArticlesModule({ articles = [] }) {
  const router = useRouter();

  useEffect(
    () => () => {
      router.refresh();
    },
    [],
  );

  return (
    <div className="flex flex-col gap-y-10">
     <div>
       {articles.map(({id, name) => (<div key={id}>{name}</div>)
     </div>
      <button onClick={() => router.push('/addArtice')}>Добавить статью</button>
    </div>
  );
}

export { ArticlesModule };

Код клиентского компонента для создания статьи

'use client';

function CreateArticlesModule() {
  const router = useRouter();

  cosnt handleSave = async () => {
    const resp = await fetchSaveArticle();
    // Возвращаем обратно на главную страницу
    if (resp.ok) router.push('/');
  }
  
  return (
    <div className="flex flex-col gap-y-10">
      <button onClick={handleSave}>Сохранить</button>
    </div>
  );
}

Код приведен примерный, т.к. разбора кода не нужно, мне необходимо только понять в какой момент, где, и как правильно очистить router cache.