Server Side Fetch with Next.js

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Server-Side Fetch with Next.js

VOLUME 02 - FRONTEND + BACKEND FOUNDATIONS

Server-Side Fetch with Next.js Server Component -> NestJS before browser CORS enters the picture

Phase 06 turns two working applications into one full-stack system.

Browser Next.js NestJS API

http://localhost:3000 apps/web http://localhost:4000

HTTP fetch

Later phases replace in-memory Todos with Prisma + PostgreSQL.

Figure - TaskFlow Phase 06 architecture. The browser sees Next.js on port 3000 while the independent NestJS API listens on port 4000.

Book 3 of Phase 06

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Server-Side Fetch with Next.js

First connection: fetch from a Server Component We start with the quieter request path because it proves Next.js can consume NestJS without introducing browser CORS at the same moment. The page is a Server Component by default, so it can be async and await the API response directly.

Same API URL, different execution environment.

Browser Next.js Server SERVER FETCH NestJS API

renders page / runs client JS Server Components port 4000

BROWSER FETCH

Client Component

browser JavaScript

CORS is a browser security policy. A server-to-server fetch is not blocked by the browser CORS enforcement model.

Figure - Server Component fetch versus browser Client Component fetch. Knowing where code executes explains when CORS becomes relevant.

Step 1 - create one small HTTP helper apps/web/src/lib/api/todos.ts

export interface Todo { id: number; title: string; completed: boolean; }

export async function fetchTodos(baseUrl: string): Promise<Todo[]> {
const response = await fetch(`${baseUrl}/todos`, { cache: 'no-store' });

if (!response.ok) { throw new Error(`GET /todos failed: ${response.status}`); }

return response.json() as Promise<Todo[]>; }

We pass the base URL into the helper. That keeps the helper usable from both server and browser code without importing a server-only environment variable into a client bundle.

Step 2 - call it from the page apps/web/src/app/todos/page.tsx

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Server-Side Fetch with Next.js

import { fetchTodos } from '@/lib/api/todos';

export default async function TodosPage() {
const apiBaseUrl = process.env.API_BASE_URL;
if (!apiBaseUrl) throw new Error('API_BASE_URL is not configured');

const todos = await fetchTodos(apiBaseUrl);

return (
<main>
<h1>Todos from NestJS</h1>
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
</main>
);
}

What just happened? Browser requests /todos page

Next.js Server Component calls fetchTodos()

NestJS GET /todos returns JSON

Next.js renders HTML/RSC payload

Browser shows Todo list

Figure - The first end-to-end request is server-to-server. The browser receives rendered application output rather than directly calling port 4000.

Why check response.ok? The Fetch API does not reject its promise merely because a server returned 404 or 500. It still produced an HTTP response. We therefore check response.ok and convert an unsuccessful HTTP outcome into an application error intentionally.

TEMPORARY CACHING CHOICE

We use cache: no-store to make the learning behavior obvious while our Todo data is in memory and changes frequently. This is not a claim that every production request should disable caching. Next.js caching strategy gets its own treatment later.

Verification 1 Start NestJS from apps/api and verify http://127.0.0.1:4000/todos. 2 Start Next.js from apps/web.

FULL_STACK_DEVELOPER_2026_COMPLETE - Phase 06 Server-Side Fetch with Next.js

3 Open the Next.js /todos route. 4 Confirm the Todo titles come from the NestJS in-memory array. 5 Stop the API and reload the page; observe that the error is reported by the Next.js server path, not by browser CORS.

Official source notes Primary framework references: Next.js App Router Fetching Data and fetch API documentation; Next.js Environment Variables documentation; NestJS CORS documentation. Browser protocol references: MDN CORS, preflight request, and Fetch API documentation.

The course remains version-locked to the versions established in Phase 00. These sources are used to verify concepts and current API behavior, not to silently upgrade the course midstream.