Get Started with SvelteKit Headless WordPress

🤷🏽 What on Earth is Headless WordPress? #

Before going any further into how to get started with SvelteKit Headless WordPress, we should take a look at what headless WordPress is. Also, important is why you would want to use Headless WordPress. WordPress powers more websites than any other content management service. In a traditional deployment, you provision a server and that server generates each page your visitor requests and serves it to them, once generated. One modern approach to web development it to create static sites in the JAMStack. Here JAM stands for JavaScript, reusable APIs and prebuilt Markup. With Headless WordPress, we write the JavaScript we need to serve our site in a static app (we will use SvelteKit), APIs provide additional functionality while Markup is the HTML markup our WordPress site generates for us.

Why JAMStack? #

Why use JAMStack? The principal motivation for adopting a static approach is speed together with user experience. Since, we typically use WordPress to create content-focussed sites which are identical for every visitor. So instead of having the WordPress server generate the page on each request, we can generate the page content ahead of time. The clear saving is the generation time on each visit. On top, though, we can have our content cached in a Content Delivery Network, typically for free. This makes that page available at a location close to the user, wherever they might be in the world.

Security #

One downside of WordPress’ ubiquity is it being a target for malicious actors. Static sites also help in this regard. End users just pull cached content from the CDN rather than the WordPress server; they see no WordPress server to target an attack on.

APIs: Serverless and Edge Functions #

You might be thinking, if there is no running server, then how can you keep contact forms and allow comments on your posts. This is where the A in JAMStack comes in, it stands for APIs. We can use Serverless functions to provide these features. Also, static hosting services like Netlify provide features for collecting form data in your static site. Although we do not visit exactly that use case, we see how you can use Netlify Edge functions to proxy image requests. This lets you keep the images on your WordPress site, but show the source in your markup as your static site, keeping the WordPress site private.

🤔 Why Svelte? #

Svelte is a great choice of language for lightweight content sites. It provides a fantastic developer experience, making it a joy to code. Not only that, though; it helps build fast sites. SvelteKit transpiles your Svelte code into HTML, JavaScript and CSS, which visitor browsers can interpret directly. That is without downloading additional libraries. This creates an incredible user experience.

⚡️ Get Started with SvelteKit Headless WordPress: GraphQL and WordPress #

GraphQL offers a fantastic way to interface with data on your WordPress site. It only fetches the data you need. We shall see it can be effortless to generate TypeScript types aliases from your WordPress GraphQL schema and also use these in your SvelteKit code. We use the WPGraphQL plugin which helps open up access to the site media, SEO data and much more besides the post HTML markup.

Creating a new Local WordPress Site and Pushing it to the Cloud #

One of the hardest parts of creating a new WordPress site is pushing your finished local instance to the cloud. We use Local to help here, letting us push the initial site, and database, as well as any updates we require along the way. This also helps generate that initial site, too. Basically, we choose a WordPress version and name for our site, and we are already at the races!

🧱 Get Started with SvelteKit Headless WordPress: What We’re Building #

Our focus is initially on plumbing data we need from WordPress to our SvelteKit app. To finish, we push the local WordPress instance to the cloud then deploy our fast, static SvelteKit frontend to Netlify. Throughout, we explore useful techniques to get your own site or client sites customized just the way you want them. Making sure you can access the data as required. To help, we will build out a skeleton water sports WordPress blog site.

👍🏽 Get Started with SvelteKit Headless WordPress: What we will Cover #

What we cover:

• New SvelteKit 1.0 routing API,
• using WPGraphQL plugin to source WordPress site data,
• creating a dev WordPress site using Local on your machine,
• proxying images using a SvelteKit server endpoint,
• using Netlify Edge functions to add Middleware,
• creating a temporary, free WordPress site in the cloud which you can transfer to a client,
• updating HTTP headers in a SvelteKit endpoint,
• using the Yoast WordPress to power your headless site’s SEO,
• automatically generating TypeScript types from a GraphQL schema,
• feeding through post and page markup from a headless WordPress installation to the SvelteKit frontend,
• deploying a local WordPress installation to the cloud.

⛔️ What we won’t Cover #

• WordPress basics: we assume you have used WordPress before,
• in-depth look at Serverless functions — we focus on using edge function middleware to proxy resources,
• working out what your new WordPress blog will be about!

🌱 Get Started with SvelteKit Headless WordPress: Let’s get Going! #

If all that sounds like what you came here for, then why don’t we get going? We will start by spinning up a brand-new local, development WordPress site.

🏁 Get Started with SvelteKit Headless WordPress: Summary #

Does SvelteKit work with WordPress? #

SvelteKit and WordPress are a fantastic combination. WordPress already powers so much of the web that many content creators are comfortable with it, knowing exactly how to use it. That will be whether they opt for the newer Block Editor or the classic one. Svelte is a modern language which allows you to build fast sites. You can get the best of both worlds from this partnership, starting from using road tested plugins like Yoast SEO in WordPress to get your posts Google-ready. Meanwhile, on the frontend, using a static Svelte site gets your CDN cached page delivered quickly to end users from a global edge network. That contrasts to having to wait for a slow WordPress server to work the content through a host of plugins as it churns out each user request. Static means the page is generated ahead of time and ready to go on each site visit.

Does headless WordPress with a static frontend make sense? #

A static frontend combined with a WordPress or other CMS running in headless mode will suite many content-based sites. Serving static content helps reduce the attack surface, overall improving security. You can even hide the WordPress server, making it harder for hackers to even find to start their attack. As well as security, you are usually able to deliver content faster to end users, making use of CDNs. One drawback of the static approach, though, comes as a tradeoff of improved user experience vs. developer experience. This is because with static, we generate content ahead of time. So each time our content changes, we need to rebuild the site. For a small site, or a site which is updated infrequently, quick build times, can make this a non-issue. However, for a site with thousands of pages, with content updated hourly, a Server-Side Rendered (SSR) approach is likely to make more sense.

What happens when I need to add or delete pages in the CMS for a headless static site? #

With a static site, the page which visitors see reflects the latest available content at the time the site was built. This does not mean that you cannot update or delete pages, though. Whenever you make changes in the CMS, you can rebuild the site and then the live site will once more mirror the content in the backend. If you want to go to town, you can set automatic triggers automatically to rebuild the site once a change is registered in the CMS.

🙌🏽 Get Started with SvelteKit Headless WordPress: Wrapping Up #

In this tutorial, we built out a complete headless WordPress site using SvelteKit. In particular, we have seen:

• how to work with the GraphQL Plugin on your WordPress site,
• how to work with GraphQL in SvelteKit to interface with a WordPress site as a backend,
• a method for proxying images using middleware in your headless site to keep your source WordPress site URL private.

I hope you found the tutorial useful and am keen to hear where your SvelteKit journey takes you next!