⌘K
Noting Found

View all related articles

All You Need to Know About Single Page Application

JavaScript 2 mins read

Table of Content

    Introduction to Single Page Application (SPA)

    Single Page Web Applications have come a long way since they first appeared around 2003. They have become an integral part of the modern JavaScript landscape.

    Turbolinks

    What is Single Page Application

    A single page application (SPA) is a website design approach where each new page's content is served not from loading new HTML pages, but generated dynamically through JavaScript's ability to manipulate the DOM elements on the existing page itself.

    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.

    How Single Page Application (SPA) Works

    So in another word, the HTML5 history API allows us to alter the page's URL without reloading the page and separate URL s for different views.

    Once inside the SPA, the application is able to dynamically fetch content from the server through Ajax Request Or Web Sockets.

    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.

    Static Websites VS Single Page Application (SPA)

    To gives, you are an example of the SPA approach in action compared to a traditional approach To understand deeper.

    On the left side, we insert an iframe with the traditional HTML page approach, and on the right side, we insert the same content served dynamically by bundling our JavaScript application with the HTML and CSS needed to render the page elements.

    Static Websites VS Single Page Application

    The new content on the right is served as soon as it's clicked, whereas the one on the left requires fetching the HTML and reloading in the browser.

    Great, no need to reload the page! But, we must be sacrificing load times by requiring that our visitor's browser download and interpret the JavaScript before showing anything on the page, right?

    A trick we can use, called server-side-rendering (SRR), is to include the initial view of the page in the original HTML while the JavaScript is being downloaded and executed.

    Once loaded, the JavaScript will bind to any events (Such as a mouse clicking on a new link or a page scroll) and update the page elements as desired.

    This provides the best of both worlds: fast initial load times and fast page updates or "reloads". Cool Right?

    When to use SPA and When Not?

    The most question asked in the world, :) When Should you consider using a single page application? And when not, it is a good idea.

    So we must consider in our mind some steps to answer that question.

    First, if you'd like a rich interaction between the user and your application, an SPA is almost a necessity.

    An application such as Google Maps makes 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 and SPA?

    In another land, if your content is purely static, introducing and SPA worsens load times for the user, requiring the user to download and execute the JavaScript payload before being able to view any content.

    The server-side-rendering approach discussed above can improve the situation for load-time, as well as provide some basic readability for users without JavaScript enabled.

    We recommend at least having base functionality for your content visible for users that don't have JavaScript enabled so That They will have the chance to decide to enable JavaScript based on what they've seen from the initial page load.

    Conclusion

    in this article, we saw together the meaning of an SPA and how it works with a Comparison between the SPA and Static Websites, and finally when to use SPA and Wen Not. I hope you enjoy reading this article and don't forget to share it with your friends and subscribe to our newsletter for weekly news and Tech Articles.

    Related Tags

    About the Author

    Oussama's Profile Picture
    Oussama
    Full Stack Web Developer | Technical Writer

    Oussama is an experienced full-stack web developer with a strong focus on Laravel. He's passionate about crafting web applications with Filament and the TALL Stack. With 8+ years of experience, and he's a dedicated open-source contributor.

    Comments

    Join our newsletter

    Subscribe to Our Newsletter and never miss our offers, latest news, Articles, etc.

    We care about the protection of your data. Read our Privacy Policy.