SPA
25 bites tagged SPA — interview questions with model answers, and 60-second explainers.
What is SSR and what are its advantages over a client-side SPA?
This tests server-client rendering trade-offs. A strong answer defines SSR as server HTML generation plus client hydration, citing faster time-to-content, better SEO for async data, and unified component logic.
How do you manage router scroll behavior and history position restoration?
Use scrollBehavior to return savedPosition on popstate and top: 0 on new navigations; handle hash anchors and async delays. Your grasp of popstate and centralized router scroll orchestration.
What are nested routes and why are they useful?
Nested routes render children inside a parent's router-view, preserving shared layouts while URL segments swap nested content. hierarchical UI-to-URL mapping. flat routes with duplicated parent wrappers in every child.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
SPA back button: what event fires and how do you handle it?
Tests History API literacy. Strong answer: popstate event, PopStateEvent type, restore UI via event.state, and zero-delay setTimeout for DOM sync. Red flag: confusing popstate with pushState or using hashchange for modern History API routing.
Programmatically change SPA URL without reload and what is state for?
This tests History API fluency. Answer: use pushState or replaceState to change the URL silently; the state object is serializable data tied to the history entry, surfaced through popstate on back or forward navigation.
What is the fundamental difference between client-side and server-side routing?
Server routes return full documents and reload; client routes swap JS views and use the History API without server requests. You know server routing fetches HTML pages, while client routing runs in the browser.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.
BrowserRouter: Real URLs in React SPAs
BrowserRouter turns the address bar into a client-side navigation system, using real URLs without reloads. It is the default choice for SPAs that need shareable links.
Accessibility pitfalls in SPAs and programmatic fixes
Cover route-change focus reset, ARIA live regions, semantic landmarks in dynamic markup, and keyboard trap prevention. SPAs lose native page-load cues, breaking screen reader context.
How do you track page views in a Single Page Application?
This tests SPA analytics beyond classic page loads. A strong answer covers History API pushState and popstate events, framework router hooks like useEffect or afterEach, and beaconing views. A red flag is relying only on window.load or polling URL changes.
How do you track page views in a Single Page Application?
Tests your grasp of SPA navigation vs. traditional page loads. A great answer explains how SPA routers use the History API (`pushState`) and how to listen for changes to send analytics events. A red flag is suggesting polling the URL.
How do you track page views in a Single Page Application?
This tests your grasp of SPA routing mechanics. A great answer covers both programmatic navigation (using router hooks) and browser history events (`popstate`), explaining why both are necessary.
Declarative Route Configuration in Vue
Declarative routing maps URL paths to components like a switchboard. You define a list of routes, and the framework renders the correct view when the URL changes. This is standard for SPAs.
Vue Router: Controlling Scroll Behavior
In a SPA, the browser doesn't manage scroll position; `scrollBehavior` is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting `savedPosition`, breaking native back-button behavior.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (`/users`) but needs server setup, while hash mode uses a hash symbol (`/#/users`) and works out-of-the-box.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a `<transition>` component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: `params` are ignored if you also provide a `path`—use a named route instead.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for `<a>` tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard `<a href="...">`, which reloads the page and loses application state.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
The `popstate` Event: Handling Browser History Navigation
The `popstate` event lets your app react to browser back/forward clicks. It's key for SPAs to update views without a full reload. The main footgun: the event fires before the document is fully updated, so your handler might read a stale DOM.
Manipulate Browser History with pushState and replaceState
Make a single-page app feel like a multi-page site. `pushState` changes the URL without a full page reload, creating a new browser history entry. This is essential for SPAs to enable shareable links and a working back button.
History API: Change URLs Without Page Reloads
The History API lets you manipulate browser session history, enabling single-page app (SPA) routing without full page reloads. It's used to create "virtual" pages by changing the URL and state.
Get SPA bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.