Next.JS — Почему выборка данных происходит как на стороне сервера, так и на стороне клиента?

Question

Я вызываю обычную функцию выборки вindex.jsкомпонент, а затем записывать ответ на консоль. Несмотря наfetchнаходится внутри функции компонента, ответ также регистрируется на стороне сервера: он появляется в терминале, что заставляет меня поверить, что выборка данных также выполняется со стороны сервера.

Почему это происходит?

Код внутриpages/index.js:

      export default function Home() {

  fetch('http://localhost:3000/api/hello').then(res=>res.text()).then(data=>console.log(data));

  return (
    <div>
      Home
    </div>
  )
}

Код внутриpages/api/hello.js:

      import connectDB from "../../middleware/mongodb";

async function handler (req,res) {
  res.end('Hello');
}

export default connectDB(handler);

Мой терминал VS Code после открытияhttp://localhost:3000: