Headless CMS（无头内容管理系统）是近年来非常流行的架构模式。它将内容管理（后端）和内容展示（前端）完全分离。WordPress 作为内容管理端，通过 REST API 或 GraphQL 提供数据，而前端则使用 Next.js、Nuxt、Gatsby 等现代框架构建。这种模式带来了更好的性能、更高的安全性和更灵活的开发体验。

什么是 Headless WordPress？ 在传统 WordPress 架构中，PHP 在服务器端渲染 HTML 直接输出给浏览器。而在 Headless 架构中，WordPress 只负责管理内容和提供 API 接口，前端完全由 JavaScript 框架接管，通过 AJAX 或服务端渲染（SSR）获取数据并生成页面。

为什么选择 Headless？ 主要优势包括：

  • 性能提升：前端可以部署在 CDN 边缘节点，响应速度极快

  • 安全性增强：WordPress 后台与前端分离，攻击面大幅减少

  • 开发灵活性：前端团队和后端团队可以独立工作，使用各自擅长的技术栈

  • 多端复用：同一套 API 可以同时为 Web、移动 App、小程序、智能设备提供服务

  • 更好的开发者体验：现代前端框架的开发工具链远超 WordPress 主题开发

搭建 Headless WordPress 的基本步骤：

第一步，安装 WordPress 并配置 REST API。WordPress 默认提供了 REST API，但你可能需要安装 WPGraphQL 插件来获得 GraphQL 接口，或者安装 Custom Endpoints 插件来定制 API 响应结构。

第二步，选择前端框架。Next.js（React）和 Nuxt（Vue）是目前最流行的选择，它们都支持服务端渲染（SSR）和静态站点生成（SSG），对 SEO 非常友好。

第三步，构建前端应用，从 WordPress API 获取数据。以 Next.js 为例，在 getStaticProps 或 getServerSideProps 中调用 WordPress API：

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://你的网站.com/wp-json/wp/v2/posts?_embed');
  const posts = await res.json();
  return {
    props: { posts },
    revalidate: 60, // 增量静态再生成
  };
}

export default function Home({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <article key={post.id}>
          <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
        </article>
      ))}
    </div>
  );
}

处理 SEO 是 Headless 架构中的重点。Next.js 的 next/head 组件可以动态设置页面标题和 Meta 标签。你可以从 WordPress 的自定义字段或 Yoast SEO 插件的 API 中获取 SEO 数据：

import Head from 'next/head';

export default function Post({ post, seo }) {
  return (
    <>
      <Head>
        <title>{seo.title}</title>
        <meta name="description" content={seo.description} />
        <meta property="og:title" content={seo.og_title} />
      </Head>
      <article dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </>
  );
}

静态站点生成 vs 服务端渲染 是 Headless 架构中的关键选择。对于内容不经常变化的网站，推荐使用 SSG（静态站点生成），在构建时生成所有页面，部署到 CDN 后访问速度极快。对于内容频繁更新的网站，可以使用 ISR（增量静态再生成），在用户访问时触发重新生成。对于需要实时数据的页面，使用 SSR（服务端渲染）。

增量静态再生成（ISR） 是 Next.js 的一个强大功能。在 getStaticProps 中设置 revalidate 参数，页面会在后台重新生成，用户始终看到的是最新内容，同时保持了静态页面的速度。

缓存策略 在 Headless 架构中也需要重新设计。页面的缓存可以在 CDN 层面（如 Vercel、Netlify 的自动缓存），也可以在 WordPress 端用 Redis 缓存 API 响应，减少数据库查询。

注意事项：

  • Headless 架构中，WordPress 的预览功能需要额外处理，通常通过 Next.js 的 Preview Mode 实现

  • 表单提交、搜索功能需要前端自己实现，不能依赖 WordPress 的默认行为

  • 多语言支持需要前端配合处理，WordPress 的 Polylang 等插件仍然可以管理多语言内容，前端需要读取语言参数

Headless WordPress 将 WordPress 的能力从“建站工具”提升为“内容基础设施”。虽然前期投入比传统主题开发要大，但对于大型项目、多端应用和追求极致性能的网站，Headless 架构是非常值得的长期投资。