Deutsch
JavaScript & frameworks

Single-page application

Also known as: SPA, single page app

A single-page application (SPA) is a web app that loads a single HTML document and then updates the content with JavaScript when another view is needed. MDN describes it as loading one web document and changing the body content through JavaScript APIs such as Fetch. A search for the abbreviation “SPA” mostly returns wellness results, so this entry refers to the web technology.

How does a SPA work?

On the first request the browser receives a small HTML file and the JavaScript. The script fetches data and builds the view in the DOM. When a visitor clicks a link, client-side routing swaps the view without loading a new document. React, Angular and Vue are the frameworks MDN names. MDN also lists the trade-offs, namely SEO challenges, more effort for state and navigation, and harder performance monitoring.

Where the HTML is created: CSR, SSR, SSG and dynamic renderingFour rows show where the content of a page is created. With CSR the server sends an empty HTML shell and JavaScript in the browser builds the content. With SSR the server renders the HTML on every request and hydration makes it interactive in the browser. With SSG the HTML is created at build time. Dynamic rendering serves finished HTML to crawlers and the JavaScript version to users; Google calls this a workaround.SERVERFIRST HTML RESPONSEBROWSERCSRClient-siderenderingsends HTML shelland JavaScript<div id="app">no contentJavaScript buildsthe contentSSRServer-siderenderingrenders HTMLon every requestcontent isin the HTMLhydration makesthe page interactiveSSGstatic renderingprerenderingHTML is builtahead of timecontent isin the HTMLshows HTML at once,hydration optionalDynamicrenderingworkarounddetects crawlers,renders for themcrawlers: HTMLusers: empty shellfor users, JavaScriptbuilds the contentSchematic. Google renders JavaScript in a separate step after crawling.Not all bots run JavaScript.
What matters for crawlers is whether the content is already in the first HTML response. Google recommends server-side rendering or prerendering and calls dynamic rendering a workaround, not a long-term solution. Sources: web.dev: Rendering on the Web; Google Search Central: Understand the JavaScript SEO basics; Google Search Central: Dynamic rendering as a workaround.

SPA and SEO

Google processes JavaScript pages in three phases (crawling, rendering, indexing), using a headless Chromium for rendering. The first HTML of a SPA often holds little content, so what Google indexes depends on rendering. Google writes that server-side or pre-rendering is still a great idea, because it makes sites faster for users and crawlers, and not all bots can run JavaScript.

Google’s documents give concrete rules.

  • Use the History API for routing. Google recommends it for different views. URL fragments cannot be relied on, since the AJAX crawling scheme has been deprecated since 2015.
  • Avoid soft 404s. Error views in a SPA often return status 200. Google suggests redirecting to a URL that returns a 404 status, or setting noindex on the error page.
  • Keep the canonical stable. Do not change the canonical URL with JavaScript to something other than the one in the original HTML.
  • Expect no stored state. Local Storage, Session Storage and cookies are cleared across page loads when Google renders.
  • Use real links. Links should be <a href> elements.

Example

An online shop built as a SPA returns the same HTML for /product/42 and /product/99, with an empty <div id="app"></div>. Title and description arrive only after the script has run. If rendering fails, Google has little to index for either URL.

Common mistakes

  • Links without href. Google finds links only in <a> elements with an href attribute, including the links a client-side router uses.
  • Content behind a permission prompt. Googlebot declines user permission requests such as camera access. The content has to be reachable without consent.
  • Content delivered only over WebSockets or WebRTC. Googlebot retrieves content over HTTP and does not support these connections. Google advises providing an HTTP fallback.
  • Script files without a fingerprint in the name. Googlebot caches aggressively and rendering may ignore caching headers, so it can use outdated JavaScript or CSS. Google recommends content fingerprinting, for example main.2bb85551.js.

FAQ

What is a single-page application? A web app that loads one document and replaces content with JavaScript.

Why is React called a single-page application? MDN lists React among the most popular SPA frameworks. In a SPA built with it, views switch in the browser without new page loads.

Sources

  1. SPA – MDN Glossarydeveloper.mozilla.org
  2. JavaScript SEO basics – Google Search Centraldevelopers.google.com
  3. Fix search-related JavaScript problems – Google Search Centraldevelopers.google.com

Last updated: