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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Lab Notes: Exploring the Compatibility of React Native for Android Things

How To Implement a Linked List

Write your React Native library and publish to NPM with Typescript

Bitbucket-Pipelines: Run npm audit on a regular interval

11 Frontend tricks that most Frontend Developers don’t know about

React Props and State - A basic introduction 😃

The state of JavaScript modules

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
Venecia Calista

Venecia Calista

helloo

More from Medium

How to implement Sentry.io + Next + TypeScript.

How to use Swiper.js with React.

Data Fetching with Next JS-Demystified

The Beginner’s Guide to React Redux