Dynamic from Static
with Smart Deployment
_me
https://res.cloudinary.com/mayashavin/image/upload/v1576150904/senior_FED.jpg
extra_: {
core_team_StorefrontUI_,
organizer_VueJSIsrael_,
blogger_,
bookworm_📖🐛_
}
stack_
JavaScript
API
Markup
web servers
backend
databases
run-time
frontend
reusable APIs
serverless functions
build-time
page generating
backend
web servers
databases
run-time
template generating
file-driven
data-driven
stack
=
Static sites with dynamic functionalities
cloudybadge$ ls tools
✅ Static site generator
✅ ONE data layer
✅ External APIs
✅ Static hosting
>perf.measure()
⏩ FAST First Paint, First Contentful Paint & Time to Interactive
🔐 HIGHER Security
🚀 CHEAPER, EASIER Scaling
⏩ FAST Time to First Byte
deployed = true
>console.log(Static === Dynamic)
CloudyBadge
Pre-render pages
Deploy Hooks
(HTTP POST request)
Build trigger
Deploy
_$hooks
New attendee
Hook trigger by HTTP request
New build
Delay
Deployment
_$build
fastest static site generator for Vue.js
@tommyvedvik
_$build
👉 Render HTMLs
👉 Create pages & templates
👉 Create GraphQL Schema
👉 Execute GraphQL & write page data
👉 Processing files
👉 Processing images
Source data during build
Rebuild EVERY file
Process BIG images in build
Can build ONLY new file(s)
Can cache unchanged files
Current time
Real data (being built)
>build.improve()
FASTER machines
FASTER JavaScript
FASTER bundle tool (Webpack)
🤷♀️
FASTER
SMARTER
>build.improve()
LESS data source loading time
Only fetch NEW data entry
Incremental Builds
Provide new data entry info on build trigger
>build.improve()
Pre-build static pages
Hybrid approach ( SSR + SSG)
Load-in-demand dynamic pages
Display SSR version of page (ghost)while waiting for rebuilding
>build.improve()
No process time for images/video
Outsourcing images & videos
Optimize image delivery
Save hosting storage
>build.improve()
Remove legacy code
Help bundling faster
>build.improve()
Deduplication
New deployment ONLY when needed
>build.improve()
Progressive deployment
Deploy & update new content instantly and silently on client's side
>build.improve()
Schedule deployment
Build job with interval (low peak time)
> console.log(summary)
💥 Static site is new dynamic with proper architecture
💥 Build SMARTER means FASTER
💥 Use Gridsome for static site generator
💥 Use proper Datasource (CMS) to allow incremental builds enabled
💥 Choose the right static site deployment platform (SSDP)
_THANK YOU_
