Headless CMS + React 在 Nodejs 环境下的应用

发布于 1周前 作者 caililin 来自 nodejs/Nestjs

Headless CMS + React 在 Nodejs 环境下的应用

最近我发现这个Headless CMS的概念在美国很火，原因无他，节省时间，不用开发后端。

至于前端，可以用 react 这样的前端框架来写。

感觉两头好处都占了。

我原先写 PHP 的，反正是被 wordpress 给恶心到了。但自己从头实现一个功能齐全、没有明显 bug 的后端，又确实比较费劲一点。

所以就搞出来这个 React 使用 wordpress rest api 的模式来了，确实很省事。

https://github.com/buzzycloud/buzzyblog

各位老铁请轻拍


Harmonyos Next教程
23 回复

Gatsby 配合 Headless CMS 感觉是现阶段最好的建站方案了


咱这是自己尝试着实现一下这个模式，确实有优势

这里有好多：
https://geekflare.com/headless-cms/

最近在整 Gatsby.js 确实很爽

再用上 Netlify、Cloudflare-worker 这些服务。JAMstack、FaaS 一把梭是真的很舒服。

昨天刚刚在 thoughtworks 的技术雷达里注意到 headless CMS

是的

是的，可以只用 WordPress 好用的后台功能，尤其是图片上传、管理、尺寸调整之类。

现在类似专门的服务也不少，比如 Contentful， 可以说是 Serverless，也可以说是 Headless CMS

是的，作为一个普通用户，用 wp 还是挺好用的

但作为一个开发者，wp 就太让人痛苦了

求教一下，Headless CMS 的好处是啥？我搜了下还是没看懂。还是需要一个 cms 服务在运行，只是只用 api 和它进行交互是吗？

对，

比如 wp，你有一个服务器运行 wp，wp 会提供了 restful api，你可以用前端 app 来获取数据，定制一个新的博客，增加新的功能，甚至增加 wp 不可能提供的功能。

更重要的原因是，现代 js 框架都很强大，wp 还是用 php 和 html 混写，太恶心了，很难定制，而且还在用 jq

wp 尾大不掉，全新重构的话周边生态全部重来，等于就是新立一个项目。现在都是 SNS 平台化，算法推荐内容，独立站的市场不大了，wp 官方也就没有很强意愿重写。

Headless 是挺节省时间的，但涉及微信公众号和小程序怎么办，国内做产品肯定有其中一个

谢谢反馈，这个我会继续探索一天，看怎么办比较好

错字。探索一下。

请大佬点个 star，保持对我的关注。

有更新会继续放上来

https://serverless.css-tricks.com/services/cmss

多谢

分享一个建好的实例就好了……

搜了一下不是很理解，希望解答一下。
headless cms 主要是指后端提供的接口与内容展示方式无关吗？
如果这样的话，这个约束条件是只是在后端？

本周搭建起来，其实就是一个普通的博客，只是用了这个 react+headkess cms 的模式

就是找一个已经齐全功能的 cms，比如 wordpress，然后用这个它的 api，重做一个前端 app，而不是去 wordpress 里面修改它恶心的 theme。

wp 作为一个存在了多年的 cms 系统，实在有点不符合现代的编程的概念，代码都是上古时代的东西，估计你不好适应。

后端提供的接口，确实和展示不太相关，毕竟你只是从后端拿数据，剩下的，你自由发挥了。

至于约束条件，确实可能是后端，有的时候，后端功能不全，或者权限不够，或者其他什么原因导致你不能很好的在前端增加某个功能

Headless CMS与React在Node.js环境下的应用是一种现代且高效的Web开发模式。以下是对这一组合应用的简要说明：

一、Headless CMS简介

Headless CMS是一种内容管理系统，它将前端和后端分离，只关注内容的创建和管理，而不处理呈现内容的前端界面。通过提供API（如RESTful或GraphQL），Headless CMS允许开发者使用任何前端技术或框架来构建用户界面。

二、React与Node.js的结合

React是一个用于构建用户界面的JavaScript库，非常适合与Node.js结合使用。在Node.js环境下，React可以处理前端视图层，提供动态交互的用户体验；而Node.js则处理后端逻辑，包括数据库操作、API接口的实现等。

三、示例代码

以下是一个简单的示例，展示如何在Node.js环境下使用Headless CMS（以Strapi为例）和React：

// 假设已经设置好了Strapi CMS，并创建了相关的API端点

// React组件示例，用于从Strapi CMS获取数据并展示
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:1337/posts') // Strapi CMS的API端点
      .then(response => setPosts(response.data))
      .catch(error => console.error('Error fetching posts:', error));
  }, []);

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

以上代码展示了如何从Strapi CMS获取文章数据，并在React组件中展示。

回到顶部