Pre rendering media sites with nuxt.js & netlify

by Wolfgang Ziegler // fago
Pre-Rendering Media Sites with
Nuxt.js & Netlify


Wolfgang Ziegler // fago

Twitter: @the_real_fago

Core contributions:
 Drupal 8 Entity API & Typed Data API

Contrib:
 Rules, Entity API, Field Collection, Profile2

CEO / CTO of drunomics GmbH
About me

What‘s pre-rendering
Data source (e.g. Drupal)
+
Pre-render process
=
Static files
(.html, .css, .js, ..)

Why to pre-render?
●
Performance – static sites are fast!
●
Easy way to decouple
- without SEO concerns
- while keeping hosting cost &
complexity down!

The progressive Vue.js framework!
http://nuxtjs.org

Why Vue.js?
●
Approachable
– Tries to stick HTML , JavaScript, CSS standards
– Great documentation!
●
Versatile
– easy to get started
– incrementally adoptable (router, store, …)!
●
Performant!
– 20kB gzipped, Virtual DOM

●
follows Vue.js principles
●
includes all needed for fully-fledged applications
– Transpilation, CSS (Pre-)Processors
– Routes, with automatic code splitting, ...
●
Modular (PWA, Axios, ...)
●
Performant & Enjoyable

Nuxt.js Rendering
●
Single Page Application (SPA)
– Small initial page → JavasScript + APIs
●
Server Side Rendered
– „universal“ or „isomorphic“ mode
●
Statically generated
– It‘s pre-rendered – no need for a server!
– Can be combined with API requests

Netlify
●
All-in-one (hosting) platform for static
sites
●
Automatic deployment after Git
commits
●
Builds your app per branch / PR
●
Atomic deployments, SSL, automatically
managed CDN, free tier

Netlify + Nuxt.js
●
npx create-nuxt-app ams-demo
●
Push to Github
●
Log into netlify.com and connect it
●
Configure build command:
npm run generate
●
Deploy!

Results...
●
https://github.com/fago/nuxt-netlify-ams
→ Build time: 50s. Total deploy time: 50s
https://5db7774547e9e00008f5f780--
pensive-goldberg-02ea42.netlify.com/

Great setup for serving content
●
Drupal serves as editoral application
●
After changes, the Netlify builds gets
triggered! (via API)
●
Deployment happens fully-automated!
●
Fast and reliable CDN powered site!

… but how do you
●
deal with instant updates?
●
handle large amounts of content?
●
handle personalized content?

Personalization via API
●
Have a general pre-rendered site
●
Login via API
●
Fetch personalized data via API
●
Let Vue.js handle DOM updates

Instant updates
●
Regularly pre-generating static sites!
●
but still…
pre-rendered pages might be not fresh
enough!
●
Use APIs to fetch latest updates!
→ Apply changes via Vue.js

Massive amount of content
●
Pre-rendering huge amount of content and
pages takes time!
~12.000 pages takes about 20min!
●
Incremental pre-rendering is not there!
●
Thus: Pre-render parts & deliver main
content via Drupal

Pre-render the page shell
+ Main content
=
Pre-rendered content
Dynamic content
Pre-rendered page Drupal provided
content
Complete page

So rendering on the backend again?
●
Only render simplified markup using
„Custom Elements“
●
Render custom elements client-side with Vue.js!
<pg-quote>
<p>Rendering custom elements is as easy as pie!</p>
<span slot="author">fago</span>
</pg-quote>
<pg-twitter src="#the-twitter-post-link">
<h3 slot="title">The title value</h3>
</pg-twitter>

Frontproxy: Pre-build page response
●
Make Drupal provide the main content via API
+ needed page metadata via API
●
Handle requests by
– fetching pre-generated page shell
– Main content from API
●
Form-submissions, sessions etc. all working as
usual!
●
github.com/drunomics/lupus-frontproxy

Frontproxy + API backend
example.com/{ path }
static.example.com/layout
—default.html
example.com/api/{ path}
Cookies,
Form-data,
...

Lupus CE Renderer module
●
Switches main content renderer to deliver it
via API
●
Only handles main content – no block layout!
●
Adds page metadata (title, breadcrumbs,
metatags)
●
https://drupal.org/project/lupus_ce_renderer

Client-side route changes!
●
First page request → Handled by the
frontproxy!
●
Subsequent page requests:
– Client-side application fetches main content from
API
– Apply changes (Page content, Page metadata)
→ Better UX and performance by avoiding
full page reloads!

Custom Elements
●
Enable client-side rendering via Vue.js /
Web / or React components
●
SEO-friendly without pre-rendering:
– HTML responses with regular content in slots!
– Custom Elements are standardized by the
W3C as part of the web components spec
●
Simplified and more semantic markup!

Custom Elements & SEO
●
render essential data with standard HTML
tags and attribtues
●
Keep links between your pages!
<a is="teaser-wide" href="/your-article">
<h2 slot="title">Article title</h2>
<div slot="excerpt">Some excerpt....</div>
</a>

Custom elements module
●
Renders entities into Custom Element
markup
●
Comes with „Custom elements everywhere“
●
Provides a Symfony Serializer-like API
generating Custom Elements markup
●
Layout-builder compatible
●
https://drupal.org/project/custom_elements

A novel approach to
progressively decoupled Drupal
●
Decouples frontend rendering from the
backend!
●
Backend stays in control of routing &
URLs,
form processing, sessions, …
●
Easy caching & scalability at the backend!
→ Cache your API requests!

Conclusions
●
Advantages of decoupled frontend!
●
Editors & site managers stay in control!
●
Performance – less issues with cache tags!
●
No Node.js hosting required
●
Con: Team needs to understand it!

Nuxt.js rendering options!
Option to turn on Nuxt.js SSR and replace
the frontproxy!
●
Still easy to scale (but cache page shell?)
●
Less worrying about SEO friendly markup
●
One more service to run & pay hosting
cost

Join us for
contribution opportunities
Thursday, October 31, 2019
9:00-18:00
Room: Europe Foyer 2
Mentored
Contribution
First Time
Contributor Workshop
General
Contribution
#DrupalContributions
9:00-14:00
Room: Diamond Lounge
9:00-18:00
Room: Europe Foyer 2

What did you think?
Locate this session at the DrupalCon Amsterdam website:
https://drupal.kuoni-congress.info/2019/program/
Take the Survey!
https://www.surveymonkey.com/r/DrupalConAmsterdam

Pre rendering media sites with nuxt.js & netlify

Recommended

More Related Content

What's hot (20)

Similar to Pre rendering media sites with nuxt.js & netlify (20)

Recently uploaded (20)

Pre rendering media sites with nuxt.js & netlify