In this post, we’ll examine the fundamentals of a single-page application with server-side rendering and discuss the pros and cons of using such an approach in your web properties.
Introduction to single-page applications (SPA)
In a more traditional web page architecture, an index.html page might link to other html pages on the server that the browser will download and display from scratch.
An SPA approach allows the user to continue consuming and interacting with the page while new elements are being updated or fetched, and can result in much faster interactions and content reloading.
In addition, the HTML5 History API allows us to alter the page’s URL without reloading the page, allowing us to create separate URLs for different views.
How do I update the content dynamically?
Once inside of the SPA, the application is able to dynamically fetch content from the server through AJAX requests or websockets.
This allows the browser to keep the current page open while making requests to the server in the background to fetch additional content or new “pages” altogether.
If you’ve ever begun a search query and had intermediate results appear below the input form as you were typing, then you’ve witnessed dynamic queries taking place in the background that updated those DOM elements.
In fact, the server queries can fetch any kind of data, often taking the form of JSON payloads, strings, or even HTML elements that are already prepared for rendering.
Static websites vs. SPAs, side-by-side comparison
Try clicking through the various links on each.
You’ll notice that the new content on the right is served as soon as it’s clicked, where as the one on the left requires fetching the html and reloading in the browser.
Static website live example
SPA live example
Great, no need to reload the page!
This provides the best of both worlds: fast initial load times and fast page updates or “reloads.”
When to use a single-page application and when not?
When should you consider using a single-page application?
First, if you’d like for rich interaction between the user and your application, an SPA is almost a necessity.
Applications such as Google Maps make extensive use of this approach to provide real-time view changes as you scroll from one place to another, or click on place markers to view photos of a particular place.
Second, if you want to provide real-time updates on the page, you’ll most certainly need to make use of this approach; notifications, data streaming, and real-time charts require the use of such an approach.
Should you ever avoid using an SPA?
Second, one can improve accessibility for users with older browers or slower internet connections by simply displaying the static HTML content upon request.
Finally, failing to display any HTML content can hurt SEO rankings if bots are not able to view any of the headers or content.
How to build a single-page application?
Now, if you wonder how to go on from there and want to dive into code and architecture, we suggest you to have a look at how to build a single-page application with ClojureScript and re-frame