Single-Page Application with API Backend

Single-Page Application with API Backend

A single-page application (SPA) loads once in the browser and then renders views client-side, fetching data from a backend API as the user navigates. The front end is fully decoupled from the backend and served as static files from a CDN. Choose this for highly interactive, authenticated apps where SEO is not critical — dashboards, admin tools, and SaaS front ends. This design pairs a React, Vue, or Angular SPA with a stateless API on Google Cloud.

Components

• SPA bundle: the compiled front-end app (JavaScript, CSS, assets).
• CDN: serves the static bundle globally and caches assets.
• Cloud Run: stateless REST API services that autoscale.
• API gateway: authenticates, rate-limits, and routes API calls.
• Cloud SQL: the relational system of record.
• Identity Platform: issues and validates OAuth/OIDC tokens.
• Cloud Storage: stores the SPA bundle and user uploads.

Data Flow

The browser loads the SPA bundle from the CDN once. The user signs in through Identity Platform and receives a token. As the user navigates, the SPA calls the API gateway with the token; the gateway routes to Cloud Run services that read and write Cloud SQL. Responses return as JSON and the SPA updates the view client-side without full page reloads. Uploads go to Cloud Storage via signed URLs.

Scaling and Resilience

The static front end scales effortlessly on the CDN. The stateless API scales horizontally on Cloud Run, including to zero when idle. Because there is no server-side session, any API instance can serve any request, simplifying scaling and failover. Use read replicas for read-heavy endpoints. Lazy-load and code-split the bundle to keep initial load fast. Monitor API latency and client error rates.

Security

Use OAuth 2.0/OIDC with short-lived access tokens and refresh tokens; store tokens carefully to limit cross-site scripting exposure. Apply a strict Content Security Policy on the served app. Authenticate every API call at the gateway and enforce least privilege per service. Validate all input server-side. Configure CORS narrowly to the app's origin. Rate-limit the API.

Trade-offs and Alternatives

SPAs give rich interactivity but ship a larger initial bundle and are weak for SEO and first-paint without extra work; server-side rendering addresses both at higher compute cost. For content-heavy or public marketing pages, SSR or static generation is a better target. Choose a pure SPA when the audience is authenticated and interactivity matters more than search ranking.