Objectives
Learn how data fetching works in Next.js (App Router)
Data fetching in Next.js is built on top of the fetch() Web API and React Server Components.
When the components are located on the server, the process of fetching data is significantly faster compared to when the components are on the client side. Since now your components are rendered on the server, your components have access to the server infrastructure. This means that you can query the database from your components as well.
Fetching an API
Use async/await
You can use async and await to fetch data in Server Components.
Browser Output
Conclusion
With the components now situated on the server, the latency is significantly reduced since data is no longer fetched all the way from the client. Instead, data is fetched directly from the server, resulting in lower latency and faster retrieval times.
Source