SlpSoftware/aidlc-docs/features/react-frontend/construction/react-frontend-app/nfr-design/nfr-design-patterns.md

NFR Design Patterns — react-frontend-app

Resilience Pattern: Top-Level Error Boundary

A single React error boundary wraps the routed content inside the root route. On an unexpected rendering error it shows a minimal, on-brand fallback message styled with the currently active theme (e.g. "Er ging iets mis. Probeer de pagina te vernieuwen."), with no stack traces or technical details exposed (satisfies SECURITY-09 and SECURITY-15 from NFR Requirements).

Scalability Pattern: Not Applicable (Justified)

This is a static single-page marketing site with no server-side component to scale. The only forward-looking "scalability" concern — adding more routes and swapping the placeholder query for a real API — is already accommodated structurally by the Functional Design's root/index route split and the usePackagesQuery hook shape, so no additional scalability pattern is introduced at this stage.

Performance Patterns

Query Caching

The usePackagesQuery placeholder hook is configured with staleTime: Infinity (and no automatic refetch-on-window-focus), since its queryFn currently always returns the same static array. This is a deliberate choice anticipating the future real-data swap, where refetch behavior can be tuned once real network latency/staleness exists.

Font Loading

Fonts (Sora, Instrument Sans, JetBrains Mono) are self-hosted as static assets bundled with the app (via @fontsource/* packages or locally vendored font files + @font-face declarations), rather than loaded from the Google Fonts CDN.

• Impact on Security Baseline SECURITY-13 (integrity): Self-hosting removes the need for Subresource Integrity (SRI) hashes on font <link> tags entirely, since no external CDN resource is loaded for fonts anymore. The NFR Requirements SECURITY-13 note ("SRI where feasible") is superseded by this decision — self-hosting is a stronger mitigation (no external dependency at all) than SRI on a CDN resource.
• Trade-off accepted: Slightly larger initial bundle/setup effort, in exchange for one fewer external dependency and a fully offline-buildable app.

Security Patterns

• Dependency/supply chain (SECURITY-10): package-lock.json committed; npm audit step documented in build instructions (implemented in Build and Test stage).
• Integrity (SECURITY-13): Satisfied via the font self-hosting decision above (no external CDN assets requiring SRI remain in this iteration).
• Hardening (SECURITY-09) & fail-safe defaults (SECURITY-15): Satisfied via the Resilience Pattern (error boundary) above and a standard production build with no demo/sample routes.
• HTTP security headers (SECURITY-04): Remains deferred to Deployment Setup (Operations phase), unchanged from NFR Requirements — no hosting decision has been finalized yet.

Logical Components

See logical-components.md for the concrete component/provider list implementing these patterns.