How in my case to synchronize the display of the client with the markup of the server (SSR)?

Question

React

Good day . I was tormented, but still I was able to server side render my react application.
Outcome The server issues the markup with the data. But there is a nuisance, a damn example is needed here, but I will try to explain my problem by applying screenshots.

const App = () => {
  const dispatch = useDispatch();
  const { key } = useLocation();

  const [categories, error] = useSSE(async () => {
    const response = await Api.getAllCategory();
    const tests = await response.json();
    return tests.map(({ id, categoryName, link, tests }) => {
      return { id, categoryName, link, tests };
    });
  }, []);

This is my App component, what's going on here, I found a small lib that uses a custom hook, whatever is written inside it makes the server wait for it to execute. In general, this is the working idea of ​​the UseEffect hook for the server. If anyone is interested in lib on npm, you can find it by the name of the hook. The main thing is that it works. An empty array means, like in useEffect , that the hook will only fire once.
That is, what we get, here is part of the code of my server

server
  .disable("x-powered-by")
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR)) // use env razzle  public directory
  .get("/*", async (req, res) => {

that is, the hook will work 1 time and the request to the server will pass 1 time. We get a client with the correct markup. Everything is fine. But here's the problem. The site is connected to the admin. And if you make a change in the admin. Then To get new content, you need to reload the page (in fact, send 2 requests to the server) Then the hook will work again, since the component will be re-mounted and we will get the actual content with the new markup.

But it turns out that in order to receive actual data synchronized with the server, the user will have to refresh the page.

But on the client, I can pass a parameter to the useSSE hook that will change for each route, and it turns out that I will request new data every time. All OK. But the request to the server will not follow since I did not reload the page. As a result, the content on the client will change, and the markup will remain the first.

Is there any way to synchronize this case?

And the second question? Is it necessary at all. I would like the user to go through the pages of the site, and when switching to a new page, he receives a list of new posts (if the admin added them). But in order for these posts to arrive along with the correct markup. Or score. And give up-to-date data only when the site is loaded.

After all, there is still SSG there until the build process passes, the user will not see the new data. Yes, and after the assembly, as I understand it, you will also have to reload the page to get the latest data