O WordPress é um dos sistemas de gerenciamento de conteúdo (CMS) mais populares, usado por 810 milhões de pessoas, ou seja, 41% de toda a Internet! É a escolha ideal para quem deseja criar um site rapidamente porque é simples, fácil de usar, oferece uma ampla variedade de opções de personalização e também tem um forte ecossistema de plugins e outros recursos.

Uma maneira de você aproveitar ao máximo o WordPress é usar o headless.

Um CMS headless, também conhecido como sistema headless, é um tipo de CMS de backend usado exclusivamente para gerenciar conteúdo. Isso ajuda você a integrar o conteúdo a qualquer sistema ou site, bastando chamar as APIs do CMS headless.

No entanto, isso deixa o frontend para você gerenciar separadamente. É aí que entra uma API.

As APIs permitem que dois ou mais aplicativos diferentes troquem dados. Nesse caso, a API está sendo usada para transferir os dados do CMS para um site de frontend, proporcionando mais flexibilidade e desempenho mais rápido.

Neste artigo, exploraremos o que é um CMS headless, como criar e configurar no WordPress.

O que é WordPress headless?

Um site WordPress Headless é um tipo de site que usa principalmente o WordPress como um CMS, ou sistema de gerenciamento de conteúdo, e usa outras tecnologias de frontend, como React ou Vue, para o frontend.

As bibliotecas e frameworks JavaScript são usadas para exibir o conteúdo do site. Portanto, um WordPress headless tem um frontend e um backend separados, e uma API é usada para comunicação.

Em termos mais simples, uma arquitetura headless significa que o CMS é usado somente para armazenar e gerenciar seu conteúdo e não se preocupa com o frontend do site.

Por outro lado, o trabalho principal do frontend é exibir o conteúdo, e ele, por sua vez, não se preocupa com onde o conteúdo está armazenado ou gerenciado, desde que consiga acessá-lo.

Um WordPress headless tem melhor desempenho, pois as solicitações do frontend são tratadas por tecnologias mais rápidas, como o React, e somente o backend é gerenciado pelo WordPress. A separação do frontend e do backend permite que você dimensione os componentes de forma independente.

Prós e contras do WordPress headless

Como acontece com todas as opções de desenvolvimento, há vantagens e desvantagens em optar por uma solução WordPress headless. É importante que você entenda ambos antes de tomar uma decisão.

Prós do WordPress headless

Alguns dos principais benefícios de uma implementação do WordPress headless são os seguintes:

  • Flexibilidade: O WordPress headless permite que os desenvolvedores criem experiências personalizadas no frontend sem serem restringidos pelo sistema tradicional de temas do WordPress. Isso significa que você pode criar interfaces de usuário e experiências exclusivas para necessidades específicas.
  • Desempenho: Separar o frontend do backend de um site WordPress pode fazer com que seu site carregue mais rápido e aumente o desempenho, pois o servidor só fornece dados por meio de uma API, em vez de renderizar HTML para cada solicitação.
  • Segurança: Ao separar o frontend do backend, o WordPress headless pode oferecer uma camada extra de segurança, limitando o acesso à base de código e ao banco de dados subjacentes do WordPress.

Contras do WordPress headless

As desvantagens do WordPress headless podem incluir:

  • Falta de temas: Como o WordPress headless não depende de temas pré-criados, você precisará criar seus próprios temas personalizados. Isso pode consumir muito tempo e exigir recursos adicionais.
  • Custo: O desenvolvimento de um site WordPress headless pode ser mais caro do que um site WordPress tradicional, por exigir mais conhecimento técnico e recursos para configurar e manter.
  • Limitações de plugins: Alguns plugins de WordPress podem não funcionar com o WordPress Headless, pois dependem de temas de WordPress para funcionar corretamente.

O que é API REST do WordPress?

A API REST do WordPress é usada como uma interface entre o backend e o frontend. Com a API, os dados podem ser enviados ou recuperados do site com facilidade, pois a API tem acesso de controle aos dados do site. Ela também garante que somente usuários autorizados possam interagir com ela.

A API pode suportar uma ampla variedade de formatos de dados, inclusive JSON, facilitando a interação com o sistema.

A API REST do WordPress é uma ferramenta poderosa para que os desenvolvedores criem, atualizem ou excluam dados, além de criar funcionalidades personalizadas para sites ou integrar-se a outro serviço. Além disso, há plugins disponíveis que ampliam a funcionalidade da API, como a integração de métodos de autenticação adicionais.

O que é React?

React é uma biblioteca JavaScript para criar interfaces de usuário. É uma biblioteca de frontend de código aberto, reutilizável e baseada em componentes, que permite aos desenvolvedores criar componentes de interface de usuário (UI) usando sintaxe declarativa.

O React cria uma interface do usuário (UI) interativa e renderiza os componentes quando os dados são alterados. A biblioteca é muito popular entre os desenvolvedores que desejam criar componentes complexos e reutilizáveis, gerenciar o estado com eficiência e atualizar facilmente a interface do usuário em tempo real.

A forte comunidade de desenvolvedores do React criou um conjunto de ferramentas, bibliotecas e recursos para aprimorar a funcionalidade da biblioteca. Muitas organizações e empresas estão adotando o React como sua tecnologia para construir aplicativos web complexas, dinâmicas e de alto desempenho.

Empresas populares que usam React.js (fonte: inexture.com)
Empresas populares que usam React.js (fonte: inexture.com)

Por que usar React?

O React oferece muitos benefícios que o tornam uma excelente escolha para o desenvolvimento de aplicativos web complexas e dinâmicas.

Aqui estão algumas das principais vantagens de usar o React:

  • Sintaxe declarativa: O React usa uma abordagem declarativa para criar componentes da interface do usuário, facilitando a criação de componentes reutilizáveis e altamente eficientes.
  • Grande comunidade e ecossistema: O React tem uma comunidade grande e ativa de desenvolvedores, o que levou à criação de uma ampla gama de ferramentas e bibliotecas para aprimorar sua funcionalidade.
  • DOM virtual: O React usa o DOM virtual para atualizar a interface do usuário em tempo real. Isso significa que, quando o estado muda, ele atualiza apenas os componentes que precisam ser alterados, em vez de renderizar novamente a página inteira.
  • Reusabilidade: O React.js oferece componentes reutilizáveis que podem ser usados em diferentes aplicativos, reduzindo significativamente o tempo e o esforço de desenvolvimento.

Como criar um site WordPress headless com React

Agora é hora de colocar a mão na massa e aprender a criar e implantar um site WordPress headless com o React.

Continue lendo para você se aprofundar no assunto.

Pré-requisitos

Antes de começar este tutorial, verifique se você tem:

Etapa 1: Configure um site WordPress

Vamos começar configurando o site do WordPress, pois ele servirá como fonte de dados para o aplicativo React. Se você já tiver um site do WordPress configurado, pode pular esta seção; caso contrário, siga em frente.

Neste tutorial, usaremos o DevKinsta, um ambiente de desenvolvimento local rápido e confiável amplamente utilizado para criar, desenvolver e implantar sites do WordPress. Você pode usá-lo de forma totalmente gratuita – basta fazer o download no site oficial e instalá-lo em seu sistema.

Quando a instalação estiver concluída, abra o painel do DevKinsta e clique em Novo site WordPress para criar um novo site WordPress.

Preencha as informações necessárias e clique no botão Criar site para continuar.

Página de criação do site DevKinsta
Página de criação do site DevKinsta

Isso pode levar alguns minutos, mas depois que seu site for criado, você poderá acessar o painel de controle clicando em Abrir site” ou nas opções WP Admin, respectivamente.

Em seguida, para ativar a API JSON, você precisará atualizar os permalinks do seu site.

No painel de controle do WordPress, clique em Settings, em seguida Permalinks. Escolha a opção Post name e clique em Save Changes.

Configurações do Permalink do WordPress
Configurações do Permalink do WordPress

Você também pode usar ferramentas como o Postman para testar e enviar facilmente solicitações às APIs REST do WordPress.

Etapa 2: Configure um aplicativo React

Agora que temos nosso site WordPress configurado, podemos começar a trabalhar no frontend. Conforme mencionado acima, neste tutorial, usaremos o React para o frontend do nosso aplicativo.

Para começar, execute o código abaixo em seu terminal para criar um aplicativo React.

npm create vite@latest my-blog-app 
cd my-blog-app 
npm install

Os comandos acima criarão um aplicativo React e instalarão as dependências necessárias.

Também precisamos instalar o Axios, uma biblioteca JavaScript para fazer solicitações HTTP. Execute o comando abaixo para instalá-la.

npm install axios

Agora, para iniciar o servidor de desenvolvimento, você pode executar npm run dev no terminal. O servidor deverá então inicializar o aplicativo em http://127.0.0.1:5173.

Página inicial do Vite + React
Página inicial do Vite + React

Em seguida, abra seu projeto em seu editor de código favorito e exclua todos os arquivos desnecessários que você não precisa, como a pasta assets, index.css e app.css.

Você também pode substituir o código dentro de main.jsx e App.jsx pelo código a seguir:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Etapa 3: Busque artigos do WordPress

Agora é hora de buscar os artigos em nosso site WordPress.

Dentro do App.jsx, adicione o estado abaixo e importe <code>useState</code> do React:

const [posts, setPosts] = useState([])

useState é um hook interno do React usado para adicionar estados para um componente, um estado que se refere a dados ou a uma propriedade.

posts é usado para obter os dados do estado, e setPosts é usado para adicionar novos dados à postagem. Também passamos uma array vazia para o estado por padrão.

Em seguida, adicione o seguinte código após o estado para buscar os artigos da API REST do WordPress:

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

O código acima está executando a função fetchPosts() no carregamento da página. Dentro da função fetchPosts(), enviamos uma solicitação GET para a API do WordPress usando Axios para recuperar artigos e, em seguida, salvá-los no estado que declaramos anteriormente.

Etapa 4: Crie um componente de blog

Dentro do diretório raiz, crie uma nova pasta chamada components e, dentro dela, crie dois novos arquivos: blog.jsx e blog.css.

Primeiro, adicione o seguinte código ao blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

No código acima, criamos um componente de cartão que usa a propriedade posts que contém as informações sobre a publicação do blog da API do WordPress.

Na função getImage(), usamos o Axios para buscar a URL da imagem em destaque e, em seguida, salvamos essas informações no estado.

Em seguida, adicionamos um hook useEffect para chamar a função getImage() assim que o componente for montado. Também adicionamos a instrução de retorno na qual estamos renderizando os dados do artigo, o título, o snippet e a imagem.

Em seguida, adicione os estilos abaixo ao arquivo blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

Em seguida, no arquivo App.jsx, adicione o seguinte código na instrução return para renderizar o componente do blog:

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

Por fim, é assim que seu App.jsx deve se parecer:

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

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

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

Salve o arquivo e atualize a página navegador. Agora você poderá ver os artigos do seu blog renderizados na página.

WordPress headless com React.js
WordPress headless com React.js

Resumo

O WordPress Headless oferece uma ótima maneira de criar sites de alto desempenho com uma arquitetura escalável. Com o uso do React e da API REST do WordPress, é mais fácil do que nunca criar sites dinâmicos e interativos com o WordPress como sistema de gerenciamento de conteúdo.

Tão importante quanto a velocidade é o local onde você hospeda seu site WordPress. A Kinsta está especialmente preparada para fornecer uma experiência de hospedagem WordPress extremamente rápida com máquinas do Google C2 em sua rede de nível premium, além de integração com o Cloudflare para proteger seu site contra perda de dados e ataques maliciosos.

Você já construiu – ou está planejando construir – um site WordPress headless com React? Comente abaixo e nos informe o que você acha! Queremos ouvir sua opinião!

Suhail Kakar

Suhail is a software developer specializing in full-stack web and mobile application development. He's an active contributor to open-source projects and enjoys building Web3 applications.