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.

  • 784
Loading comments...

More from Maya Shavin