Rendering and Data Fetching

Level: Beginner to Intermediate

ℹ️ What You'll Learn

• Server components by default (no JS sent to browser)
• Client components with 'use client' directive
• Fetching data in server components
• Using fetch with caching and revalidation
• Static generation (SSG) vs dynamic rendering
• Incremental Static Regeneration (ISR)
• API calls to ASP.NET Core from server
• SMS student list: server fetch pattern

Why This Matters

Rendering and Data Fetching is part of building production React applications with Next.js. You will use it when creating student dashboards, SEO-friendly pages, API-connected forms, route handlers, layouts, and deployments for .NET-backed systems.

Next.js supports server rendering, static rendering, and client rendering. The App Router uses Server Components by default.

The Problem

Beginners often treat Next.js like plain React and miss routing, rendering, server/client boundaries, environment variables, and deployment behavior. This lesson shows how Rendering and Data Fetching works in a real School Management System frontend that talks to ASP.NET Core APIs.

Server Component by Default

app/students/page.jsx

async function getStudents() {
  const response = await fetch("https://localhost:5001/api/students");

  if (!response.ok) {
    throw new Error("Unable to load students");
  }

  return response.json();
}

export default async function StudentsPage() {
  const students = await getStudents();

  return (
    <main>
      <h1>Students</h1>
      <ul>
        {students.map(student => (
          <li key={student.id}>{student.name}</li>
        ))}
      </ul>
    </main>
  );
}

This code runs on the server, not in the browser.

Client Component

Use a client component when you need browser-only features like state, events, local storage, or form interaction.

app/students/SearchBox.jsx

"use client";

import { useState } from "react";

export default function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={event => setQuery(event.target.value)}
      placeholder="Search students"
    />
  );
}

Server vs Client

Need	Use
Read data before page loads	Server Component
SEO-friendly page	Server Component
Button clicks	Client Component
useState or useEffect	Client Component
Secret API keys	Server side only

Environment Variables

Store API URLs in .env.local:

ASP_NET_API_URL=https://localhost:5001

Use it on the server:

const apiUrl = process.env.ASP_NET_API_URL;

⚠️ Do not expose secrets

Environment variables starting with NEXT_PUBLIC_ are sent to the browser. Do not put secrets in them.

Avoid CORS with Server Fetching

If a Server Component calls ASP.NET Core, the browser is not making the request, so CORS is usually not involved. If a Client Component calls ASP.NET Core directly, you must configure CORS in ASP.NET Core.

Interview Questions

🎯 What is a Server Component?

A Server Component renders on the server. It can fetch data before HTML is sent to the browser and does not include its code in the client JavaScript bundle.

🎯 When do we need a Client Component?

Use a Client Component when you need browser interaction such as useState, useEffect, click handlers, form typing, or local storage.

Quick Definitions

• Rendering and Data Fetching - The main Next.js concept explained in this lesson.
• App Router - The modern Next.js routing system based on the app folder.
• Server/Client boundary - The decision of whether code runs on the server or in the browser.
• ASP.NET Core integration - Calling or proxying backend APIs from a Next.js frontend.

Common Mistakes

• Treating every component as a Client Component without a reason
• Forgetting environment variables differ between local and production
• Calling ASP.NET Core APIs from the browser without handling CORS
• Putting secrets in NEXT_PUBLIC_ variables
• Skipping npm run build before deployment

Practice Task

Create a small Next.js example using Rendering and Data Fetching. Keep it connected to a School Management System scenario.

Suggested practice:

1. Create or update a route, layout, form, or data-fetching example.
2. Use realistic student, teacher, attendance, or marks data.
3. Connect the example to an ASP.NET Core-style API URL or route handler.
4. Add one loading, empty, or error state where relevant.
5. Explain what runs on the server and what runs in the browser.

Quick Revision

Question	Answer
What is the main idea?	Use Rendering and Data Fetching correctly in a Next.js App Router project.
Where is it used?	Pages, layouts, route handlers, forms, APIs, authentication, and deployment.
What should beginners watch carefully?	Server/client boundaries, environment variables, CORS, and production builds.
What is the best debugging habit?	Check terminal build output, browser console, network tab, and server logs.

🤖Use AI to Learn Faster

⚠️ Important for beginners: Do NOT use AI to write your code yet. Type every example yourself. Your brain learns by doing, not by reading AI output. Use AI only to explain and quiz you — not to code for you. Once you have strong fundamentals, AI becomes a powerful productivity tool for repetitive tasks.

Use ChatGPT, Claude, or Copilot to go deeper on Rendering and Data Fetching. Try these prompts:

• "Explain Rendering and Data Fetching with a Next.js and ASP.NET Core example"
• "Give me 5 practice tasks for Rendering and Data Fetching in a School Management app"
• "Show common Next.js mistakes in Rendering and Data Fetching and how to fix them"
• "Quiz me on Rendering and Data Fetching with interview-style questions"

💡 Tip: After reading this article, paste your own code into AI and ask "What could go wrong here and why?" — fastest way to find edge cases and deepen understanding.

Next Article

Route Handlers and API Endpoints ->