Headless WordPress - Codeable Expert Talks

Publié le: 08 avril 2021
sur la chaîne: Sam Carlton

419

How to use WordPress with any web application on any platform in any language.

In this talk, I break down Headless WordPress and how it can help you fix a slow WordPress site without having to start from scratch along with the many other benefits it bring to your site.

Sam Carlton on Codeable
https://codeable.io/developers/sam-ca...

Heavily inspired by talks from Codeable Developer Alexandra Spalato
Building Gatsby Themes for WordPress - • Building Gatsby Themes for WordPress with ...
Using WordPress as a Source for Gatsby - • Using WordPress as a Source for Gatsby - A...

Full Resources Link
https://sam.lc/headless

0:00 Introduction
1:30 What is Headless WordPress?
11:24 Why use Headless WordPress at all?
35:20 Getting things working
40:32 Frameworks to pull in data
46:00 Questions
53:01 Example Sites
57:30 How to Sell Headless WordPress to Clients

—— Talk Notes ——

What is Headless WordPress?

Traditional server rendering is generally: Rendering HTML text for a browser on request. In the case of WordPress, via PHP
Static Rendering can be rendering the HTML once, rendering at a specific frequency/time, or rendering only when the source data is updated.
For example A WordPress Save Hook
This does many things, but one is removing wait time caused by Server Rendering and Database activity.
For instance, you could instantly provide a page that would traditionally take minutes to generate data for and load.
Technically, if you're using caching tools then you're already using this style of rendering just in a more generic and automated way.
Headless WordPress is generating data from WordPress and rendering it Statically or dynamically with custom code and frameworks.
But isn't that still Server Rendering?
Yes, Serverless Applications need servers just like Wireless Routers need wires.
You just don't need Server Rendering on every single request.
It's okay to call it Serverless

Why use Headless WordPress at all?

User Benefits
Dramatically faster device performance
Less site downtime

Security Benefits
Very few common security exploits
Frontend protected from automated attacks
The option to entirely lock down WordPress from public requests

Development Benefits
Git integration while using WordPress
Access to newer dev tools
Faster development cycles
Easier to use testing tools
Automatic Deployments
Instant Site Reverts
Code in any language that can make HTTP requests and read JSON

Infrastructure Benefits
Frees up computing resources for pages that absolutely need server rendering
See Resources for WooCommerce usage
Reduced server costs
Failure hardened sites
Zero-downtime Deployments and Upgrades
Less or no crashes from updates
Full preview versions of each change to the site before deploying live
Easier Scalability
More options for future scaling

Popular Examples of Headless WordPress
New York Times Wirecutter - Next.js
RealCedar.com - Gatsby
Diem.com - Gatsby
TechCrunch - React
Smashing Magazine - React
Qz.com - React

You can use other frameworks, such as Vue, Alpine, Svelte, etc...
One reason people choose React-based frameworks is that parts of WordPress use React.

For New Sites

A lot of the popular frameworks have ready-to-go integrations and boilerplates for WordPress.
See Resources.

For Existing Sites

You don't necessarily have to entirely abandon you're existing WordPress front end.
Subdomains
Alternate domains
Redirects

Doesn't work well with most page builders so going with a simple content editor or Gutenberg for Headless content.

Gutenberg is okay. It's just another content builder.

Getting things working

Choosing your API interface
Rest - Well documented, Official API
GraphQL - More Advanced, Lighter Request Sizes
Making the data available from the WordPress side
Built-in Rest API
Built-in Rest API hooks and filters
WP GraphQL Plugin
JAMStack Deployments Plugin
ACF/ACF Pro - For custom data
Gutenberg + Lazy Blocks Plugin - For custom data displayed within the content

Frameworks to pull in data

Next.js
React-based
SSR-first
Most stable, most mature
Very battle-tested for large scale sites

Frontity
Built for WordPress
React-based
Newer

Gatsby
React-based
More mature

Hugo
Go-based
Fastest generator overall
More mature

Many more...
Jekyll
Zola
Nuxt.js
Gridsome
Eleventy

Static Hosting - Where your code runs and gets deployed.

Netlify
Most popular
Generous free tier
Very well documented
My current favorite in combination with Cloudflare DNS

Vercel
By the same people as Next.js
Good free tier but can require payment earlier
More generous paid plan than Netlify
Support for Serverless Functions in Python, Go, PHP, Deno, and Node.

Cloudflare Pages
Newer
Integrates well with Cloudflare DNS
Very generous free tier
Not as many features yet

More options
AWS Lambda - The OG
Cloudflare Workers - Edge Computing
Google Functions

Sur cette page du site, vous pouvez voir la vidéo en ligne Headless WordPress - Codeable Expert Talks durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Sam Carlton 08 avril 2021, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 419 fois et il a aimé 5 téléspectateurs. Bon visionnage!

874