Separation of front-end and back-end is a development model that improves website performance and team collaboration efficiency。In WordPress，By using e.g.React.jsfront-end technology，Combined with WordPress REST API，Can realize independent development and data exchange of front-end and back-end。This approach enhances website flexibility and scalability，But you also need to pay attention to challenges such as SEO optimization and error management。
Traditional web development，Front-end and back-end code are closely integrated。This means that the interface (HTML、CSS) and logic (PHP、database operations) are handled in the same location。but，This approach as sites become more complex and content-rich，Its limitations are revealed。
Separation of front and back endsIt is a website development model，It layers user interface and data。The front end only focuses on the presentation layer，That is the part that the user interacts with，The backend processes the data、Logic and server operations。The two communicate through APIs，APIs are interfaces that allow different software applications to operate with each other。
Why should we implement front-end and back-end separation in WordPress?
- Performance improvements：Front-end apps load quickly，Get data from the backend only when needed，Greatly improve the response speed and user experience of the website。
- flexibility：Design and development teams can work independently，Will not interfere with each other。This is useful for large projects and teams，is a huge advantage。
- Scalability：Due to the separation of front and rear ends，Adding new features or scaling becomes easier。
- Multi-platform support：A back-end system can serve the website at the same time、mobile application、Even desktop apps。
如何实现 WordPress 的前后端分离？
- 选择合适的前端技术：决定采用什么技术栈对前端开发至关重要。常见的技术选择包括React.js、Vue.js wait。这些都是现代 JavaScript 框架，可以创建动态、交互式的用户界面。
- 利用 WordPress REST API：WordPress 提供了一个强大的 REST API，允许开发者读取、写入、修改和删除网站数据（如文章、page、媒体等）。通过使用 REST API，前端应用可以通过 HTTP 请求从 WordPress 后端检索或发送数据。
- 创建自定义端点：虽然 WordPress REST API 已经提供了大量的端点，但有时您可能需要更特定的功能。in this case，您可以创建自定义端点，这些端点是与您的应用逻辑相对应的 API URL。
- 认证与权限：当涉及到敏感数据或需要用户登录的功能时，你需要处理认证（用户的身份）和授权（用户可以做什么）。WordPress 提供了几种认证方法，包括 Cookie 认证、应用密码和 OAuth。
- 静态资源的管理：前后端分离后，前端的静态资源（如 JavaScript、CSS、图像文件等）可以使用 CDN（内容交付网络）来加速加载。
- 错误处理和调试：使用前后端分离架构，特别是涉及到 API 时，有效的错误处理和调试变得非常重要。确保你的前端应用能够妥善处理来自后端的错误信息，并且使用如 Chrome 开发者工具等工具进行调试。
- SEO 优化：前后端分离可能会影响搜索引擎优化（SEO），因为搜索引擎可能无法正确抓取完全由 JavaScript 生成的内容。解决这个问题的技术之一是使用 SSR（服务器端渲染）或预渲染内容，确保搜索引擎可以读取网站内容。
WordPress在全球超过 13 亿个网站上使用,它非常适合作为无头 CMS。NextJS是一个基于 React 构建的框架,可为您提供惊人数量的功能,Otherwise you need to set up these functions yourself(static rendering、bundle、prefetch etc.),and provide ultra-fast and high-performance websites。Let’s combine the two to create a super-fast headless WordPress website!
Prerequisites:
- Basic understanding of NodeJS and React
- An existing WordPress website,It contains some posts and pages
We’ll be using Colby Fayock’s Next.js WordPress Starter in this walkthrough (https://github.com/colbyfayock/next-wordpress-starter/)。这个 Next.js WordPress Starter 项目旨在“将 WordPress 作为一个无头 CMS,并使用 Next.js 创建可以部署在任何地方的静态体验。”
Next.js WordPress Starter 项目允许我们轻松提取您通常期望在 WordPress 网站中的所有内容(Post、page、作者列表、全局搜索),并通过 GraphQL 端点将其引入 NextJS。该项目正在积极开发中,因此请关注 repo 以获取更多功能更新!
实操入门
WordPress
Next.js WordPress Starter 使用 GraphQL,因此首先登录您的 WordPress 网站并安装WPGraphQL。如果您没有现有的 WordPress 网站,我已经设置了一个虚拟项目,您可以在以下位置使用:https://fake-data.better-wordpress.dev。
Next.js WordPress 启动器
在前端开始使用 NextJS 的最快方法是打开终端,导航到要开始工作的文件夹,然后运行:
yarn create next-app -e https://github.com/colbyfayock/next-wordpress-starter
安装完成后,打开代码编辑器并将.env.local文件添加到项目的根目录。这是我们要设置环境变量的地方,以便 NextJS 知道从哪里获取我们的数据。
Starter Project 使用的环境变量是:WORDPRESS_GRAPHQL_ENDPOINT,所以我使用WORDPRESS_GRAPHQL_ENDPOINT="https://fake-data.better-wordpress.dev/graphql"来获取一些虚拟数据。您也可以在测试时使用这个虚拟 WordPress 数据,但是当您准备好上线时,不要忘记用您自己的 WordPress 端点替换 url!
[
](https://res.cloudinary.com/practicaldev/image/fetch/s–yTHzS9ou–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// /dev-to-uploads.s3.amazonaws.com/uploads/articles/x1uabk6infw3yqhlchrx.jpg)
回到您的终端,运行yarn dev会启动一个开发服务器。现在不是查看新 NextJS 网站的性能和捆绑包大小的时候(我在第一次尝试 NextJS 时犯的一个错误),尽管您应该始终确保发布尽可能小的捆绑包大小。我们稍后会谈到。
在终端中运行yarn devback,您现在可以打开浏览器并看到您的 Headless WordPress 站点运行在:http://localhost:3000。
恭喜——您现在在 JAM 堆栈上运行了一个完全无头的 WordPress 网站,其中包括您所有的帖子、页面和实时搜索!如果您使用的是我的假数据 API,那么您的网站应该类似于此屏幕截图:
[
上运行的无头 WordPress 安装的数据屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–yL18MnTZ–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto% 2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfscqemyudt0qx2twwr.jpg)
来自在 NextJS 上运行的 Headless WordPress 安装的数据的屏幕截图
此时,您可以开始自定义启动项目,使其外观和功能完全符合您的要求。after finishing,是时候部署您的网站让全世界看到了!
部署您的 NextJS 网站
在运行生产构建之前,使用您的实时 URL 更新您的package.json文件(No. 3 行)。这是将传递到您的站点地图中的 URL——对于 SEO 非常重要。
[
的屏幕截图](https://res.cloudinary.com/practicaldev/image/fetch/s–GL6yBr2m–/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/uploads/articles/5fnd6zc8jxfidnzf9nx2.jpg)
在您的终端中运行yarn build实际上会获取您的所有帖子和页面,创建站点地图和静态网站的优化生产版本,准备部署到您的服务器。
运行yarn buildback,您可以运行yarn start来运行本地服务器并测试您的本地生产版本。这是查看捆绑包大小和站点速度的最佳时机,因为它很好地代表了您的站点将如何在服务器上响应。
我使用vercel.com来部署 better-wordpress.dev。 Vercel 是构建 NextJS 的同一团队,他们有一个慷慨的免费层,所以在那里部署它是非常有意义的。
我目前正在撰写博客文章,解释如何将 NextJS 部署到 Vercel、Netlify 和其他主机——但与此同时,Vercel 文档非常棒:https://nextjs.org/docs/deployment
最后的话
您现在拥有一个在 JAM 堆栈上运行的功能齐全且速度极快的网站,在前端使用 NextJS 并为您的数据使用 WordPress。
前后端分离不是一种全新的概念，但它在 WordPress 生态系统中正变得越来越流行。它提供了无与伦比的灵活性和扩展性，尤其是对于那些需要高性能和多平台支持的复杂项目。However，它也带来了其自身的挑战，如 SEO 优化和错误管理。therefore，在决定采用这种结构之前，确保您已经考虑了这些因素，并准备好投入额外的时间进行开发和维护。
