- Meaning of SPAs.
- How SPAs work.
- How different pages are visited.
- What role do React play.
- Versus how MPAs work.
You might have got attracted to this post while following some React JS course or any other framework like that. Single Page Application... well, that's confusing. As a beginner, I initially had this wrong notion that SPAs means "my visitors will only get to see one page", WRONG!
HTML goes first to the browser... it then loads your script, CSS, etc. What typically happens in a SPA is that we have only one html file, index.html (just the naming convention). This html file then loads up rest of our components.
Hmm.. you still didn't understood how exactly the user gets to visit different routes or page. The only html file in our application have a 'root' ID (refer to image1 below). This root is populated using simple javascript document.getElementById('root') in a JS file (refer to image2). This JS file has routes for all the components we have to load.
Okay so now that we know how the SPA work, having a single html template. B.. but how exactly different pages are navigated and fetched in SPAs and Multi Page Applications and what role to React play?
Single Page Applications (SPA) :-
Once the visitor hits our single html template on the server, React takes over and control what content has to be displayed based on the routes visited that is /contact /about or any other destination like that. Let me simplify, React forms a DOM (Document Object Model) and saves it to the memory, virtual DOM. This DOM forms a structure of documents to be displayed considering the destinations visited. This DOM might be influenced based on whether the user is signed in or out and a lot more things like that.
Multi Page Applications (MPA) :-
In a Multi Page Application we have different html templates for every page. In sense, a different html page is loaded for every destination.
Thank you! If you liked my post, please let me know on Instagram @digvijaysrathore or Twitter @novadigvijay
Top comments (0)