Headless WordPress means you use WordPress only as a content management system, while a separate frontend such as Next.js or Astro displays the website to visitors. The two communicate through the WordPress REST API or GraphQL. This often results in faster load times, more security, and more design freedom, but it does require a bit more technical knowledge than a classic WordPress site. In this article, you’ll learn exactly what headless WordPress involves and how to set it up yourself.
What exactly is headless WordPress
In a traditional WordPress site, WordPress itself generates the HTML that visitors see, via themes and templates. With headless WordPress, you decouple this process: WordPress remains responsible for storing and managing content (pages, posts, media, custom fields), but the presentation is taken over by a separate frontend application. That frontend retrieves the content via an API and uses it to build the pages itself.
The result is two separate systems: a backend (WordPress, often accessible via its own subdomain) for content management, and a frontend (built with a framework like Next.js or Astro) that’s visible to visitors. Editors still work in the familiar WordPress environment; developers build the website separately using modern web technology.
Why choose headless
Headless WordPress isn’t the best choice for every site, but in certain situations it offers clear advantages.
- Speed: the frontend generates static or very lightweight pages, without heavy PHP processing on every visit. This means shorter load times and better scores in speed tests.
- Security: because the WordPress backend isn’t directly visible to visitors, the attack surface is smaller. There’s no public theme that could be vulnerable.
- Design freedom: you’re not tied to WordPress themes and can build any desired interaction or animation with modern frontend technology.
- Scalability: the frontend can be scaled independently of the backend, for example via a CDN, which is useful with high traffic.
The downside is that you need to maintain two systems instead of one, and features that work by default in classic WordPress themes (such as some plugins for forms or search functionality) need to be rebuilt yourself in the frontend.
Next.js or Astro: what suits you
Both frameworks can display headless WordPress content well, but they differ in approach.
Next.js is a React framework that’s well-suited for sites with a lot of interactivity, such as web shops, dashboards, or sites with login functionality. It supports both static generation and server-side rendering, so you can choose how content is built per page.
Astro is aimed at content-driven sites such as business websites, blogs, and portfolios. By default, it sends as little JavaScript as possible to the browser, which often results in even faster load times than Next.js for this type of site. You can add interactive components using so-called “islands,” without making the rest of the page heavier.
Rule of thumb: choose Astro if your site mainly consists of content with little interaction, choose Next.js if you need a lot of dynamic functionality.
Setting up headless WordPress
Below is a practical step-by-step plan for setting up headless WordPress with Next.js or Astro.
Set up a separate WordPress backend
Install WordPress on a subdomain, for example cms.yourdomain.com, and use it only for content management. In Plesk you can easily create and manage this subdomain alongside your main domain.
Activate the API
The WordPress REST API is active by default. If you want to use GraphQL (often more convenient for more complex queries), install a plugin that adds GraphQL support to WordPress.
Set up a Next.js or Astro project
Create a new frontend project and build pages that retrieve content from the WordPress API. Set up templates for page types such as posts, pages, and any custom post types.
Arrange previews and rebuild triggers
Make sure editors can see a preview of their draft, and set up a webhook that automatically triggers the frontend to rebuild as soon as content is published or changed.
Host both components correctly
Place the WordPress backend on fast hosting with NVMe storage and Plesk management, and host the frontend on an environment suitable for Node.js applications or static files. Arrange free SSL and daily backups for both components, so content and code are always secure.
Test and set up DNS
Check whether forms, search functionality, and images work correctly on the new frontend. Then assign the main domain to the frontend and the subdomain to the WordPress backend, and check your domain names and DNS settings.
If you run into configuration questions around subdomains, SSL, or server settings, you’ll find step-by-step explanations in the knowledge base. If you’re considering switching to a different hosting provider for this project, it’s wise to check in advance how switching to Tandata works, so your backend migrates without downtime.
Frequently Asked Questions
Is headless WordPress suitable for every website?
No. For simple business websites or blogs, classic WordPress is often quicker to set up and maintain. Headless WordPress pays off mainly for sites with high speed requirements, high traffic, or complex custom functionality.
Do WordPress plugins still work in a headless setup?
Plugins that manage content or data (such as SEO plugins or custom fields) continue to work, because they add data to the API. Plugins that generate frontend output, such as some form or slider plugins, need to be replaced with your own implementation in the frontend.
Do I still need regular web hosting for WordPress?
Yes, the WordPress backend still runs on a web server, just like with a classic site. Check out web hosting for a package with sufficient performance for your content management.
Can I keep using email on the same domain?
Yes, email is independent of how your website is technically built. Arrange this via business email so your mail traffic remains independent of your hosting or frontend choice.
Is headless WordPress more expensive than classic WordPress?
That depends on the complexity of the project. You may pay for two hosting environments and more development time, but you often save on maintenance and can benefit from better performance in the long run.
Conclusion
Headless WordPress separates content management from presentation, allowing you to build a fast, secure, and flexible frontend with Next.js or Astro on top of the familiar WordPress backend. It requires more technical setup than classic WordPress, but offers clear advantages in speed and design freedom for sites that need them.