Environment

Nuxt version 3.17.5

Reproduction

Playground: https://stackblitz.com/edit/layout-page-hydrate-test

There you can see the hydration problem, and also visually you can see how the data in the <pre> tag is flickering. This is precisely because on the server the data settings, when the TheHeader component is executed, is empty.

Describe the bug

The problem is that I have a layout that contains TheHeader component. However, the request to get data for the header theme is in the page component. And it turns out that the data for the header is not substituted into TheHeader component, which is in the layout.

I know that Vue compute computed properties only once, when it encounters them for the first time on server.
However, the Nuxt Lifecycle documentation says that in step 6, Nuxt initializes all components and makes a request to get data for display and only then, in step 7, the entire page is rendered.

It seems that the layout execution happens somewhere between step 5 and 6.

Can I somehow change the logic using Nuxt Lifecycle to force Nuxt to re-render TheHeader component only when the page data has already loaded via page component?

I can't execute the request to load the page data somewhere externally, in the layout or middleware.
Putting TheHeader component in each of the pages is also not a solution.

Additional context

No response

Logs