CyberCertPrepWeb App FundamentalsFront-end vs Back-endEASYFree question
A developer builds a React SPA with client-side routing. After deploying to Nginx, refreshing the page at '/dashboard/reports' returns a 404. What server-side configuration resolves this?
- A.Add a 'X-SPA-Routing: enabled' header to the Nginx config
- B.Add a _redirects file to the project root with '/* /index.html 200'
- C.Enable Nginx's proxy_pass to forward unknown routes to the React dev server
- D.Configure Nginx with 'try_files $uri $uri/ /index.html' so that all requests that don't match a static file fall through to index.html, where React Router handles client-side routing
Why D is correct
SPAs use client-side routing - the server only knows about /index.html; all route logic is in JavaScript. When a user refreshes /dashboard/reports, the browser asks the server for that file, which doesn't exist as a server-side resource, causing 404. 'try_files $uri $uri/ /index.html' tells Nginx: try the exact URI, then try as a directory, then fall back to /index.html. The SPA's JavaScript router then renders the correct page. The _redirects file is a Netlify/Cloudflare Pages equivalent. Security note: ensure the fallback doesn't serve index.html for API routes - API paths should explicitly not match this rule.
Know someone studying for Web App Fundamentals? Send them this one.