SPA? SSG? SSR?

confused Jackie

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

spa in my head

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:

Netflix network example

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store