vueschool.io

Rolf Haug

Teacher @ Vue School 

Full Stack developer

Consultant

Foodie 🌶

@rahaug

Oslo, Norway

Alex

Kyriakidis

Teacher @ Vue School
Author of The Majesty of Vue.js 1 & 2
Vue.js Contributor

Consultant @ RxVantage

@hootlex

Amsterdam

Learn Vue.js through video courses

235 lessons • 49.000+ users 

Static Site Generation

🛠

Side effects

Of modern JavaScript frameworks

Jumping Content

When a page layout changes or shifts unexpectedly

Ajax partials are loaded asynchronously

What causes the side effect?

Commonly seen

with Ads

Happens with any content that is loaded after initial render

It's annoying to click the wrong button!

Fetching async data from API's is common & necessary

A  User Experience Issue

Another,

more serious

side effect...

Search engines struggle to index many JavaScript powered sites

SPA vs Static Pages

• Easier to index & crawl
• Hidden and visible content is available on initial render

Crawlers get all the information they need to index it right away

Search Engines

• Get the content available on the initial render

• Simulate a browser

• Run the JavaScript

• Index the page

Requires significantly more computing power

Googlebot defers indexing of JavaScript powered websites

Oh mighty Google is putting us on hold...

...until they have the capacity to index our sites

Googlebot uses Chrome 41

Fun Fact

Indexing JavaScript apps is not an easy task for crawlers

Make no mistake!

The indexing issue

is serious

What can we do?

Server Side Rendering

Server Side Rendering

• Solves the page jumping

• Makes our website indexable

• Increases performance

Server Side Rendering
is great

But!

We can go completely static

Pure static HTML files do not need a server

Thanks to awesome companies like Github and Netlify

Free hosting 🎉

How does it work in practice?

StaticGen.com

High Level SSG

• Parse your config or routes

• Render your app

• Store the output in static files

Keep our modern workflow

Static sites are *not* the new cool kid on the block!

Text

Static Site Generators are awesome

They help us solve some of the challenges we face with modern frontend technologies
and frameworks today

User Experience 🤓

We reduce the shifting layout issue

SEO 🔍

Pre-rendering improves indexability and helps social media crawlers, chat services, etc.

Performance 🏎💨

Nothing beats static sites when it comes to performance

Hosting 🏝🌤

• Cost of hosting
• Hosting on Content Delivery Networks
• Easy to set up, manage and scale

Security 👮‍♂️

Articles and experts claim that static sites are more secure

Glorified security statements?

🤔

A CDN will handle DDos attacks for you

✅ A very nice-to-have security perk

What about rich static sites?

Do we really get rid of the security concerns?

• SQL Injections

• Serverside Security holes

• Cross-site scripting (XSS)

🙈

Or do we just move them?

Perfect Use Cases

• Business website

• Blog

• Portfolio

• Presidental Campaign

Obama's 2012 Campaign

website was built Jekyll

Static Site Generation
is awesome

Demo time!