HTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLSHTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLS
    HTML Tutorial 0/139 lessons ~6 min read Lesson 123

    Modern Frontend Architecture

    modern frontend architecture modern frontend architecture balances static html, ssr, and client rendering per modern frontend architecture is the contract

    Course progress0%
    Focus
    18 guided sections
    Practice signal
    Examples included
    Career prep
    Interview Q&A included

    Introduction

    Modern frontend architecture is the contract between HTML delivery, JavaScript bundles, edge caching, and observability. Staff engineers do not pick React vs Vue in isolation — they decide what ships as HTML bytes, what hydrates on the client, and what stays on the server forever. The architecture is judged by TTFB, LCP, crawlability, and how safely a team can deploy 50 times per day.

    Business problem

    Business pressure: Product wants app-like UX; SEO wants indexable HTML; legal wants WCAG compliance; infra wants predictable CDN costs. A SPA-only architecture often wins demos and loses organic traffic. A server-only architecture wins SEO and loses interactivity. Modern FE architecture exists to resolve those conflicts with explicit delivery tiers.

    • Revenue: Checkout and signup flows need sub-2s LCP on 4G — architecture choices in routing and data fetching dominate that metric more than CSS tweaks.
    • Org scale: Multiple teams shipping to one domain need shell HTML, shared design tokens, and versioned micro-frontend boundaries.
    • Operational cost: Edge SSR, client hydration, and third-party scripts each add dollars and failure modes — architecture documents who owns each layer.

    Why this feature exists

    Platform motivation: The web outgrew "static HTML + jQuery." Frameworks added component models, but browsers still parse HTML first. Modern architecture reunites declarative markup with selective interactivity instead of shipping an empty <div id="root"> and praying crawlers execute JavaScript.

    • History: jQuery SPAs → Angular/React SPAs → Next/Nuxt/Astro/Remix re-centering HTML as the transport format.
    • Alternative rejected: Pure client rendering for public marketing pages — Google can render JS, but crawl budget and CWV suffer at scale.
    • Modern role: Frameworks compile to HTML + asset manifests; architects own the delivery graph, not the JSX syntax.

    Browser internals

    Inside the engine: The browser receives HTML, builds DOM, discovers subresources via preload scanner, executes parser-blocking scripts unless deferred, then paints. Modern architecture maps each route to a delivery mode: static HTML (CDN), streamed HTML (SSR), or client-only (authenticated app shell).

    • Parser: Inline critical markup in first chunk; defer non-critical scripts with type="module" + defer.
    • Resource hints: rel=preload for LCP image/font; rel=modulepreload for entry JS on SSR pages.
    • Navigation: MPAs full reload; SPAs use History API — HTML architecture must define which routes are MPA vs SPA for back-button and SEO behavior.
    text
    Request → CDN/Origin
       ↓
    HTML first byte (TTFB)
       ↓
    Parser builds DOM + discovers CSS/JS/images
       ↓
    Optional: hydrate islands / full SPA boot
       ↓
    Paint (LCP) → INP on interaction

    Rendering workflow

    Rendering path: Modern stacks choose among static generation (build-time HTML), SSR (request-time HTML), CSR (client fetch + render), and hybrid (static shell + client data). Each mode changes what Googlebot and assistive tech see in the first network round trip.

    • Static: Best TTFB/LCP for marketing; HTML identical at edge — ideal for docs and landing pages.
    • SSR: Personalization and auth-aware markup; watch TTFB and cache key design.
    • CSR: Acceptable behind login; unacceptable for primary organic landing URLs.
    • Streaming SSR: Send <suspense> boundaries as HTML chunks — improves FCP while slow data resolves.

    Feature deep dive

    Architecture layers — document shell, route delivery mode, data boundary, and observability hooks in HTML itself (meta tags, structured data, RUM snippets).

    • Document shell: Shared <head>, CSP, fonts, analytics — one owner team.
    • Route tiering: Tier-0 SEO pages = static/SSR HTML; Tier-2 app = CSR acceptable.
    • Asset graph: Entry, shared chunks, route chunks — reflected in <script type="module"> tags the server emits.
    • Observability: data-route, data-release on <html> or body for RUM correlation.
    html
    <!DOCTYPE html>
    <html lang="en" data-app="storefront" data-release="2024.06.1">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Product — Acme Store</title>
      <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
      <link rel="stylesheet" href="/design-system.css">
    </head>
    <body>
      <header><!-- shell nav from design system --></header>
      <main id="content"><!-- SSR HTML or static --></main>
      <script type="module" src="/islands/cart.js" async></script>
    </body>
    </html>

    Accessibility analysis

    A11y architecture: Delivery mode affects accessibility. CSR that renders empty <main> until JS loads fails for slow devices and some assistive tech configurations. SSR/static HTML with progressive enhancement delivers operable markup immediately.

    • Focus: Route changes in SPAs must move focus to <h1> — architect live regions or use MPAs for critical flows.
    • Semantic shell: Landmarks (header, nav, main) belong in server HTML, not client-only wrappers.
    • Reduced motion: Respect prefers-reduced-motion in global CSS linked from shell — not per-component after hydration.

    SEO impact

    SEO architecture: Public URLs must return meaningful HTML without executing JavaScript. Modern FE architecture assigns every route an indexability class and enforces it in CI (rendered HTML snapshot vs client-only).

    • Crawl budget: Heavy JS sites burn budget on render queue — static HTML reduces cost per URL.
    • Canonical strategy: Shell must emit one canonical per URL; client routers duplicating paths create duplicate content.
    • Structured data: JSON-LD in server HTML for product/article routes — not injected only on client.

    Security considerations

    Security boundary: Multi-layer FE architecture expands XSS surface — SSR, edge workers, CMS templates, and client bundles all emit HTML. Centralize sanitization and CSP at the shell.

    • CSP: Shell <meta http-equiv or header applies to all routes — plan nonce/hash strategy for SSR.
    • Subresource Integrity: Third-party scripts in shell need SRI or strict allowlists.
    • Micro-frontends: Each remote must not inject unsandboxed script into shared document.

    Performance impact

    Performance: Architecture drives LCP (what is in first HTML), INP (how much JS hydrates), and CLS (whether shell reserves space for async remotes).

    • LCP: Hero content in first 14KB HTML chunk; avoid waiting for API + client render.
    • INP: Limit global hydration — islands beat full-app hydrate on content pages.
    • CDN: Static HTML at edge beats origin SSR for global marketing — architecture picks per route.

    Real production example

    Production pattern: E-commerce platform with Astro static marketing, Next.js SSR PLP/PDP, React SPA checkout behind auth — unified design-system CSS, shared cookie domain, RUM on data-route.

    • Route matrix: Documented in ADR — which framework owns which path prefix.
    • CI: Lighthouse SEO + HTML snapshot diff on PR for Tier-0 routes.
    • Deploy: Independent pipelines per app; shell nav version pinned via module federation manifest.
    yaml
    # route-delivery.yaml (excerpt)
    routes:
      /: static-astro
      /products/*: ssr-next
      /account/*: spa-react
      /checkout/*: ssr-next  # SEO + perf critical
    policies:
      tier0_requires_html_without_js: true
      max_js_bytes_tier0: 180000

    Enterprise usage

    Enterprise: Platform teams publish a "golden path" — approved rendering modes, HTML lint rules, and template ownership. Product teams request exceptions via ADR, not ad hoc Create React App on marketing subdomains.

    • Platform: Internal docs site lists delivery tiers and HTML contracts per route class.
    • Governance: Architecture review for new micro-frontends includes CSP and a11y checklist.
    • Migration: Strangler pattern — SSR wrapper around legacy SPA routes until HTML parity proven in Search Console.

    Common production failures

    What breaks in prod: Teams ship SPA on blog subdomain — organic traffic drops 60% over two quarters. Or SSR without cache keys — origin meltdown on viral post. Or two frameworks fighting over <title> in shell vs remote.

    • Incident: Client-only product pages — rich results lost; manual fix required SSR for 12k URLs.
    • Perf: Full React hydrate on homepage — LCP 4.2s; fixed by static hero HTML + island for search box.
    • SEO regression: Soft navigation removed unique URLs from crawl — restored MPA for category pages.

    Architecture review questions

    • Which routes are Tier-0 for SEO and what HTML do they return with JavaScript disabled?
    • Where does personalization force SSR vs static, and what is the cache key?
    • Who owns document shell, CSP, and third-party script allowlist?
    • What is the JS byte budget per route class and how is it enforced in CI?
    • How do micro-frontends share one accessible landmark structure without duplicate mains?
    • What RUM signals prove architecture change improved LCP/INP without hurting conversion?

    Hands-on project

    Project: Design a route delivery matrix for a fictional SaaS (marketing, docs, app dashboard). Produce shell HTML for one marketing page (static hero + island CTA) and document ADR trade-offs vs full SPA.

    • Deliverable: HTML shell, route YAML, and 1-page ADR with SEO/a11y/perf rationale.
    • Verify: View-source shows meaningful content; Lighthouse SEO ≥ 95; axe zero critical on static HTML.
    • Stretch: Add RUM snippet with data-route and draft alert thresholds.

    Interview questions

    How do you decide SSR vs static vs CSR for a given route?(Advanced)

    Start from business requirements: indexability, personalization, auth, and interactivity. Tier-0 public SEO routes get static or SSR HTML with minimal JS. Authenticated dashboards can CSR. Measure TTFB/LCP and crawl coverage — not framework preference.

    Follow-up: When is edge SSR worth the complexity over static + client fetch?

    What belongs in the shared document shell vs route-specific markup?(Advanced)

    Shell: charset, viewport, CSP, fonts, global nav landmarks, analytics, design-system CSS. Route: title, meta description, canonical, main content, route-specific JSON-LD, and selective script tags. Never duplicate full head merge logic in every micro-frontend.

    Follow-up: How do you version shell nav without breaking remotes?

    Describe a production incident caused by FE architecture choices.(Advanced)

    Example: marketing moved to client-only rendering; Search Console showed soft 404s and indexed empty pages until SSR restored. Fix: route tiering ADR, CI HTML snapshot gate, and staged rollout with organic traffic monitoring.

    Follow-up: What CI checks prevent recurrence?

    Try it yourself

    Edit the HTML, CSS, or JS panels — the preview updates as you type.

    Try it yourself

    Preview

    Summary

    Modern frontend architecture balances static HTML, SSR, and client rendering per route. Staff engineers document delivery tiers, own the document shell, and measure success in crawl coverage, Web Vitals, and safe deploy velocity — not framework logos.

    Ready to mark this lesson complete?Track your journey across the entire course.