Render blocking issue?
Unanswered
Pointer posted this in #help-forum
PointerOP
Hello guys I'm having an issue with fetching data from a component that is in the layout.tsx
my structure is:
this fetches the data without any issues but the problem this causing is that the rest of my website does not render. its when i change Socials to async and fetch there.
my structure is:
<layout>
<Header />
</layout>
-----
<Header>
//some code
<Socials/>
</Header>
-----
<Socials>
const Socials = async () => {
const contactInfo: ContactInfo = await fetchContact();
</Socials>this fetches the data without any issues but the problem this causing is that the rest of my website does not render. its when i change Socials to async and fetch there.
1 Reply
that the rest of my website does not render.It looks like you never added the children to the dom of your layout. Like that only the header renders. So add the children to your layout and then you are able to view the rest of your page
@Pointer