Data Fetching & Caching

// app/page.jsx — a Server Component can be async
async function getStats() {
  return { students: 1200, courses: 6, rating: 4.8 }   // could be a DB call
}

export default async function Home() {
  const stats = await getStats()
  return <p>{stats.students}+ students · {stats.courses} courses · ⭐ {stats.rating}</p>
}

// app/jobs/page.jsx
async function getJobs() {
  const res = await fetch('https://api.example.com/jobs?city=delhi')
  if (!res.ok) throw new Error('Failed to load jobs')   // → error.jsx
  return res.json()
}

export default async function Jobs() {
  const jobs = await getJobs()
  return (
    <ul>
      {jobs.map((j) => <li key={j.id}>{j.title} – {j.company}</li>)}
    </ul>
  )
}

---
title: How to Start Coding in 2026
date: 2026-03-10
excerpt: A simple 30-day plan for complete beginners.
---

## Day 1–7: Pick one language
Start with **Python** or **C** …

// lib/posts.js  (from the EduSite project)
import fs from 'node:fs'
import path from 'node:path'
import matter from 'gray-matter'       // reads the --- front matter ---
import { marked } from 'marked'        // converts Markdown → HTML

const POSTS_DIR = path.join(process.cwd(), 'content', 'posts')

export function getAllPosts() {
  return fs.readdirSync(POSTS_DIR)
    .filter((f) => f.endsWith('.md'))
    .map((file) => {
      const slug = file.replace(/\.md$/, '')
      const { data } = matter(fs.readFileSync(path.join(POSTS_DIR, file), 'utf8'))
      return { slug, title: data.title, date: data.date, excerpt: data.excerpt }
    })
    .sort((a, b) => (a.date < b.date ? 1 : -1))   // newest first
}

export function getPost(slug) {
  const file = path.join(POSTS_DIR, slug + '.md')
  if (!/^[a-z0-9-]+$/.test(slug) || !fs.existsSync(file)) return null
  const { data, content } = matter(fs.readFileSync(file, 'utf8'))
  return { slug, ...data, html: marked.parse(content) }
}

// 1) No caching (default) – fresh on every request
await fetch('https://api.example.com/price')

// 2) Cache forever (until next deploy or revalidate)
await fetch('https://api.example.com/states', { cache: 'force-cache' })

// 3) Cache, but refresh at most every 1 hour (ISR-style)
await fetch('https://api.example.com/courses', { next: { revalidate: 3600 } })

// 4) Cache with a tag so you can refresh it on demand
await fetch('https://api.example.com/courses', { next: { tags: ['courses'] } })

// app/blog/page.jsx — whole page regenerates at most every 10 minutes
export const revalidate = 600

// app/admin/actions.js
'use server'
import { revalidateTag, revalidatePath } from 'next/cache'

export async function addCourse(formData) {
  await saveCourseToDatabase(formData)
  revalidateTag('courses', 'max')   // every fetch tagged 'courses' is stale now
  revalidatePath('/courses')        // or: refresh one path
}

// ❌ Sequential: 1s + 1s + 1s = 3 seconds
const course  = await getCourse(slug)
const reviews = await getReviews(slug)
const teacher = await getTeacher(slug)

// ✅ Parallel: all start together ≈ 1 second
const [course, reviews, teacher] = await Promise.all([
  getCourse(slug),
  getReviews(slug),
  getTeacher(slug),
])

// components/LiveSeats.jsx — refresh seat count every 10s in the browser
'use client'
import { useEffect, useState } from 'react'

export default function LiveSeats({ slug }) {
  const [seats, setSeats] = useState(null)
  useEffect(() => {
    const load = () => fetch(`/api/seats?course=${slug}`).then((r) => r.json()).then((d) => setSeats(d.left))
    load()
    const id = setInterval(load, 10000)
    return () => clearInterval(id)
  }, [slug])
  return <p>{seats === null ? 'Checking seats…' : `${seats} seats left`}</p>
}