Modern Web Systems

Outcomes

• Trace a request from DNS and TLS through the browser and application boundary.
• Compare major rendering and frontend data-loading approaches by constraints and trade-offs.
• Recognize where caching, browser security, and backend API design influence web behavior.

Path

1. DNS Resolution

   Target depth: reason

   Available Atlas content

   • DNS Resolution & TLS: From Hostname to Authenticated HTTPS

2. HTTP Request Lifecycle

   Target depth: operate

   Available Atlas content

   • HTTP Request Lifecycle: From URL to Response

3. TLS and HTTPS

   Target depth: reason

   Available Atlas content

   • DNS Resolution & TLS: From Hostname to Authenticated HTTPS

4. Browser Runtime

   Target depth: reason

   No Atlas content yet

5. Browser Event Loop

   Target depth: reason

   Available Atlas content

   • Browser Event Loop: How Tasks, Microtasks, and Rendering Are Scheduled

6. Browser Rendering Pipeline

   Target depth: reason

   No Atlas content yet

7. Same-Origin Policy and CORS

   Target depth: reason

   Available Atlas content

   • Auth Debugging Field Guide: 401, 403, CORS, Redirects, Issuer, Audience & Claims

8. HTTP Caching

   Target depth: reason

   Available Atlas content

   • CSR vs SSR vs SSG

9. CDN Behavior

   Target depth: reason

   Available Atlas content

   • CSR vs SSR vs SSG

10. CSR, SSR, and SSG

    Target depth: reason

    Available Atlas content

    • CSR, SSR, and SSG: Where and When HTML Is Produced
    • CSR vs SSR vs SSG

11. Hydration

    Target depth: reason

    Available Atlas content

    • Hydration: Turn Rendered HTML into an Interactive App
    • CSR vs SSR vs SSG

12. Frontend Data Fetching

    Target depth: reason

    Available Atlas content

    • Frontend Data Fetching: Make Remote Data Explicit
    • Redux Everywhere: Rationalizing State in a Legacy React App
    • Modernizing a Seven-Year-Old React Application
    • CSR vs SSR vs SSG

13. Component Boundaries

    Target depth: reason

    Available Atlas content

    • Component Boundaries: Make Ownership and Interfaces Explicit
    • De-Overengineering the Frontend: Remove Accidental Architecture
    • Incremental Frontend Migration: Strangler Patterns, Compatibility Boundaries, and Cutovers
    • React Modernization: Upgrade Without Rewriting the App
    • Modernizing a Seven-Year-Old React Application
    • Frontend Modernization Decision Guide: Upgrade, Replace, Wrap, or Delete?

14. Frontend Bundle Performance

    Target depth: reason

    Available Atlas content

    • Dependency Archaeology: Dead Libraries, Prereleases, and Upgrade Chains
    • Frontend Bundle Performance: Ship Less JavaScript, Load It Later
    • Modernizing a Seven-Year-Old React Application

15. Backend Request Lifecycle

    Target depth: operate

    Available Atlas content

    • Backend Request Lifecycle

16. API Design

    Target depth: operate

    Available Atlas content

    • API Design
    • Reliable Checkout Walkthrough