O que \u00e9 um CMS headless?<\/h2>\n
Um CMS headless \u00e9 um sistema de gerenciamento de conte\u00fado especializado que gerencia exclusivamente o backend do seu site. Diferentemente dos CMSs tradicionais, ele n\u00e3o determina como o conte\u00fado aparece no frontend. Em vez disso, ele fornece uma API (Interface de Programa\u00e7\u00e3o de Aplicativos)<\/a> para que os desenvolvedores<\/a> recuperem e forne\u00e7am conte\u00fado para qualquer dispositivo ou plataforma.<\/p>\n Atualmente, existem v\u00e1rias plataformas de CMS headless. Entretanto, fazer a transi\u00e7\u00e3o do seu conte\u00fado do WordPress, com o qual voc\u00ea j\u00e1 est\u00e1 familiarizado, pode parecer desnecess\u00e1rio. Felizmente, h\u00e1 uma alternativa: o WordPress headless.<\/p>\n O WordPress<\/a>, em sua forma tradicional, n\u00e3o \u00e9 inerentemente um CMS headless. O WordPress \u00e9 um CMS popular e avan\u00e7ado, conhecido por sua facilidade de uso e flexibilidade na cria\u00e7\u00e3o e no gerenciamento de conte\u00fado. No entanto, tradicionalmente, combina o gerenciamento de conte\u00fado e a forma como ele \u00e9 apresentado em um \u00fanico sistema.<\/p>\n Hoje em dia, os desenvolvedores criaram implementa\u00e7\u00f5es do WordPress headless utilizando sua REST API. Nesses casos, o WordPress ainda funciona como o CMS onde voc\u00ea cria, gerencia e armazena conte\u00fado. No entanto, ao inv\u00e9s de renderizar o frontend ou o site diretamente atrav\u00e9s dos templates<\/a> e temas de WordPress, a apresenta\u00e7\u00e3o do frontend \u00e9 desacoplada ou separada do backend.<\/p>\n Isso permite que os desenvolvedores construam aplicativos usando diferentes tecnologias e frameworks, enquanto ainda aproveitam as capacidades de gerenciamento de conte\u00fado do WordPress. \u00c9 uma maneira de fazer o WordPress funcionar de forma mais headless, embora n\u00e3o seja a configura\u00e7\u00e3o padr\u00e3o.<\/p>\n Este artigo explora duas abordagens para buscar dados do seu CMS WordPress headless para o seu framework de frontend, focando em dois m\u00e9todos principais: WPGraphQL e REST API.<\/p>\n A API REST \u00e9 um pilar fundamental no desenvolvimento do WordPress que facilita a recupera\u00e7\u00e3o de dados no formato JSON. Desde o WordPress 4.7<\/a>, ela foi incorporada ao WordPress e n\u00e3o requer nenhum plugin para funcionar.<\/p>\n Ela proporciona acesso aos dados do conte\u00fado do seu site e implementa as mesmas restri\u00e7\u00f5es de autentica\u00e7\u00e3o \u2014 conte\u00fado que \u00e9 p\u00fablico no seu site geralmente \u00e9 acess\u00edvel publicamente via REST API, enquanto conte\u00fado privado, conte\u00fado protegido por senha, usu\u00e1rios internos, tipos de artigos personalizados e metadados s\u00f3 est\u00e3o dispon\u00edveis com autentica\u00e7\u00e3o ou se voc\u00ea especificamente configurar para que seja assim.<\/p>\n Para obter seus dados do WordPress em um formato JSON, adicione Se a API JSON n\u00e3o estiver ativada quando voc\u00ea visitar Isso funciona para sites locais e p\u00fablicos do WordPress, oferecendo endpoints<\/a> para artigos<\/a>, p\u00e1ginas<\/a>, coment\u00e1rios<\/a>, m\u00eddia<\/a>, etc.<\/p>\n H\u00e1 mais coisas que voc\u00ea pode fazer com a API REST. Leia nosso guia completo<\/a> para saber mais.<\/p>\n Em 2012, o Facebook apresentou o GraphQL, uma abordagem revolucion\u00e1ria para a recupera\u00e7\u00e3o de dados em APIs. Sua natureza declarativa e a busca seletiva de dados proporcionaram uma alternativa robusta \u00e0s APIs REST tradicionais.<\/p>\n Em 2015, Jason Bahl<\/a> reconheceu a demanda por uma solu\u00e7\u00e3o que combinasse a flexibilidade do GraphQL com os recursos de conte\u00fado do WordPress e lan\u00e7ou o WPGraphQL<\/a>, uma inova\u00e7\u00e3o para os desenvolvedores WordPress.<\/p>\n O WPGraphQL \u00e9 um plugin baseado em GraphQL que oferece uma abordagem mais eficiente e personalizada para a consulta de dados. Ele apresenta um \u00fanico endpoint, permitindo a recupera\u00e7\u00e3o precisa de dados e reduzindo os problemas de busca excessiva predominantes na API REST.<\/p>\n Para usar o WPGraphQL, siga estas etapas:<\/p>\n O playground permite que voc\u00ea explore o esquema, execute consultas e teste muta\u00e7\u00f5es de forma interativa.<\/li>\n Agora voc\u00ea pode integrar o WPGraphQL ao seu aplicativo frontend, seja ele criado com React<\/a>, Vue<\/a> ou qualquer outro framework, usando um \u00fanico endpoint do GraphQL para buscar dados com efici\u00eancia e atualizar a interface do usu\u00e1rio dinamicamente.<\/p>\n O WPGraphQL tem os principais recursos para que voc\u00ea tenha uma experi\u00eancia de recupera\u00e7\u00e3o de dados otimizada e direcionada, conforme mostrado abaixo.<\/p>\n O WPGraphQL fornece um endpoint unificado, normalmente No caso da API REST, suponha que voc\u00ea queira recuperar detalhes sobre uma publica\u00e7\u00e3o espec\u00edfica e seus coment\u00e1rios. Voc\u00ea precisa fazer v\u00e1rias solicita\u00e7\u00f5es a diferentes endpoints, por exemplo:<\/p>\n Para obter informa\u00e7\u00f5es sobre um artigo:<\/p>\n Para obter coment\u00e1rios relacionados ao artigo:<\/p>\n Por outro lado, com o WPGraphQL, voc\u00ea pode obter o mesmo resultado com uma \u00fanica consulta focada:<\/p>\n Neste exemplo, a consulta GraphQL \u00e9 enviada a um \u00fanico endpoint. A consulta especifica que voc\u00ea deseja obter informa\u00e7\u00f5es sobre o artigo com ID “123”, incluindo seu t\u00edtulo, conte\u00fado e coment\u00e1rios associados. O WPGraphQL processa essa consulta e retorna uma resposta contendo exatamente os dados que solicitamos, tudo de uma s\u00f3 vez.<\/p>\n Com o GraphQL, voc\u00ea pode criar consultas espec\u00edficas adaptadas \u00e0s suas necessidades. Isso permite que voc\u00ea solicite apenas os dados necess\u00e1rios, minimizando a busca excessiva.<\/p>\n Suponha que voc\u00ea queira recuperar alguns detalhes (t\u00edtulo, autor e data) sobre todos os artigos. A API REST n\u00e3o pode fazer isso. Para recuperar esses detalhes, voc\u00ea precisaria usar um endpoint como este:<\/p>\n Esse endpoint recupera todo o conjunto de dados de todos os artigos, incluindo conte\u00fado, categorias e dados associados. Com o WPGraphQL, voc\u00ea pode criar uma consulta direcionada para obter apenas os dados espec\u00edficos de que precisa:<\/p>\n Neste exemplo, a consulta GraphQL foi criada para recuperar detalhes sobre os artigos. No entanto, solicitamos apenas o t\u00edtulo, a data e o nome do autor. O WPGraphQL permite que voc\u00ea solicite apenas os campos do seu interesse, resultando em uma resposta mais eficiente e leve.<\/p>\n No WPGraphQL, voc\u00ea pode consultar v\u00e1rios recursos raiz em uma \u00fanica solicita\u00e7\u00e3o, o que o torna flex\u00edvel e eficiente:<\/p>\n Ao embarcar na jornada de uma configura\u00e7\u00e3o do WordPress headless, uma das decis\u00f5es cr\u00edticas que voc\u00ea enfrenta \u00e9 a sele\u00e7\u00e3o do cabe\u00e7alho ideal: a tecnologia de frontend que alimentar\u00e1 sua interface de usu\u00e1rio e ditar\u00e1 a experi\u00eancia do usu\u00e1rio.<\/p>\n Essa decis\u00e3o \u00e9 muito importante, pois afeta diretamente o desempenho, a escalabilidade e a capacidade de manuten\u00e7\u00e3o do seu aplicativo web. V\u00e1rios frameworks e tecnologias de frontend s\u00e3o compat\u00edveis com o WordPress headless, cada uma com seus pontos fortes e considera\u00e7\u00f5es.<\/p>\n Por exemplo, voc\u00ea pode escolher um Gerador de Site Est\u00e1tico (SSG)<\/a> e implant\u00e1-lo gratuitamente na Hospedagem de Site Est\u00e1tico da Kinsta<\/a>, assim voc\u00ea s\u00f3 precisa se preocupar em hospedar o WordPress<\/a> (o backend) e aproveitar a hospedagem gratuita para o head (frontend).<\/p>\n Da mesma forma, voc\u00ea tamb\u00e9m pode usar uma abordagem mais robusta, por exemplo, usando uma biblioteca JavaScript<\/a> como o React<\/a> para alimentar seu frontend e manter o WordPress processando o backend.<\/p>\n Tanto o WPGraphQL quanto a API REST oferecem maneiras eficientes de obter dados de um CMS WordPress headless e integr\u00e1-los perfeitamente aos aplicativos de frontend. A escolha entre os dois depende das necessidades espec\u00edficas do seu projeto e da abordagem de recupera\u00e7\u00e3o de dados que voc\u00ea preferir.<\/p>\n Se optar pela API REST, voc\u00ea ter\u00e1 acesso a uma solu\u00e7\u00e3o integrada no WordPress, facilitando a recupera\u00e7\u00e3o de dados no formato JSON. Por outro lado, o WPGraphQL oferece uma abordagem mais moderna e eficiente, aproveitando o poder do GraphQL.<\/p>\n Como a tend\u00eancia headless continua a evoluir, os desenvolvedores podem escolher a ferramenta que melhor se alinha ao seu fluxo de trabalho e \u00e0s metas do projeto, garantindo uma integra\u00e7\u00e3o perfeita e eficiente entre o WordPress e o framework de frontend de sua escolha.<\/p>\n Na Kinsta<\/a>, criar e gerenciar seu WordPress (backend) \u00e9 muito f\u00e1cil com nossa hospedagem especializada em WordPress<\/a>. Ela tem recursos valiosos, incluindo Edge Caching<\/a>, backups de sites<\/a>, certificados SSL Cloudflare gratuitos<\/a>, Kinsta CDN<\/a> e muito mais.<\/p>\n Al\u00e9m disso, voc\u00ea pode implantar seu frontend usando nossa Hospedagem de Aplicativos<\/a> ou Hospedagem de Site Est\u00e1tico<\/a> para SSGs. Essa abordagem unificada permite que tanto o frontend quanto o backend sejam prontamente hospedados e acessados por meio de um \u00fanico painel<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Atualmente, no desenvolvimento web, a separa\u00e7\u00e3o dos sistemas de frontend e backend ganhou destaque significativo, dando origem a sites headless. Tradicionalmente, os sistemas de gerenciamento de …<\/p>\n","protected":false},"author":287,"featured_media":65973,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,971],"class_list":["post-65972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-headless-cms"],"yoast_head":"\nWordPress headless<\/h3>\n
![\"Arquitetura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/headless-cms-arcitecture.png\")
Entendendo a REST API para WordPress Headless<\/h2>\n
\/wp-json<\/code> ao URL do site do WordPress:<\/p>\nhttp:\/\/yoursite.com\/wp-json<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json<\/code> por padr\u00e3o, voc\u00ea poder\u00e1 ativ\u00e1-la abrindo Permalinks<\/strong> em WordPress Settings<\/strong>\u00a0e selecionando Post Name<\/strong> ou qualquer outro de sua escolha, exceto Plain<\/strong>:<\/p>\n![\"Como](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/configure-headless-wp-rest-api.jpg\")
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/media<\/code><\/pre>\nExplorando o WPGraphQL para o WordPress Headless<\/h2>\n
Como usar o WPGraphQL<\/h3>\n
\n
![\"Plug-in](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/wpgraphql-plugin.png\")
![\"Explorando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/graphql-ide-wp.jpg\")
![\"Obtenha](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/11\/testing-graphql-wp.jpg\")
Principais recursos do WPGraphQL<\/h3>\n
Endpoint \u00fanico para recupera\u00e7\u00e3o precisa de dados<\/h4>\n
\/graphql<\/code>, permitindo que voc\u00ea recupere dados espec\u00edficos com efici\u00eancia. Isso contrasta com a API REST, em que voc\u00ea precisa de v\u00e1rios endpoints para coletar as mesmas informa\u00e7\u00f5es.<\/p>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/123<\/code><\/pre>\nhttp:\/\/yoursite.com\/wp-json\/wp\/v2\/comments?post=123<\/code><\/pre>\n{\n post(id: \"123\") {\n title\n content\n comments {\n edges {\n node {\n content\n }\n }\n }\n }\n}<\/code><\/pre>\nConsultas direcionadas para uma recupera\u00e7\u00e3o eficiente<\/h4>\n
http:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n{\n posts {\n title\n date\n author {\n name\n }\n }\n}<\/code><\/pre>\nV\u00e1rios recursos raiz<\/h4>\n
{\n posts {\n edges {\n node {\n title\n content\n }\n }\n }\n\n pages {\n edges {\n node {\n title\n content\n }\n }\n }\n}<\/code><\/pre>\nEscolhendo o frontend ideal para o WordPress Headless<\/h2>\n
Resumo<\/h2>\n