WordPress Headless 与 Next.js 或 Astro：网页开发的未来

Source: Dev.to

介绍

WordPress 驱动了超过 40 % 的网站，是因其友好的界面和庞大的生态系统而最受欢迎的 CMS。然而，加载速度和用户体验正变得越来越关键。WordPress 的传统（单体）架构在面对现代 JavaScript 技术时可能显得力不从心。

Headless WordPress 指的是仅将 WordPress 作为后端（API）来管理内容，而前端则使用 Next.js 或 Astro 等工具构建。

Headless 架构的优势

• 极致性能：静态站点生成器（SSG）或服务器端渲染（SSR）让网页几乎瞬间加载。
• 安全性提升：前后端分离后，针对 WordPress 数据库的攻击面大幅缩小。
• 开发自由度：可以使用 React、Vue、Svelte 等技术，而不受 PHP 主题的限制。
• 全渠道：同一内容可供网站、移动应用、新闻通讯等多渠道使用。

选择前端：Next.js 还是 Astro

Next.js

• 由 Vercel 支持的 React 框架。
• 适合复杂站点、在线商店（WooCommerce Headless）以及高交互性应用。
• 优势：组件会自动优化 WordPress 的图片。

Astro

• “默认零 JavaScript” 的理念。
• 适合博客、新闻站点、作品集和以内容为中心的企业网站。
• 优势：向浏览器发送的代码极少，轻松在 Google Lighthouse 中获得接近 100 / 100 的得分。

API：REST 与 GraphQL

实施路线

1. 准备 WordPress

   • 安装一个干净的实例（子域或本地）。
   • 添加 WPGraphQL 插件。
   • （可选）安装 “Headless Mode” 以关闭传统前端。

2. 启动前端项目

   • Next.js：npx create-next-app@latest mi-web-wp
   • Astro：npm create astro@latest

3. 连接数据

   • 使用 fetch 或 Apollo Client 等客户端查询 GraphQL 端点。

4. 部署

   • WordPress 可以托管在任何共享或托管主机上。
   • 前端可免费部署到 Vercel 或 Netlify 等平台。

注意： 如果依赖 Elementor、Divi 等可视化构建器，Headless 架构并不是最佳选择。

GraphQL 查询示例

query ObtenerPosts {
  posts(first: 6) {
    nodes {
      title
      slug
      excerpt
      date
    }
  }
}

Astro

---
// src/pages/blog.astro
const res = await fetch("https://tu-wordpress.com/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    query: `
      query ObtenerPosts {
        posts(first: 10) {
          nodes {
            title
            slug
            excerpt
          }
        }
      }
    `,
  }),
});

const json = await res.json();
const articulos = json.data.posts.nodes;
---

## Últimas Novedades

{articulos.map((post) => (
  <>
    <h2>{post.title}</h2>
    <a href={`/blog/${post.slug}`}>Leer más</a>
  </>
))}

Next.js（13+ 版，使用 App Router）

// app/blog/page.tsx
async function getPosts() {
  const res = await fetch('https://tu-wordpress.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `
        query ObtenerPosts {
          posts {
            nodes {
              title
              slug
            }
          }
        }
      `,
    }),
    next: { revalidate: 60 }, // ISR：每 60 秒重新验证
  });

  const json = await res.json();
  return json.data.posts.nodes;
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <>
      <h2>Blog</h2>
      {posts.map((post) => (
        <div key={post.slug}>
          <h3>{post.title}</h3>
        </div>
      ))}
    </>
  );
}

使用自定义文章类型（CPT）

WPGraphQL 会自动检测已注册的 CPT。确保在使用的插件（CPT UI、ACF 等）中开启 “Show in GraphQL” 选项。

以名为 “Proyectos” 的 CPT 为例：

query ObtenerProyectos {
  projects {
    nodes {
      title
      featuredImage {
        node {
          sourceUrl
        }
      }
    }
  }
}

只需将 posts 替换为 CPT 的 camelCase 名称，即可在不创建新 PHP 端点的情况下消费任何类型的内容。