Dynamic from static with the RIGHT stack

Maya Shavin

console.log(Maya)

Senior Frontend Developer at Cloudinary

Core Maintainer of StorefrontUI

Organizer of Vuejs Israel

Nuxt Ambassador

Blogger

Manga-addicted & Bookworm

Jamstack

SpaceJam, traffic jam or Jam?

Jamstack as a trend

Fast?

Slow?

JavaScript

CMS APIs

Secured

Markup

What is Jamstack?

What is Jamstack?

Pre-rendered STATIC sites

Serve from CDNs (Content Delivery Networks)

NOT rely on specific monolith web server

NO Server-side rendering on RUN-TIME

Web server

Use SERVER-LESS functions

The development tools

🤯

VitePress

Is Jamstack fast?

And "being fast"  means good performance?  ?

The goal of Jamstack 

😢

Good tools !== Good performance

Need a bit more than just good tools together...

Jamstack Performance

Plan

Develop

Deploy

What?

How?

Where?

Planning

What are the use cases and what tools work best together ?

Use Cases

Planning

Scale of project

Cost of project

Available integration between tools

Maintenance efforts

#1 - Documentation

VitePress

Out of the box features

Not 100% customizable

Fully customizable

No add-in features

Under development

Lighter page

Faster build

Easy setup with themes

#2 - Scaleable projects

Full control

100% Client-side

Requires manual setups

Super fast build

No built-in routing

Different build modes

Out-of-the-box integration modules

Faster build with cache

Built-in routing

Built-in data layer (GraphQL)

SEO built-in

Built-in routing

NuxtJS

Gridsome

Fit with any static site generator

Open-source

Live preview

Customizable & Extendabe

No good User Interface

Unlimited content types

Highly customizable

Good plugins & extenstions

Good documentation

API-based CMS

#3 - Working with content

Image API

Limited content types

Affordable 

Hard to maintain

No Scheduling

Costly

Good documentation

Advanced webhooks

Not scalable

DX is a problem

Sanity

Built-in project management system

Code-less builder

Content previews

Schedule publishing

i18n supported

Slice machine

Open-source

Greate media support

Secured APIs for content delivery

No WYSIWYG Editor

Great boilerplate starters

#3 - Working with content

Code-less component builder

Live preview

Easy to setup

Buggy 🐛

WYSIWYG Editor

Extendable types

Prismic

StoryBlok

#3 - Working with Database APIs

Callback support for data changes

GraphQL Support

Full user concept support with authentication and rules

Server-less NoSQL DB with relational DB performance

Allow user to write complex rules

FAUNADB

FIREBASE

#4 - Serverless functions

Development

How to write efficient code?

Smaller the bundle, better the performance

Tips for development

Bundling with care

Write GOOD code

Use PurgeCSS

Use 3rd party library with tree-shaking support

Remove legacy code

Deployment

@mayashavin

Which hosting platform to choose?

Netlify Form

Analytics

Support Git Submodules

Build Plugins

Great GUI

More regions and languages supported

Cache serverless function responses

Friendlier custom function signatures

Powerful CDN

Good Documentation

Not supporting Git Submodules

Documentation is a 🤷‍♀️

console.log(takeaways)

💥 Static site is new dynamic with proper architecture

💥 Write good code

💥 Plan the right solution (Hybrid or Static)

💥 Select the matched CMS and its integrations

💥 Choose the right static site hosting platform

💥 Use Cloudinary!

THANK YOU

Made with Slides.com