SPA? SSG? SSR?
As a web developer, you must have heard of the terms above at least once. I’m only familiar with the term SPA but haven’t quite gotten the concept of it yet. It’s really confusing for me like why do we have different rendering methods, why does it matter, why must we use this and not the other one lol (above image represents my face when learning those terms for the first time). So I decided to write what I’ve learned so far and please feel free to comment if I got something wrong or I need to add something that might be helpful.
SPA
Definitely not what I imagine 😂
Apparently, SPA = Single Page Application is a web application/website that interacts with the user by rewriting only the part that needs an update instead of re-loading the entire page. This behavior creates faster transitions and feels more like native app.
For example, when we post comments on Instagram or reply on Twitter, the page doesn’t reload but our comments can appear under the post. It means that the UI is dynamically updating just that section only.
SSR
Server-side rendering means when we requested a website, the server render and create HTML page that our browser only needs to serve it. SSR is not interactive as it is pre-rendered. Some advantages of using SSR:
- SEO Friendly
- Faster load time
- Best for static sites
Usually a website that uses SSR will load like this when we inspect the network:
Why is SSR SEO friendly ?
Search engines like Google use automated bots to crawl website metadata. When using Client-side rendering, content on our pages are generated through JS. Imagine when the bots come and our page is blank, it cannot get any information about our page content and have no idea what our website is about. This affect page ranking in search result. In SSR our page already loaded on the server side and the bots can easily save our website information.
SSG (Static Site Generator)
A bit similar with SSR = also generated in server but instead of rendering page upon request SSG page is rendered at build time and waiting to be serve to client side ( cannot access localstorage, user info, etc). SSG have better load time than SSR.
