Making sense of SSR, SPA, and Pre-rendering

--- title: Making sense of SSR, SPA, and Pre-rendering tags: Talk description: View the slide with "Slide Mode". --- # Making sense of SSR, SPA, and Pre-rendering by Amirul Abu Note: 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). --- ## Who am I? - Software Engineer at Vase - VSCode :heart: - Node.js + Serverless, Nuxt.js, Flutter. :cat: --- ## Glossary :book: - SPA: Single page application - SSG: Static site generator - SEO: Search engine optimization --- ## Glossary 2 :book: - SSR: Server side rendering - classic SSR: eg. RoR, Django, Laravel (:rotating_light: not an official term) --- ## Server side rendering __Server sent__ ```html <h1> Hello World </h1> ``` __Browser parse__ ```html <h1> Hello World </h1> ``` --- ## Additional SSR features - in Next.js you can do server-side or client-side transitions between routes server-side ```jsx <a href="/another-page">Link to another page (using anchor tag)</a> ``` client-side ```jsx <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__ ```javascript React.createElement("h1", null, "Hello World"); ``` __Browser parse__ ```html <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 export` works 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 export` works by prerendering all pages to HTML --- ### Now imagine you are a Solutions Architect <small>Lets see are you guys paying attention or not...</small> Note: - ask audience to answer in chat --- ## Before that... --- <img src="https://i.imgur.com/SmhUL8B.jpg" height="600px" /> --- ### What should we use for... # E-commerce Note: - its a trick question. --- ### What should we use for... # E-commerce web app like Lazada - user generate content - we want the website to be instantly updated Note: - SSR --- ### What should we use for... # E-commerce web app that is rarely updated - eg. some music bands selling their album - updated once a month Note: - Pre-rendering, can deploy static site cheaply - everytime website need updating, need to build and deploy. - it depends, if website is updated more than once daily, may consider changing to SSR --- ### What should we use for... # Internal web app like CRM Note: - SPA - easier to integrate with npm packages - tables, charts --- ### What should we use for... # Personal blog Note: - SSG, static site generator - pre-rendering also can + headless cms --- ### What should we use for... # News site - user generated content Note: - SSR - pre-rendering also can + headless cms --- ## How about others? - Phoenix LiveView - Laravel Livewire - Hotwire Note: - Phoenix LiveView - LiveView is server centric. You no longer have to worry about managing both client and server to keep things in sync. LiveView automatically updates the client as changes happen on the server. - Then LiveView uses a persistent connection between client and server. This allows LiveView applications to react faster to user events as there is less work to be done and less data to be sent compared to stateless requests that have to authenticate, decode, load, and encode data on every request. - Livewire - When an interaction occurs, Livewire makes an AJAX request to the server with the updated data. - The server re-renders the component and responds with the new HTML. - Livewire then intelligently mutates DOM according to the things that changed. - Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire --- ## Wrap up - Static files is easier and cheaper to deploy - Server rendered can be updated instantly - and... --- ![](https://i.imgur.com/1mMwfi3.png) --- ### Thank you! :sheep: You can find me on - GitHub AmirulAbu - Twitter @AmirulAbu

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.