Клиентские и серверные компоненты в NextJS

Вот в чем вопрос: В next есть серверные и клиентские компоненты. Так же в нем есть серверные действия. Я написал такой простенький файл с двумя серверными функциями

'use server'
let num = 0;

export async function increment() {
    num++;
}

export async function getNum(){
    return num;
}

и пытался вызывать эти функции из клиентского:

'use client'
import { getNum, increment } from "@/test/test";
import { useEffect, useState } from "react";

export default function Home() {
  const [st, setst] = useState<number|undefined>()
  useEffect(() => {
    increment()
    .then(getNum)
    .then(num => setst(num))
  },[])
  return (
    <>
      <div>{st}</div>
    </>
  );
}

и серверного компонентов:

'use server'
import { getNum, increment } from "@/test/test";

export default async function Page(){
  await increment();
  const num = getNum();
  return (
    <>
      {num}
    </>
  );
}

Идея была в том, чтобы при перезагрузке страницы значение увеличивалось. Моему удивлению не было предела, когда оказалось, что в клиентском и серверных компонентах значения разные и никак не связаны. Вопрос, как пофиксить это и синхронизировать данные?