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_
@mayashavin
mayashavin.com
Dynamic from Static with Smart Deployment
By Maya Shavin
Dynamic from Static with Smart Deployment
Static site generators (SSG) become more powerful and efficient in building and serving performant sites to end users. But when it comes to dynamic content, the latency in static site deployment brings up the new dimension of UX implication, the freshness gap of served content between builds. Performance is not only about what we deploy to end users, but also about how we build and deploy. How do current modern SSDPs leverage this problem? What are the options and approaches do we have to help SSDP being "smart"? That's what my session is about.
