Server-Side Data Fetching in Next.js

Server-side data fetching means retrieving data on the server before sending the page to the browser.

What is Server-Side Data Fetching?

In Next.js, Server Components can fetch data directly using async functions. The server prepares the content before the user sees it.

How does it work?

async function getUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  return res.json();
}

export default async function Page() {
  const users = await getUsers();

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

The data is fetched on the server, rendered into HTML, and sent to the browser — faster and SEO-friendly.

Why use Server-Side Data Fetching?

• Better SEO
• Faster initial page load
• Secure data handling
• No client loading state needed

Real-World Example

An e-commerce site loads product data on the server so users see ready-to-view products immediately without waiting for browser fetches.

Interview Tip

Server-side data fetching allows Next.js to fetch and render data on the server before sending HTML to the browser, improving performance and SEO.