SPA Architecture and How Does it Work?
Imagine a Single Page Application (SPA) to be like a magical book. In a traditional book, you flip pages to move to different chapters. However, in the magical SPA book, every chapter appears instantly with a wave of your hand, without having to flip pages. You get fully absorbed in the story without any interruptions. Similarly, SPAs function on the web by smoothly loading and updating content, allowing users to explore the digital world without any delays that come with traditional websites.It includes three renderings :
Client-side rendering
- First browser requests HTML from the server.
- Then server swiftly responds with a basic HTML file and linked styles/scripts.
- Now user sees a blank page or loader while JavaScript executes.
- App fetches data, creates views, and injects them into the DOM.
Client-Side Rendering (CSR) can be slower for basic websites because it uses a lot of device resources. Yet, it’s good for busy websites, making things faster for users. Just remember, if you want different social sharing options, you might need Server-Side Rendering (SSR) or Static Site Generation (SSG) instead.
Server-side rendering (SSR)
- The browser first asks the server for an HTML file.
- Now server gathers necessary data, builds the SPA, and creates an HTML file instantly.
- Now user sees the content ready to go.
- Single-page app structure adds events, makes a virtual DOM, and gets things ready.
- Now, the application is set for use.
HUSPI opts for server-side rendering to achieve a swift application experience, balancing the speed of single-page applications without burdening the user’s browser, ensuring optimal app performance.
Static site generator (SSG)
- Browsers ask for HTML, SSGs quickly provide pre-made static pages.
- The server shows users the static page for fast loading.
- SPAs in the page fetch data and make dynamic changes to the page.
- SPA is ready for smooth user interaction after data is added.
- SSGs are great for fast static pages but may not be ideal for highly dynamic websites.
While static site generators offer a quick and efficient solution, it’s crucial to note that they might not be the perfect fit for websites with dynamic content. Their strength lies in static pages, aligning with their name.
What is Single Page Application?
A Single Page Application (SPA) is a type of web application that loads and updates content dynamically without refreshing the entire page. Unlike traditional websites, SPAs use modern technologies to enhance the user experience by minimizing interruptions and providing a smoother interface. Users can interact with the application seamlessly, similar to using desktop software. The main advantage is the elimination of full-page reloads, resulting in a more responsive and engaging web experience. This is achieved by ensuring that the browser obtains all essential HTML, JavaScript, and CSS codes in one request or updates the necessary content based on user actions.
When you click on something in a SPA, it only sends the necessary information to your browser and the browser renders it. This is different from a traditional page load, where the server sends a full page to your browser with every click you make.