Next.js recommends fetching data on the server using async components, which simplifies the code and improves performance.
Interactive Simulation Engine
Server-Side Fetching
Direct DB Access (No Waterfall)
Database / API
Server
Execution ContextFinal UI
In Server-Side fetching, the data is pulled directly from the source before the UI is built.
Executable Code Workbench
page.tsx
Live Code Editor1// Simple async component
2export default async function Page() {
3 const data = await fetch('https://api.com/data')
4 const json = await data.json()
5
6 return <pre>{JSON.stringify(json)}</pre>
7}Mental Model
Direct access. Instead of calling an API from the browser, the component just 'waits' for the database or external service on the server.
Why This Exists
To eliminate the 'Waterfall' effect where the browser waits for JS, then the JS calls an API, then the API returns data.
Critical Note
"Server fetching is less secure. Actually, it's MORE secure. Since the fetch happens on your server, API keys and secrets are never exposed to the client's network tab."