Glossary

Quick reference for technical terms, acronyms, and concepts used in this course. Terms are organized by category for easy lookup.

---

Performance Metrics

Core Web Vitals

Google's three key metrics for measuring real-world user experience. These directly impact search ranking and are measured from actual Chrome users over a 28-day rolling window.

First appears in: Core Web Vitals and Measurement

LCP (Largest Contentful Paint)

The time it takes for the largest visible content element (image, video, or text block) to render. Target: under 2.5 seconds. LCP measures perceived load speed.

First appears in: Core Web Vitals and Measurement

CLS (Cumulative Layout Shift)

Measures visual stability: how much the page layout shifts unexpectedly during loading. Caused by images without dimensions, dynamically injected content, or web fonts loading. Target: under 0.1.

First appears in: Core Web Vitals and Measurement

INP (Interaction to Next Paint)

Measures responsiveness: the time from user interaction (click, tap, key press) to visual feedback. Replaced FID (First Input Delay) in March 2024. Target: under 200ms.

First appears in: Core Web Vitals and Measurement

TTFB (Time to First Byte)

Time from the browser requesting a page to receiving the first byte of the response. Affected by server processing time, network latency, and CDN configuration. Target: under 800ms.

First appears in: Core Web Vitals and Measurement

FCP (First Contentful Paint)

Time until the browser renders the first piece of DOM content (text, image, SVG). Indicates when users first see something happening. Target: under 1.8 seconds.

First appears in: Third-Party Scripts

TTI (Time to Interactive)

Time until the page is fully interactive and responds reliably to user input. The main thread must be idle enough to handle input within 50ms.

First appears in: Third-Party Scripts

TBT (Total Blocking Time)

Total time the main thread was blocked long enough to prevent input responsiveness, measured between FCP and TTI. Long tasks (over 50ms) contribute to TBT.

First appears in: Third-Party Scripts

Lab Data vs Field Data

Lab data: Synthetic test results from tools like Lighthouse, run in controlled conditions. Useful for debugging but doesn't reflect real user experience.

Field data: Real User Monitoring (RUM) data collected from actual Chrome users. This is what Google uses for search ranking. Access via Chrome User Experience Report (CrUX).

First appears in: Core Web Vitals and Measurement

---

Rendering Strategies

SSG (Static Site Generation)

Pre-rendering pages at build time. HTML is generated once and served from CDN. Best for content that doesn't change frequently (marketing pages, documentation, blog posts). Fastest possible response time.

First appears in: Cache Components Docs: Static Site Generation

SSR (Server-Side Rendering)

Rendering pages on each request. Server generates fresh HTML for every visitor. Best for personalized content, real-time data, or pages that must always be current. Higher server cost than SSG.

First appears in: Cache Components Docs: Server-Side Rendering

ISR (Incremental Static Regeneration)

Hybrid approach: serve static pages but revalidate in the background after a time interval. Combines SSG speed with fresher content. Set with revalidate option in fetch or route segment config.

First appears in: Cache Components Docs: Incremental Static Regeneration

CSR (Client-Side Rendering)

Rendering happens entirely in the browser. Server sends minimal HTML and JavaScript bundle. Best for highly interactive dashboards or apps behind authentication where SEO doesn't matter.

First appears in: Cache Components Docs: Client-Side Rendering

PPR (Partial Prerendering)

Next.js 14+ feature combining static shell with dynamic content. The static parts render instantly from CDN while dynamic parts stream in. Enabled with experimental.ppr in next.config.

First appears in: Cache Components Docs: Cache Components

Hydration

React's process of attaching event handlers to server-rendered HTML, making it interactive. The browser receives HTML, then React "hydrates" it by connecting JavaScript functionality.

First appears in: Server and Client Components Docs: Server and Client Components

Hydration Mismatch

Error when server-rendered HTML doesn't match what React expects on the client. Common causes: using Date.now(), Math.random(), or browser-only APIs during render. Fix by using useEffect for client-only code.

First appears in: Server and Client Components Docs: Server and Client Components

RSC Payload

The serialized data format React Server Components use to send component output from server to client. Contains rendered UI and data, not raw HTML. Enables streaming and partial updates.

First appears in: Cache Components Docs: Server and Client Components

---

Next.js Concepts

App Router

Next.js 13+ routing system using the app/ directory. File-system based routing where folders become URL segments. Supports layouts, loading states, error boundaries, and Server Components by default.

First appears in: App Router Basics Docs: App Router

Server Components

React components that execute only on the server. Can directly access databases, file systems, and secrets. Never ship to the browser bundle. Default in App Router.

First appears in: Server and Client Components Docs: Server and Client Components

Client Components

Components that run in the browser (after initial server prerender). Required for interactivity: event handlers, hooks like useState, browser APIs. Mark with "use client" directive.

First appears in: Server and Client Components Docs: Server and Client Components

Error Boundary

React component that catches JavaScript errors in child components and displays fallback UI instead of crashing the whole app. In Next.js, create with error.tsx file.

First appears in: Errors and Not Found Docs: error.js

Suspense Boundary

React component that shows fallback content while children are loading. Enables streaming: shell renders immediately, content streams in as ready. Create with <Suspense fallback={...}>.

First appears in: Suspense and Streaming Docs: loading.js

Streaming

Sending HTML to the browser in chunks as it's generated, rather than waiting for the entire page. Improves TTFB and perceived performance. Enabled automatically with Suspense.

First appears in: Suspense and Streaming Docs: loading.js

Middleware

Code that runs before a request is completed. Executes at the Edge, close to users. Use for authentication, redirects, headers, A/B testing. Lives in middleware.ts at project root.

First appears in: Proxy Basics Docs: proxy.js

Route Groups

Folders wrapped in parentheses like (marketing) that organize routes without affecting URL structure. Useful for applying different layouts to route subsets.

First appears in: App Router Basics Docs: Route Groups

Dynamic Routes

Routes with variable segments using brackets: [slug] for single segment, [...slug] for catch-all, [[...slug]] for optional catch-all. Access values via params prop.

First appears in: Dynamic Routing Docs: Dynamic Routes

Intercepting Routes

Advanced pattern using (.), (..), or (...) prefixes to intercept navigation and show different content (like a modal) while preserving the URL. The intercepted route shows on hard refresh.

First appears in: App Router Basics Docs: Intercepting Routes

generateStaticParams

Function that tells Next.js which dynamic route parameters to pre-render at build time. Returns array of param objects. Required for static generation of dynamic routes.

First appears in: Dynamic Routing Docs: generateStaticParams

generateMetadata

Async function for dynamic page metadata (title, description, OpenGraph). Can fetch data and return metadata object. Runs on server, supports streaming.

First appears in: Dynamic Metadata Done Right Docs: generateMetadata

---

Data Fetching

Waterfall Pattern

Anti-pattern where data requests happen sequentially: each waits for the previous to complete. A page with three 400ms requests takes 1200ms total. Fix with parallel fetching.

First appears in: Data Fetching Without Waterfalls

Parallel Fetching

Initiating multiple data requests simultaneously using Promise.all() or multiple await statements started together. Three 400ms requests complete in 400ms total.

First appears in: Data Fetching Without Waterfalls

Request Deduplication

Next.js automatically deduplicates identical fetch() requests in a single render pass. Multiple components can request the same data without redundant network calls.

First appears in: Data Fetching Without Waterfalls Docs: Caching

N+1 Query Problem

Database anti-pattern: fetching a list (1 query), then fetching related data for each item (N queries). Fix with JOINs, batch queries, or data loaders.

First appears in: Query Performance Patterns

stale-while-revalidate

Caching strategy: serve stale (cached) content immediately while fetching fresh content in the background. User sees instant response, cache updates for next request. Used in ISR and SWR.

First appears in: Cache Components Docs: Caching

---

Security

CSP (Content Security Policy)

HTTP header that controls which resources the browser can load. Prevents XSS attacks by restricting script sources. Configure in middleware or next.config.

Docs: Content Security Policy

DDoS (Distributed Denial of Service)

Attack that overwhelms a server with traffic from many sources. Mitigate with rate limiting, CDN protection, and services like Cloudflare or Vercel's built-in protection.

First appears in: Security Review

JWT (JSON Web Token)

Compact, URL-safe token for transmitting claims between parties. Contains encoded JSON with header, payload, and signature. Used for authentication and session management.

Correlation ID

Unique identifier attached to a request that follows it through all services and logs. Essential for debugging distributed systems: trace a single user request across multiple services.

First appears in: Proxy Basics

Stack Trace

List of function calls active when an error occurred, showing the code path that led to the error. Never expose to users in production as it reveals internal code structure.

First appears in: Security Review

Secrets Manager

Service for securely storing and accessing sensitive credentials (API keys, database passwords). Examples: Vercel Environment Variables, AWS Secrets Manager, HashiCorp Vault.

First appears in: Env and Security

Data Access Layer (DAL)

Architectural pattern that centralizes all database access in dedicated functions. Provides single point for authorization checks, query optimization, and data transformation.

First appears in: Env and Security

---

Images & Fonts

WebP

Modern image format developed by Google. 25-35% smaller than JPEG at equivalent quality. Supported by all modern browsers. Next.js Image component auto-converts to WebP.

First appears in: Images with next/image Docs: Image Component

AVIF

Newer image format based on AV1 video codec. 50% smaller than JPEG, better than WebP. Growing browser support. Next.js serves AVIF to supported browsers automatically.

First appears in: Images with next/image Docs: Image Component

srcset

HTML attribute that provides multiple image sources at different sizes. Browser picks the best one based on viewport and device pixel ratio. Next.js Image generates this automatically.

First appears in: Images with next/image Docs: Image Component

Art Direction

Serving different image crops or compositions based on viewport size. A wide landscape hero on desktop might become a square crop on mobile. Implement with <picture> element.

First appears in: Image Polish

Blur Placeholder

Low-quality image placeholder (LQIP) shown while the full image loads. Prevents layout shift and improves perceived performance. Next.js generates automatically with placeholder="blur".

First appears in: Image Polish Docs: Image Component

FOIT (Flash of Invisible Text)

When text is invisible while a web font loads. Browser hides text until font is ready. Avoid with font-display: swap or font-display: optional.

Docs: Font Component

FOUT (Flash of Unstyled Text)

When text briefly shows in a fallback font before the web font loads. Less jarring than FOIT. Minimize with font preloading and next/font.

Docs: Font Component

Layout Shift

When visible elements move position after initial render. Common causes: images without dimensions, ads, dynamically injected content, web fonts. Measured by CLS metric.

First appears in: Images with next/image Docs: Image Component

---

SEO & Metadata

SEO (Search Engine Optimization)

Practices to improve a website's visibility in search engine results. Includes technical factors (performance, crawlability), content quality, and metadata.

First appears in: App Router Basics

OpenGraph (OG) Tags

Metadata protocol for controlling how URLs appear when shared on social platforms. Defines title, description, image, and type. Set in <meta property="og:*"> tags.

First appears in: Dynamic Metadata Done Right Docs: opengraph-image

Canonical URL

The "official" URL for a page when multiple URLs show the same content. Prevents duplicate content issues in search rankings. Set with <link rel="canonical">.

First appears in: Dynamic Metadata Done Right Docs: generateMetadata

Twitter Cards

Twitter-specific metadata for rich link previews. Similar to OpenGraph but uses twitter:* meta tags. Supports summary, large image, and player card types.

First appears in: Dynamic Metadata Done Right Docs: generateMetadata

---

Accessibility

a11y

Numeronym for "accessibility" (a + 11 letters + y). Refers to making web content usable by people with disabilities, including screen reader users, keyboard-only users, and those with visual impairments.

First appears in: Component Composition Patterns

ARIA (Accessible Rich Internet Applications)

Set of HTML attributes that provide additional semantics for assistive technologies. Examples: aria-label, aria-hidden, aria-expanded. Use when native HTML semantics are insufficient.

First appears in: Component Composition Patterns

Focus Trap

Technique that constrains keyboard focus within a specific area, like a modal dialog. Prevents users from tabbing to elements behind the modal. Essential for accessible dialogs.

First appears in: Component Composition Patterns

---

Development Tools

Bundle

The JavaScript files generated by the build process, combining your code and dependencies. Smaller bundles = faster page loads. Server Components help reduce client bundle size.

First appears in: Server and Client Components

Codemod

Automated code transformation tool that updates code patterns across a codebase. Next.js provides codemods for major version upgrades: npx @next/codemod@latest.

First appears in: Proxy Basics Docs: Codemods

TUI (Terminal User Interface)

Text-based interface in the terminal. Turborepo's TUI shows real-time build output for all packages in a monorepo.

First appears in: Project Setup

HMR (Hot Module Replacement)

Development feature that updates code in the browser without full page reload. Preserves application state during development. Built into Next.js dev server.

First appears in: Project Setup

NODE_ENV

Environment variable that indicates the runtime environment: development, production, or test. Next.js sets this automatically. Affects optimizations and error handling.

First appears in: Env and Security

---

Architecture & Patterns

API Layer

Centralized code that handles all data fetching and external service communication. In this course, the shared packages/api/ directory provides type-safe data access functions used across the monorepo.

First appears in: Project Setup

Monorepo

A single repository containing multiple projects or packages. Enables code sharing, consistent tooling, and atomic commits across related projects. This course uses Turborepo to manage a monorepo with apps/ and packages/ directories.

First appears in: Project Setup

ORM (Object-Relational Mapping)

Library that maps database tables to programming language objects. Lets you query databases using code instead of raw SQL. Examples: Prisma, Drizzle, TypeORM.

First appears in: Query Performance Patterns

Database Index

Data structure that speeds up database queries by creating a sorted reference to table rows. Like a book index: instead of scanning every page, jump directly to relevant entries. Critical for query performance.

First appears in: Query Performance Patterns

Webhooks

HTTP callbacks that notify your application when events occur in external services. Instead of polling for changes, the external service POSTs data to your endpoint when something happens.

First appears in: Query Performance Patterns

Read-Your-Own-Writes

Database consistency guarantee that after writing data, subsequent reads from the same client see that write. Important for user experience: after saving a form, the user should see their changes immediately.

First appears in: Query Performance Patterns

---

Build & Optimization

Client Bundle

The JavaScript files sent to the browser. Server Components reduce client bundle size by keeping server-only code off the bundle. Smaller bundles mean faster page loads and better performance.

First appears in: Server and Client Components

Tree-Shaking

Build optimization that removes unused code from the final bundle. If you import one function from a library, tree-shaking eliminates the rest. Requires ES modules and proper exports.

First appears in: Core Web Vitals and Measurement

Code Splitting

Automatically dividing code into smaller chunks loaded on demand. Each route gets its own bundle. Users only download code for pages they visit. Built into Next.js.

First appears in: Core Web Vitals and Measurement

Inlined

Code or data embedded directly in the output rather than loaded separately. Environment variables prefixed with NEXT_PUBLIC_ are inlined into the client bundle at build time.

First appears in: Server and Client Components

Polyfills

Scripts that add modern JavaScript features to older browsers. If you use Array.prototype.at() and need IE11 support, a polyfill provides that method. Next.js handles common polyfills automatically.

First appears in: Third-Party Scripts

Base64 Encoding

Text encoding that represents binary data as ASCII characters. Used for embedding small images directly in HTML/CSS (data URIs) or transmitting binary data in JSON. Blur placeholders use base64-encoded images.

First appears in: Image Polish

---

React Patterns

Optimistic UI

Updating the UI immediately before server confirmation, assuming the action will succeed. If it fails, revert to previous state. Makes apps feel instant. Implement with useOptimistic hook.

First appears in: Client-Server Boundaries

Progressive Enhancement

Building features that work without JavaScript, then enhancing with JS when available. Server Actions support this: forms submit via HTTP POST if JS fails, but use fetch when JS works.

First appears in: Server Actions for Forms

Polymorphic Components

Components that can render as different HTML elements. A Button component that renders as <button> or <a> based on props. Useful for design systems where visual style is consistent but semantics vary.

First appears in: Component Composition Patterns

Slotting

Pattern where parent components provide "slots" for child content. In layouts, children is a slot. Parallel routes use named slots like @modal. Enables flexible composition.

First appears in: Nested Layouts Docs: Parallel Routes

Spinner Soup

Anti-pattern of showing too many loading indicators simultaneously. Instead of one cohesive loading state, users see multiple spinners competing for attention. Fix with strategic Suspense boundary placement.

First appears in: Suspense and Streaming

Serializable

Data that can be converted to JSON and back without loss. Server Components can only pass serializable data to Client Components: strings, numbers, arrays, plain objects. Functions and class instances are not serializable.

First appears in: Cache Components Docs: Server and Client Components

---

Validation & Types

Zod

TypeScript-first schema validation library. Define a schema once, get runtime validation and TypeScript types. Used throughout this course for form validation and API input checking.

First appears in: Server Actions for Forms

Dynamic APIs

Next.js functions that make a route dynamic (rendered per-request): cookies(), headers(), searchParams, connection(). Using these opts out of static generation.

First appears in: App Router Basics Docs: cookies, headers

---

Routing

Catch-All Parameter

Dynamic route segment that captures multiple path segments. [...slug] matches /a, /a/b, /a/b/c. Access all segments as an array via params.slug.

First appears in: Multi-App Routing Docs: Dynamic Routes

Negative Lookahead

Regex pattern (?!...) that matches only if the following characters don't match the pattern. Used in proxy.ts to exclude certain paths from rewrites.

First appears in: Proxy Basics

---

Monitoring

RUM (Real User Monitoring)

Collecting performance data from actual users in production. Captures real-world conditions: slow networks, old devices, geographic latency. Contrast with synthetic/lab testing.

First appears in: Third-Party Scripts

---

Other Terms

Bandwidth

The amount of data that can be transferred over a network connection per unit of time. Limited bandwidth means slower downloads. Image optimization reduces bandwidth usage.

API Minimization

Security principle of exposing only the data and functionality that's strictly necessary. Don't return entire database records when the client only needs two fields.

Data Tainting (Experimental)

React experimental feature that marks sensitive data to prevent accidental exposure to client components. Helps catch security issues during development.

Environment Variables (env vars)

Configuration values set outside your code, typically for secrets or environment-specific settings. Access via process.env.VARIABLE_NAME. Prefix with NEXT_PUBLIC_ for client-side access.

Docs: Environment Variables

FontFaceSet API

Browser API for detecting when fonts have loaded. Useful for avoiding layout shift or triggering animations after fonts are ready. Access via document.fonts.

---

Cross-Reference Index

Quick lookup for where each term is first introduced in the course.

---

Related Resources

• Next.js Documentation
• React Documentation
• Web Vitals
• MDN Web Docs