App Router render a component on server before others like getInitialProps
Answered
Cyanide posted this in #help-forum
CyanideOP
Hi! I have a component
ServerLibrary and ClientLibrary here ServerLibrary is async which makes a fetch call. I want AppTitle should render on server only when ServerLibrary has loaded. We could do this in Pages Router via getInitialProps but not sure how we can await the rendering here
Answered by B33fb0n3
inside the app router you can directly call the await function inside your component:
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json() // <---- directly await it here
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}3 Replies
inside the app router you can directly call the await function inside your component:
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json() // <---- directly await it here
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}Answer
CyanideOP
I forgot the basics, Thanks
sure thing