Next.js Discord

Discord Forum

App Router render a component on server before others like getInitialProps

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
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>
  )
}
View full answer

3 Replies

@West African Lion 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
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>
  )
}
Answer
West African LionOP
I forgot the basics, Thanks
B33fb0n3
sure thing