The single-page application
The single-page application versus the multi-page application; client-side rendering, server-side rendering, static generation and hydration, and what they change for first display, search ranking and the back button.
- 29 cards
- 6 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- On the diagram
- Scenarios
- Understand
A few cards from the deck
Single-page application: what is it?
Show the answer
A web application where the browser loads a single HTML page, then the script replaces the content on each navigation, requesting only data.
Screen changes are fast and keep state, but the first display has to wait for the script.
A user clicks an internal link of a single-page application. What does the network request that follows usually contain?
- A call to the API that returns the screen's data as JSON
- A request for the full HTML page of the new address
- A request for the application's script, to reload on each navigation
- No request: all the data is already in the browser
Show the answer
A call to the API that returns the screen's data as JSON
The router changes the address with no page request and picks the component; the component then asks the API for the data it displays. Only data travels, not the page.
With client-side rendering, the first HTML response mostly contains an empty … and a … tag that will build the page.
Show the answer
With client-side rendering, the first HTML response mostly contains an empty div and a script tag that will build the page.
A robot that does not run the script sees only an empty container: hence the interest of server-side rendering for search ranking.
Multi-page application: what is it?
Show the answer
A web application where each navigation asks the server for a full new HTML page, which the browser displays in place of the previous one.
It is simple, well indexed and robust, but each click reloads styles and scripts and loses the page's state.