{"id":3346,"date":"2022-08-26T15:29:00","date_gmt":"2022-08-26T20:29:00","guid":{"rendered":"https:\/\/n8finch2024.local\/?p=3346"},"modified":"2024-02-26T15:32:00","modified_gmt":"2024-02-26T21:32:00","slug":"how-to-headless-defining-ways-to-decouple-or-use-static-wordpress","status":"publish","type":"post","link":"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/","title":{"rendered":"How to Headless: Defining Ways to Decouple or Use Static WordPress"},"content":{"rendered":"\n<p><em>This post originally appeared on the <strong><a href=\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Strattic.com<\/a><\/strong> blog on April 28, 2022<\/em>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" style=\"margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)\"\/>\n\n\n\n<p>Over the past few years, you may have heard phrases like:<\/p>\n\n\n\n<ul>\n<li>\u201cStatic and Headless WordPress.\u201d<\/li>\n\n\n\n<li>\u201cWhat to know before you go decoupled\u201d<\/li>\n\n\n\n<li>\u201cHow to go Headless with WP\u201d<\/li>\n\n\n\n<li>\u201c100% static WordPress\u201d<\/li>\n\n\n\n<li>\u201cMake your WordPress Jamstack\u201d<\/li>\n<\/ul>\n\n\n\n<p>What the heck is all of this lingo?! \u200b\u200b<\/p>\n\n\n\n<p>The web has come a long way over the years, and there\u2019s plenty of vocabulary to show for it, and our WordPress corner of the internet hasn\u2019t been unaffected. Today \u201cstatic\u201d, \u201cJamstack\u201d, \u201cheadless\u201d, \u201cdecoupled\u201d, and even \u201cserverless\u201d are all words to describe a way of building websites or applications, including by&nbsp;<em>using<\/em>&nbsp;WordPress. I\u2019ve italicized the word \u201cusing\u201d because they are not fully or completely only WordPress experiences. These sites utilize WordPress to deliver content, data, assets, and more to web sites, web and mobile apps, and even desktop applications.<\/p>\n\n\n\n<p>In many cases, these headless\/static\/decoupled sites use WordPress as a backend, and some kind of framework (often React) for the frontend. Because the JavaScript (JS) ecosystem has exploded in the last decade, it\u2019s often the technology used for frontends, and there are many solutions for WordPress interactivity using JS or a JS framework. Likewise, because WordPress is so extensible, flexible, and customizable, WordPress can interact with and exist alongside these JS solutions.<\/p>\n\n\n\n<p>Sounds exciting, right? But does that mean you should go this route for your next project?<\/p>\n\n\n\n<p>How do we start to wrap our minds around what\u2019s possible here?&nbsp;<\/p>\n\n\n\n<p>A quote I love:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u200b\u200b\u201dYour problem isn\u2019t the problem, your problem is how to think about the problem.\u201d<\/p>\n<cite>Dan Sullivan<\/cite><\/blockquote>\n\n\n\n<p>Let\u2019s define a few terms so we can better understand what\u2019s possible with different approaches and see how they interact with WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/Static-1024x768-1.png\" alt=\"static headless decoupled serverless\" class=\"wp-image-3350\" srcset=\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/Static-1024x768-1.png 1024w, https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/Static-1024x768-1-300x225.png 300w, https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/Static-1024x768-1-768x576.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Jamstack (psst, it\u2019s not&nbsp;<em>really<\/em>&nbsp;a \u201cstack\u201d &#x1f92b; )<\/h2>\n\n\n\n<p>When Matt Biilmann (CEO of Netlify) coined the term \u201cJAMstack\u201d several years ago, it was meant to describe a philosophy and approach to building web sites and applications. The first part of the word was an acronym:<\/p>\n\n\n\n<ul>\n<li><strong>J<\/strong>avascript<\/li>\n\n\n\n<li><strong>A<\/strong>PIs<\/li>\n\n\n\n<li><strong>M<\/strong>arkup<\/li>\n<\/ul>\n\n\n\n<p>The idea was that if you were building out a front-end solution to handle data from other sources in a structured way, that was the Jamstack.&nbsp;<\/p>\n\n\n\n<p>Specifically, in Biilmann\u2019s case at Netlify, it also meant serving up the solution from a global CDN for speed and scalability. These Jamstack sites would be statically generated sites, meaning everything was compiled, processed, and stored in a pre-rendered file before the user ever gets to the site.<\/p>\n\n\n\n<p>It should be noted that Jamstack was never a \u201cstack\u201d in the sense of a LAMP, LEMP, MEAN, MERN, or any other grouping of services we\u2019re familiar with in web development; Jamstack always referred to an approach to building websites and applications.<\/p>\n\n\n\n<p>Since the term Jamstack was coined, it stopped referencing JS, APIs, and Markup (HTML) specifically since they are actually found on the vast majority of sites on the web today, including regular WordPress sites. Every site uses markup (HTML is markup), APIs are incredibly prevalent, and pretty much every site today is running some form of JS.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Static: Just the files, ma\u2019am &#x1f60e;<\/h2>\n\n\n\n<p>You probably heard the term \u201cstatic\u201d used if you were building \u201cweb pages\u201d in the 90s. At that time, \u201cstatic\u201d described the method of building sites using only standalone HTML and CSS files to define the structure of your site and give it some style.&nbsp;<\/p>\n\n\n\n<p>If you didn\u2019t hear this term, it\u2019s most likely because that\u2019s all there was, kind of like asking a fish to describe water: Blub static blub site\u2026&nbsp;<\/p>\n\n\n\n<p>Nowadays, when we talk about \u201cstatic\u201d sites, we\u2019re talking about sites that are generated with a more sophisticated process using tooling generally known as \u201cstatic site generators.\u201d These tools use a templating system to generate sites that are also solely comprised of HTML, CSS, and probably JS files, but their management and deployment is more robust than the sites in the 90s, and they are served from a CDN for fast loading times everywhere in the world, and greater reliability. These sites can also include technologies like edge and serverless functions for bringing some dynamic-esque functionality to static sites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Static WordPress<\/h3>\n\n\n\n<p>There is a subset in this world of static site generators, which is known as \u201cstatic WordPress.\u201d This refers to sites that are fully static replicas of a WordPress site, and have been pre-compiled by loading and scraping said WordPress site to get the rendered markup, styles and scripts that are distributed via CDN. These static sites use WordPress as the \u201csource of truth\u201d for editing and managing the content and frontend theme on the site, but is nowhere to be found on the public-facing live domain, which relies solely on static files.<\/p>\n\n\n\n<p>Static sites served in this fashion are infinitely scalable, very fast, and super secure because \u201cthere is no spoon\u201d &#x1f913; \u2026 I mean database or backend to hack into.&nbsp;<\/p>\n\n\n\n<p>On top of this, because the site is being scraped for the generated markup, you can still use most page builders (like Beaver Builder, Elementor, Divi and even the Gutenberg Block Editor) and plugins to construct, arrange, and style your site.&nbsp;<\/p>\n\n\n\n<p>This is how we do things at Strattic, so we obviously think static sites are pretty rad &#x1f60e; \u2026but more on that later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Headless: now we have two \u201cproblems\u201d &#x1f60f;<\/h2>\n\n\n\n<p>In standard headless WordPress setups, typically WordPress is the CMS and \u201csource of truth\u201d but has a custom \u201cfrontend\u201d and does not use a \u201cclassic\u201d PHP-based WordPress theme. This frontend is probably heavily reliant on JavaScript as mentioned above, and given the current layout of JavaScript land, it\u2019s typically built with React, though there are plenty of Vue, Svelte, Angular, and other options out there.<\/p>\n\n\n\n<p>This also means that visitors are not reaching WordPress itself, but rather the JS application that is connected to your WordPress. It most likely also means that your WordPress and JS front-end are in separate \u201clocations\u201d:<\/p>\n\n\n\n<ol>\n<li>WordPress is running on a PHP server<\/li>\n\n\n\n<li>The JS frontend is either being served via CDN or could be running on a NodeJS server<\/li>\n<\/ol>\n\n\n\n<p>This is really neat because you can now use WordPress as an API to get content and other data, as well as use it to send form submissions, comments, search queries, and more to your backend. With a tremendous amount of effort and developer resources, you can even run headless e-commerce, membership, or educational sites with this approach and generally on a better scale that you could on a typical single WordPress install.<\/p>\n\n\n\n<p>So it sounds like headless implementations of WordPress solve all the problems, right?<\/p>\n\n\n\n<p>Well, not exactly.<\/p>\n\n\n\n<p>One of my favorite quotes related to development is:&nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u201cSome people, when confronted with a problem, think \u2018I know, I\u2019ll use regular expressions.\u2019 Now they have two problems.\u201dJamie Zawinski (who did not like Perl)<\/p>\n<\/blockquote>\n\n\n\n<p>Many folks want to go headless because they\u2019re confronted with slow page speeds, plugin or theme bloat, overloaded shared hosting services, and malware. They think, \u201cI know, we can implement headless WordPress to solve all that.\u201d&nbsp;<\/p>\n\n\n\n<p>As an astute reader, you might have noticed that with this approach, there are now two separate applications to manage: your WordPress and your JS application. More fun, right? &#x1f913;<\/p>\n\n\n\n<p>Perhaps. But also \u2013 more problems. &#x1f609;&nbsp;&nbsp;<\/p>\n\n\n\n<p>Don\u2019t get me wrong, as a web engineer, I love these types of problems, they are fun to work on and implement. However, not all technology stakeholders might appreciate the extra complicated nature of:<\/p>\n\n\n\n<ul>\n<li>Building a #headlessJamstackDecoupledStaticCool application<\/li>\n\n\n\n<li>Setting up a CI\/CD process process for building and deploying<\/li>\n\n\n\n<li>Managing multiple environments<\/li>\n\n\n\n<li>Git for version control, including for content<\/li>\n\n\n\n<li>Refactoring your WordPress beyond recognition<\/li>\n<\/ul>\n\n\n\n<p>And then there are the other stakeholders, who are equally important: marketers, website owners, web designers and even some developers who are not going to appreciate this new configuration. In a headless setup, a lot of core or plugin WordPress functionality goes right out the window:<\/p>\n\n\n\n<ul>\n<li>Your JS app might not pull in all the right SEO info, and if it does, it\u2019s more complicated to get it into the right places<\/li>\n\n\n\n<li>Optimization solutions like caching, concatenating, minification, etc. might not work or may need to be redone<\/li>\n\n\n\n<li>Search, comments, form submissions etc. need to be developed from scratch or replaced with third-party solutions<\/li>\n\n\n\n<li>Larger e-commerce, membership, and LMS plugins might be a no-go<\/li>\n<\/ul>\n\n\n\n<p>On top of this, if your WordPress is still up and running all the time in order to serve as an API, it is still vulnerable to attack.&nbsp;<a href=\"https:\/\/www.akamai.com\/resources\/state-of-the-internet\/soti-security-api-the-attack-surface-that-connects-us-all\">A recent report<\/a>&nbsp;identified API attacks as the next biggest security threat. Routing API requests from the JS app through a serverless function or third party so it\u2019s not communicating to WordPress may partially solve this concern, but it also adds more complexity.<\/p>\n\n\n\n<p>Speaking of complexity\u2026let\u2019s talk about \u201cdecoupled\u201d sites for a moment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Decoupled: the more the merrier\u2026 right? &#x1f973;<\/h2>\n\n\n\n<p>Why go headless, when you could incorporate even more services? This is where \u201cdecoupled\u201d WordPress architectures come in\u2026<\/p>\n\n\n\n<p>Generally speaking, \u201cdecoupled\u201d takes the \u201cbest tool for the job\u201d approach. While you might start with a headless WordPress implementation, you may also add in some of the following options for additional functionality:<\/p>\n\n\n\n<ul>\n<li>Shopify for e-commerce (this is not a dig at WooCommerce, I promise)<\/li>\n\n\n\n<li><a href=\"https:\/\/www.strattic.com\/static-tool\/hubspot\/\">Hubspot<\/a>&nbsp;integrations for marketing<\/li>\n\n\n\n<li><a href=\"https:\/\/www.strattic.com\/static-tool\/algolia\/\">Algolia<\/a>&nbsp;instasearch<\/li>\n\n\n\n<li><a href=\"https:\/\/usebasin.com\/blog\/headless-wordpress-forms-using-basin-strattic\">Basin<\/a>&nbsp;or Reform for forms<\/li>\n\n\n\n<li>Gumroad for digital products<\/li>\n\n\n\n<li>Syndicate other content from RSS feeds or other APIs<\/li>\n\n\n\n<li>Serverless or edge functions to hide API keys and handle secure requests<\/li>\n\n\n\n<li>The list goes on\u2026<\/li>\n<\/ul>\n\n\n\n<p>In this scenario, you might use WordPress solely to author content. &#x1f631;<\/p>\n\n\n\n<p>Pulling data from multiple sources and using multiple third party APIs is often referred to as the \u201ccontent mesh\u201d. This is generally the recommended approach when using WordPress since you should use the best tool for each job, and while WordPress is by far the best-in-class CMS out there, it\u2019s not the best at everything and therefore shouldn\u2019t be used for all purposes.<\/p>\n\n\n\n<p>You can see how \u201cstatic\u201d can build up to \u201cheadless\u201d which can branch out into \u201cdecoupled\u201d WordPress. This isn\u2019t to say that there is a stair-step approach or a hierarchy, only to note that it can seem that each of these methods informs and influences the other.<\/p>\n\n\n\n<p>You might say: \u201cBut wait! Can\u2019t we already do this with WordPress on a server? I\u2019m already using Hubspot and Shopify and [fill-in-the-blank-service]. Is my site already decoupled?\u201d<\/p>\n\n\n\n<p>Yep, it sure is!<\/p>\n\n\n\n<p>It is possible to use a decoupled approach with a \u201cclassic\u201d hosted WordPress setup. This could involve using multiple third party plugins and services that live on your WordPress, but don\u2019t rely on your WordPress install to handle their functionality.&nbsp;<\/p>\n\n\n\n<p>This is in contrast to using plugins that do rely on WordPress to function for their services. Here are some Decoupled vs. Native WordPress comparisons:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Function<\/strong><\/td><td><strong>Decoupled<\/strong><\/td><td><strong>Uses WordPress<\/strong><\/td><\/tr><tr><td>CRM<\/td><td>Hubspot<\/td><td>MailPoet<\/td><\/tr><tr><td>Forms<\/td><td>Basin<\/td><td>Contact Form 7 or Gravity Forms<\/td><\/tr><tr><td>Search<\/td><td>Algolia<\/td><td>SearchWP, Relevanssi<\/td><\/tr><tr><td>Comments<\/td><td>Disqus<\/td><td>WP Comments<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>(Note: we\u2019re not endorsing one plugin or solution, these are just examples.)<\/p>\n\n\n\n<p>We take a lot of services and integrations for granted in WordPress; we get so much easy functionality out of the box. The difference is if you\u2019re already running headless on the frontend, you will lose a lot of that native functionality and need to build it out to integrate with your WordPress site or third-party services. There may be some NPM packages that make this more straightforward, but it will still be something you will need to wire up to communicate with those services or your WordPress.<\/p>\n\n\n\n<p>At Strattic we\u2019re big fans of the decoupled approach and encourage site owners to use the best tools for every job. That\u2019s why we put together our&nbsp;<a href=\"https:\/\/www.strattic.com\/static-tools\/\">Static Headless Tools Directory<\/a>&nbsp;which lists WordPress plugins and third-party solutions that work seamlessly on static sites, particularly static sites running on Strattic (we offer native support for many WP plugins on the static version of your site that other services do not).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Serverless: who needs servers anyway? It\u2019s just WordPress!<\/h2>\n\n\n\n<p>Did you know that it\u2019s possible to run WordPress without running WordPress?<\/p>\n\n\n\n<p>Say what??<\/p>\n\n\n\n<p>Yes, it\u2019s true. When your site is \u201cstatic WordPress\u201d as described above, you don\u2019t have to keep the WordPress origin site up and running, and it can be shut down.<\/p>\n\n\n\n<p>But what do you do when WordPress isn\u2019t available for synchronous interactions?&nbsp;<\/p>\n\n\n\n<p>This is where serverless functions and services really shine! \u200b\u200b&#x2728;<\/p>\n\n\n\n<p>Serverless functions can replicate and replace a whole range of cloud web services that we are accustomed to using WordPress for:<\/p>\n\n\n\n<ul>\n<li>Routing and permalinks<\/li>\n\n\n\n<li>Random ad hoc functions (\u201cjust put this in your functions.php file\u2026\u201d)<\/li>\n\n\n\n<li>Events (\u201cwhen X happens or loads, do or load Y\u2026\u201d)<\/li>\n\n\n\n<li>Notifications (especially email)<\/li>\n\n\n\n<li>Data storage in a database<\/li>\n\n\n\n<li>Asset storage (like images, PDFs, and other files\u2026)<\/li>\n\n\n\n<li>The list goes on\u2026<\/li>\n<\/ul>\n\n\n\n<p>When we talk about \u201cserverless\u201d WordPress, we\u2019re talking about custom, on-demand, scalable functions and services that provide a dynamic experience for static WordPress even when the WordPress origin site isn\u2019t available or used to handle this functionality.<\/p>\n\n\n\n<p>Let\u2019s take the example of submitting a form in two different setups:<\/p>\n\n\n\n<ol>\n<li>A headless Gatsby site on Netlify and WordPress hosted elsewhere<\/li>\n\n\n\n<li>A static site hosted on Strattic<\/li>\n<\/ol>\n\n\n\n<p>In example #1, a form can be submitted on the Gatsby site and the submitted information can be sent to a Netlify function. This function receives that information and uses stored API keys to send that information to a WordPress install on a different server.&nbsp;<\/p>\n\n\n\n<p>Once the request is authenticated and authorized, the form submission information is stored to the WordPress database, and typical form notification emails go out to site administrators. When someone logs into the WordPress site, they can see the form entries as if they were submitted to the form on a classic WordPress site.<\/p>\n\n\n\n<p>In example #2, there is no active or publically available WordPress. So, when a user submits a form, where does that submission go? Strattic uses serverless functions and services to catch, validate, and store that information.&nbsp;<\/p>\n\n\n\n<p>When your WordPress site is spun back up, that information is called back to your WordPress and you can access submitted form information there. However, even though WordPress is not available, serverless services receive and store the information, and send out email notifications that a form submission was received.<\/p>\n\n\n\n<p>The beauty of serverless is the ability to scale instantly and be highly available at a moment\u2019s notice, while not wasting resources and causing instability by running needlessly all the time, as is the case with standard WordPress. This feature is unique to Strattic and is not available on other headless or decoupled services that still rely on your WordPress to process requests.<\/p>\n\n\n\n<p>This is very much in the vein of a decoupled service, however, the tools used for serverless are from cloud providers like Amazon Web Services (AWS), and not SaaS tools that you might find in other decoupled offerings.&nbsp;<\/p>\n\n\n\n<p>With serverless, you are building integrations on an as-needed basis with these serverless functions and services.<\/p>\n\n\n\n<p>This is also where serverless gets really fun, as you can build exactly what you need to support your static, headless, or decoupled WordPress site!&nbsp;<\/p>\n\n\n\n<p>If you\u2019re looking for some instruction or ideas on how to get started with serverless integrations for WordPress, and especially if you\u2019re on Strattic, head over to our&nbsp;<a href=\"https:\/\/developers.strattic.com\/service\/introduction-to-serverless-functions-and-services\/\">serverless functions and services repository<\/a>&nbsp;and get started building your our custom functions and services &#x1f913;.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Last Question: should you go static, headless, decoupled, or serverless with your WordPress?<\/h2>\n\n\n\n<p>We\u2019ve covered a lot of ground here, good on you for sticking through this article to the end.&nbsp;<\/p>\n\n\n\n<p>You did it! &#x1f44f; &#x1f64c;<\/p>\n\n\n\n<p>The question now is \u201cWhat do you do for your next client or company project?\u201d<\/p>\n\n\n\n<p>Remember, everyone wants all the good things these architectures have to offer:<\/p>\n\n\n\n<ul>\n<li>Speed<\/li>\n\n\n\n<li>Security<\/li>\n\n\n\n<li>Scalability<\/li>\n<\/ul>\n\n\n\n<p>But not every solo freelancer, marketing agency, or website shop is going to have the time, resources, skill level, or motivation to start building out and maintaining static, headless, decoupled, or serverless WordPress implementations, and marketing teams generally don\u2019t love when you take their power tool and all its functionality, i.e. WordPress, away from them.<\/p>\n\n\n\n<p>And you know what? That\u2019s ok! Using good ol\u2019&nbsp; WordPress is great and getting better all the time!<\/p>\n\n\n\n<p>This is one of the massive benefits of using Strattic as a platform to host your WordPress site. Strattic sits very comfortably in the middle of this mix of options, giving you the best of many worlds by supporting:<\/p>\n\n\n\n<ul>\n<li>Many classic WordPress themes and theme builders like Elementor or Beaver Builder<\/li>\n\n\n\n<li>Dozens of plugins for SEO, forms, search, multilingual, etc.<\/li>\n\n\n\n<li>Custom functionality you\u2019ve developed for your WordPress<\/li>\n\n\n\n<li>and more\u2026<\/li>\n<\/ul>\n\n\n\n<p>The idea is that you can bring your WordPress as-is to Strattic, and it just works. Your marketing teams and content creators get to continue working as usual, with all the flexibility and power WP offers, while benefiting from the speed, security, scalability and reliability (without the complexity) that headless\/static\/decoupled\/serverless WordPress offers.<\/p>\n\n\n\n<p>So, is Strattic or one of these other solutions the best choice for you or your team?<\/p>\n\n\n\n<p>Picking what\u2019s best is all about two considerations:<\/p>\n\n\n\n<ul>\n<li>Is it the right tool for the job?<\/li>\n\n\n\n<li>What does the end user need and how can they manage their site best?<\/li>\n<\/ul>\n\n\n\n<p>Headless and decoupled approaches can be a good fit for companies and organizations that have large dedicated teams that can take responsibility for the backend and frontend of headless implementations, while also building out new functionality on an ongoing basis for the marketing teams. But for companies that are using WordPress and don\u2019t want to throw away their site and build a new one, a process that is costly, complicated and risky, and\/or their marketing teams insist on using WordPress so they can do their job, and do it well, then it\u2019s less of a fit.<\/p>\n\n\n\n<p>In the latter case, using Strattic for hosting and deploying their WordPress sites can ensure that the people who use the site on an ongoing basis, i.e. marketers, will be able to keep doing their job, while the engineering teams and the company as a whole benefit from the reliability of the statically generated replica of the WordPress site that the internet visits.&nbsp;<\/p>\n\n\n\n<p>Bottom line is, whatever you choose to do, make sure you\u2019re not just going in a direction because it\u2019s the shiny, fun thing for you, the developer. It\u2019s important to make sure you\u2019re doing right for your team and organization as a whole.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post originally appeared on the Strattic.com blog on April 28, 2022. Over the past few years, you may have heard phrases like: What the heck is all of this lingo?! \u200b\u200b The web has come a long way over the years, and there\u2019s plenty of vocabulary to show for it, and our WordPress corner [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3347,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1,8,48],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch\" \/>\n<meta property=\"og:description\" content=\"This post originally appeared on the Strattic.com blog on April 28, 2022. Over the past few years, you may have heard phrases like: What the heck is all of this lingo?! \u200b\u200b The web has come a long way over the years, and there\u2019s plenty of vocabulary to show for it, and our WordPress corner [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Nate Finch\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-26T20:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-26T21:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"770\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Nate\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@n8finch\" \/>\n<meta name=\"twitter:site\" content=\"@n8finch\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nate\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\"},\"author\":{\"name\":\"Nate\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"headline\":\"How to Headless: Defining Ways to Decouple or Use Static WordPress\",\"datePublished\":\"2022-08-26T20:29:00+00:00\",\"dateModified\":\"2024-02-26T21:32:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\"},\"wordCount\":3186,\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"image\":{\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp\",\"articleSection\":[\"Blog\",\"Web Development\",\"WordPress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\",\"url\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\",\"name\":\"How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch\",\"isPartOf\":{\"@id\":\"https:\/\/n8finch.local\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp\",\"datePublished\":\"2022-08-26T20:29:00+00:00\",\"dateModified\":\"2024-02-26T21:32:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp\",\"width\":770,\"height\":500,\"caption\":\"How to Headless\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/n8finch.local\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Headless: Defining Ways to Decouple or Use Static WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/n8finch.local\/#website\",\"url\":\"https:\/\/n8finch.local\/\",\"name\":\"Nate Finch\",\"description\":\"All the things, keeping it clever...&#x1f913;\",\"publisher\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/n8finch.local\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce\",\"name\":\"Nate\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"contentUrl\":\"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg\",\"width\":796,\"height\":792,\"caption\":\"Nate\"},\"logo\":{\"@id\":\"https:\/\/n8finch.local\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch","og_description":"This post originally appeared on the Strattic.com blog on April 28, 2022. Over the past few years, you may have heard phrases like: What the heck is all of this lingo?! \u200b\u200b The web has come a long way over the years, and there\u2019s plenty of vocabulary to show for it, and our WordPress corner [&hellip;]","og_url":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/","og_site_name":"Nate Finch","article_published_time":"2022-08-26T20:29:00+00:00","article_modified_time":"2024-02-26T21:32:00+00:00","og_image":[{"width":770,"height":500,"url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp","type":"image\/webp"}],"author":"Nate","twitter_card":"summary_large_image","twitter_creator":"@n8finch","twitter_site":"@n8finch","twitter_misc":{"Written by":"Nate","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#article","isPartOf":{"@id":"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/"},"author":{"name":"Nate","@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"headline":"How to Headless: Defining Ways to Decouple or Use Static WordPress","datePublished":"2022-08-26T20:29:00+00:00","dateModified":"2024-02-26T21:32:00+00:00","mainEntityOfPage":{"@id":"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/"},"wordCount":3186,"publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"image":{"@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp","articleSection":["Blog","Web Development","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/n8finch2024.local\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/","url":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/","name":"How to Headless: Defining Ways to Decouple or Use Static WordPress | Nate Finch","isPartOf":{"@id":"https:\/\/n8finch.local\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp","datePublished":"2022-08-26T20:29:00+00:00","dateModified":"2024-02-26T21:32:00+00:00","breadcrumb":{"@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#primaryimage","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2024\/02\/how-to-headless.webp","width":770,"height":500,"caption":"How to Headless"},{"@type":"BreadcrumbList","@id":"https:\/\/www.strattic.com\/how-to-headless-defining-ways-to-decouple-or-use-static-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/n8finch.local\/"},{"@type":"ListItem","position":2,"name":"How to Headless: Defining Ways to Decouple or Use Static WordPress"}]},{"@type":"WebSite","@id":"https:\/\/n8finch.local\/#website","url":"https:\/\/n8finch.local\/","name":"Nate Finch","description":"All the things, keeping it clever...&#x1f913;","publisher":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/n8finch.local\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/n8finch.local\/#\/schema\/person\/619068414583ca3c43bb135af49a47ce","name":"Nate","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/","url":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","contentUrl":"https:\/\/n8finch2024.local\/wp-content\/uploads\/2020\/11\/nate-pic_ykd6mq.jpg","width":796,"height":792,"caption":"Nate"},"logo":{"@id":"https:\/\/n8finch.local\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/3346"}],"collection":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/comments?post=3346"}],"version-history":[{"count":4,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/3346\/revisions"}],"predecessor-version":[{"id":3352,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/posts\/3346\/revisions\/3352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media\/3347"}],"wp:attachment":[{"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/media?parent=3346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/categories?post=3346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/n8finch2024.local\/wp-json\/wp\/v2\/tags?post=3346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}