Next.js Performance: Advanced Data Fetching and Hybrid Rendering Strategies (Part 2)

import React from 'react';

interface ModuleItem {
  id: number;
  code: string;
  title: string;
  lastUpdated: string;
}

// 1. Standalone Asynchronous Data Fetcher Engine running strictly on the Server
async function fetchAcademicModules(): Promise<ModuleItem[]> {
  // Extending native fetch options with Next.js specific caching parameters
  // 'next: { revalidate: 3600 }' implements Incremental Static Regeneration (ISR)
  // This caches the API response data on the server for exactly 1 hour (3600 seconds)
  const response = await fetch('https://api.university.local/v1/modules', {
    next: { revalidate: 3600 },
    headers: { 'Authorization': `Bearer ${process.env.INTERNAL_CLUSTER_KEY}` }
  });

  if (!response.ok) {
    throw new Error(`Failed to aggregate cluster data streams. HTTP Status: ${response.status}`);
  }

  return response.json();
}

// 2. Child Presentation Layout Component Node
export default async function ModulesList() {
  const modules = await fetchAcademicModules();

  return (
    <div className="grid gap-4">
      {modules.map((item) => (
        <div key={item.id} className="p-4 bg-zinc-900 border border-zinc-800 rounded-xl">
          <div className="flex justify-between items-center">
            <span className="text-xs text-blue-500 font-mono">{item.code}</span>
            <span className="text-[10px] text-zinc-500">Sync: {item.lastUpdated}</span>
          </div>
          <h4 className="text-lg font-semibold mt-1 text-zinc-200">{item.title}</h4>
        </div>
      ))}
    </div>
  );
}

import React from 'react';

// Next.js automatically renders this loading skeleton structure while parent server components fetch data
export default function ModulesLoadingSkeleton() {
  return (
    <div className="max-w-2xl mx-auto p-6 space-y-6 animate-pulse">
      <div className="h-8 bg-zinc-800 rounded-md w-3/4"></div>
      <div className="h-4 bg-zinc-800 rounded-md w-1/2"></div>
      
      <div className="space-y-4 pt-4">
        <div className="h-24 bg-zinc-800 rounded-xl"></div>
        <div className="h-24 bg-zinc-800 rounded-xl"></div>
        <div className="h-24 bg-zinc-800 rounded-xl"></div>
      </div>
    </div>
  );
}

import React from 'react';
import Link from 'next/link';

interface PageParams {
  params: Promise<{ id: string }>;
}

// 1. Mock background API engines simulating enterprise database fetching channels
async function getModuleMeta(id: string) {
  return { id, difficulty: "Advanced Engineering", track: "Core Full Stack" };
}

async function getModuleCoreContent(id: string) {
  return {
    id,
    title: id === "201" ? "Advanced Computer Networks" : "Database Engine Internals",
    syllabus: ["Asynchronous Communication Streams", "Multiplexing Core Layers", "Zero-Copy Socket Logic"]
  };
}

// 2. Primary Page Node implementing parallel fetching optimizations
export default async function DynamicModulePage({ params }: PageParams) {
  const resolvedParams = await params;
  const targetModuleId = resolvedParams.id;

  console.log(`📡 [SERVER CALL] Initiating parallel analytics pipeline for module ID: ${targetModuleId}`);

  // Execute both data fetches in parallel simultaneously to completely eliminate data waterfalls
  const metaPromise = getModuleMeta(targetModuleId);
  const contentPromise = getModuleCoreContent(targetModuleId);

  // Wait for all data streams to resolve concurrently
  const [metaData, coreContent] = await Promise.all([metaPromise, contentPromise]);

  return (
    <main className="max-w-2xl mx-auto p-6 bg-black text-zinc-100">
      <Link href="/modules" className="text-xs text-blue-500 hover:underline mb-4 block">← Back to Catalog</Link>
      
      <header className="border-b border-zinc-800 pb-4 mb-6">
        <h2 className="text-3xl font-bold text-white">{coreContent.title}</h2>
        <div className="flex gap-3 mt-2 text-xs text-zinc-400">
          <span className="px-2 py-0.5 bg-zinc-900 border border-zinc-800 rounded">Track: {metaData.track}</span>
          <span className="px-2 py-0.5 bg-zinc-900 border border-zinc-800 rounded">{metaData.difficulty}</span>
        </div>
      </header>

      <div className="space-y-4">
        <h3 className="text-sm font-semibold uppercase tracking-wider text-zinc-500">Core Syllabus Modules</h3>
        <ol className="space-y-2">
          {coreContent.syllabus.map((topic, index) => (
            <li key={index} className="p-3 bg-zinc-900 border border-zinc-800 rounded-lg text-sm flex gap-3">
              <span className="text-blue-500 font-mono">0{index + 1}.</span>
              <span className="text-zinc-300">{topic}</span>
            </li>
          ))}
        </ol>
      </div>
    </main>
  );
}