Making sense of SSR, SPA, and Pre-rendering
by Amirul Abu
Who am I?
- Software Engineer at Vase
- VSCode
- Node.js + Serverless, Nuxt.js, Flutter.
Glossary 
- SPA: Single page application
- SSG: Static site generator
- SEO: Search engine optimization
Glossary 2
- SSR: Server side rendering
- classic SSR: eg. RoR, Django, Laravel (
not an official term)
Server side rendering
Server sent
<h1> Hello World </h1>
Browser parse
<h1> Hello World </h1>
Additional SSR features
- in Next.js you can do server-side or client-side transitions between routes
server-side
<a href="/another-page">Link to another page (using anchor tag)</a>
client-side
<Link href="/another-page">Link to another page(using next/link)</Link>
Additional SSR features
- generate and deploy as Node.js process
- good for SEO
- easier tree-shaking js code per page
Single page application
Server sent
React.createElement("h1", null, "Hello World");
Browser parse
<h1> Hello World </h1>
Additional SPA features
- only client-side transitions between routes
- generate and deploy as static files
- loads the whole application on first load
Pre-rendering
- is a subset of SPA and SSR
- you get SEO benefits since pages is already rendered
- possible to generate dynamic routes during build time eg. /comment/:id
- need to rebuild if content is added
- Next.js
next exportworks by prerendering all pages to HTML
Pre-rendering
- is a subset of SPA
- you get SEO benefits since pages is already rendered
- possible to generate dynamic routes eg. /comment/:id
- Next.js
next exportworks by prerendering all pages to HTML
Now imagine you are a Solutions Architect
Lets see are you guys paying attention or not…
Before that…
What should we use for…
E-commerce
What should we use for…
E-commerce web app like Lazada
- user generate content
- we want the website to be instantly updated
What should we use for…
E-commerce web app that is rarely updated
- eg. some music bands selling their album
- updated once a month
What should we use for…
Internal web app like CRM
What should we use for…
Personal blog
What should we use for…
News site
- user generated content
How about others?
- Phoenix LiveView
- Laravel Livewire
- Hotwire
Wrap up
- Static files is easier and cheaper to deploy
- Server rendered can be updated instantly
- and…
Thank you! 
You can find me on
- GitHub AmirulAbu
- Twitter @AmirulAbu
Making sense of SSR, SPA, and Pre-rendering by Amirul Abu Oh hey, these are some notes. They’ll be hidden in your presentation, but you can see them if you open the speaker notes window (hit s on your keyboard).
{"metaMigratedAt":"2023-06-15T18:53:17.977Z","metaMigratedFrom":"YAML","title":"Making sense of SSR, SPA, and Pre-rendering","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"a5f8019e-0673-4dcc-9de7-50a212465f06\",\"add\":8047,\"del\":3366}]"}