{"id":68247,"date":"2024-05-13T05:07:01","date_gmt":"2024-05-13T08:07:01","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=68247&preview=true&preview_id=68247"},"modified":"2024-05-21T14:05:46","modified_gmt":"2024-05-21T17:05:46","slug":"wordpress-sveltekit","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/wordpress-sveltekit\/","title":{"rendered":"Integra\u00e7\u00e3o do SvelteKit com o WordPress Headless"},"content":{"rendered":"

O WordPress Headless \u00e9 uma tend\u00eancia crescente no mundo do desenvolvimento web. A separa\u00e7\u00e3o entre frontend e backend oferece maior controle, possibilita a cria\u00e7\u00e3o de aplicativos omnicanal<\/a> e abre espa\u00e7o para usos inovadores dessa tecnologia.<\/p>\n

Muitos desenvolvedores t\u00eam gostado de fazer experi\u00eancias com frameworks como Vue.js<\/a> e React.js<\/a> ou mesmo frameworks web como Django<\/a> e Ruby on Rails<\/a>, que geralmente s\u00e3o quase incompat\u00edveis com o WordPress.<\/p>\n

Existem muitos frameworks que funcionam bem com o WordPress Headless, mas o SvelteKit \u00e9 especial. O framework de interface foi constru\u00eddo especificamente para facilitar o desenvolvimento de aplicativos web com c\u00f3digo conciso e elegante. Ele pode facilmente otimizar funcionalidades que normalmente n\u00e3o funcionam bem em um ambiente desacoplado.<\/p>\n

Voc\u00ea tem interesse em saber mais? Vamos examinar alguns conceitos b\u00e1sicos do WordPress headless e, em seguida, ensinaremos a voc\u00ea tudo sobre o SvelteKit e como faz\u00ea-lo funcionar em seu ambiente.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

O que \u00e9 WordPress headless?<\/h2>\n

Talvez voc\u00ea j\u00e1 saiba a diferen\u00e7a entre o frontend e o backend do WordPress<\/a>. O backend \u00e9 onde ficam todas as opera\u00e7\u00f5es subjacentes do CMS: Voc\u00ea cria artigos e p\u00e1ginas, instala plugins, cria seu tema e altera as configura\u00e7\u00f5es.<\/p>\n

Por outro lado, o frontend \u00e9 basicamente o site exibido aos visitantes. O WordPress, juntamente com seus temas e plugins, usa v\u00e1rias fun\u00e7\u00f5es, como get_posts()<\/a>, para extrair e exibir os dados de que voc\u00ea precisa.<\/p>\n

Por exemplo, considere o widget de Artigos Recentes que aparece na p\u00e1gina inicial. Usando fun\u00e7\u00f5es assim, ele acessa dados do backend e exibe seus artigos mais recentes no frontend p\u00fablico.<\/p>\n

\"Os
Os artigos relacionados s\u00e3o exibidos no blog da Kinsta.<\/figcaption><\/figure>\n

O backend e o frontend do WordPress s\u00e3o muito bem interligados e, de muitas maneiras, dependem um do outro para funcionar, mas isso n\u00e3o significa que sejam insepar\u00e1veis.<\/p>\n

\u00c9 aqui que entra o conceito de “WordPress Headless”: com ele, voc\u00ea separa, ou desacopla, o backend do WordPress. Dessa forma, voc\u00ea fica livre para conect\u00e1-lo a qualquer tecnologia de frontend que deseje utilizar \u2014 n\u00e3o apenas PHP, mas qualquer framework de desenvolvimento web<\/a> ou at\u00e9 mesmo um aplicativo.<\/p>\n

Isso tem a funcionalidade adicional de permitir que voc\u00ea use o CMS do WordPress em v\u00e1rios canais. Transfira os artigos do seu blog ou outros itens do CMS para v\u00e1rios sites, aplicativos m\u00f3veis e onde voc\u00ea quiser.<\/p>\n

De modo geral, o WordPress headless oferece a voc\u00ea mais controle sobre o CMS e a capacidade de utilizar tecnologias que normalmente s\u00e3o incompat\u00edveis com ele. Isso tamb\u00e9m evita que voc\u00ea tenha que escrever um aplicativo inteiro do zero – voc\u00ea pode usar o CMS integrado do WordPress para fazer parte do trabalho.<\/p>\n

O que \u00e9 API REST?<\/h2>\n

Para que o WordPress headless funcione, voc\u00ea precisa conectar seus aplicativos usando uma API ou Interface de Programa\u00e7\u00e3o de Aplicativos. As APIs permitem que dois aplicativos diferentes fa\u00e7am interface um com o outro, neste caso, o backend do WordPress e seu aplicativo frontend personalizado.<\/p>\n

Embora existam muitos tipos de APIs, a API REST<\/a> \u00e9 uma que vem integrada ao WordPress. Isso permite que aplicativos externos recuperem dados com seguran\u00e7a do backend do WordPress sem a necessidade de passar pela interface de administra\u00e7\u00e3o.<\/p>\n

A API REST \u00e9 usada em v\u00e1rias fun\u00e7\u00f5es oficiais do WordPress, inclusive no editor de blocos, e a maioria dos temas e plugins que exigem uma API para funcionar usam essa API.<\/p>\n

Isso tamb\u00e9m se aplica a aplicativos sem interface. Muitos deles usam a API REST para fazer interface com o WordPress, recuperando dados do backend e renderizando dinamicamente por meio de seu aplicativo frontend.<\/p>\n

A API REST fornece endpoints<\/a> que representam diferentes recursos do WordPress, como artigos, p\u00e1ginas, usu\u00e1rios, categorias e assim por diante. O acesso a eles permite que voc\u00ea exiba esses dados no frontend.<\/p>\n

Mas, embora voc\u00ea possa usar a API REST com ele, o SvelteKit depende principalmente de uma tecnologia diferente para muitas de suas fun\u00e7\u00f5es: GraphQL.<\/p>\n

O que \u00e9 GraphQL?<\/h2>\n
\"GraphQL
GraphQL \u00e9 uma linguagem de consulta de API.<\/figcaption><\/figure>\n

O GraphQL<\/a> n\u00e3o \u00e9 uma API em si, mas uma linguagem de consulta de API. Diferentemente das APIs REST<\/a> tradicionais, em que os clientes geralmente precisam fazer v\u00e1rias solicita\u00e7\u00f5es a diferentes endpoints para obter dados relacionados, o GraphQL permite que voc\u00ea recupere todos os seus dados em uma \u00fanica solicita\u00e7\u00e3o.<\/p>\n

Em geral, o GraphQL foi projetado para permitir que voc\u00ea fa\u00e7a consultas mais concisas em uma estrutura r\u00e1pida e otimizada. Tamb\u00e9m \u00e9 mais f\u00e1cil de aprender e menos complexo do que a API REST.<\/p>\n

Por esses motivos, muitos frameworks de WordPress headless usam o GraphQL em vez da API REST ou junto com ela. Embora o GraphQL n\u00e3o seja fornecido com o WordPress como a API REST, h\u00e1 plugins que voc\u00ea pode usar para trazer essa funcionalidade para o CMS.<\/p>\n

Gra\u00e7as ao framework otimizado, voc\u00ea evita a busca excessiva e a busca insuficiente de dados. Voc\u00ea pode buscar os dados exatos de que precisa em uma \u00fanica consulta, o que \u00e9 muito mais f\u00e1cil para a rede e o servidor.<\/p>\n

O que \u00e9 SvelteKit?<\/h2>\n
\"O
O SvelteKit \u00e9 um framework que voc\u00ea pode usar para criar aplicativos e o WordPress headless.<\/figcaption><\/figure>\n

O SvelteKit<\/a> \u00e9 um framework web criada com base no Svelte, um framework frontend de c\u00f3digo aberto semelhante ao Next.js<\/a> ou ao React<\/a> em termos de fun\u00e7\u00e3o. Ele foi desenvolvido para simplificar o processo de build de aplicativos web e, embora n\u00e3o tenha sido criado especificamente para o WordPress headless, esse \u00e9 apenas um dos muitos aplicativos poss\u00edveis.<\/p>\n

O SvelteKit foi desenvolvido com base em HTML, CSS e Javascript, nada mais. Isso o torna muito f\u00e1cil de usar e independente do framework, de modo que voc\u00ea pode us\u00e1-lo com outros frameworks para criar um aplicativo frontend totalmente din\u00e2mico ou construir um site est\u00e1tico<\/a>.<\/p>\n

O Svelte foi lan\u00e7ado em 2016 e ainda hoje \u00e9 atualizado ativamente. O framework web SvelteKit foi lan\u00e7ado alguns anos depois, em 2020. Ambos s\u00e3o bem conhecidos e adorados no cen\u00e1rio de desenvolvimento web, permitindo que voc\u00ea escreva c\u00f3digos simples e elegantes.<\/p>\n

Por que voc\u00ea deveria usar o SvelteKit para WordPress headless<\/h3>\n

H\u00e1 alguns aspectos do WordPress headless que podem ser dif\u00edceis de configurar. Gra\u00e7as ao design minimalista do SvelteKit, esses problemas s\u00e3o minimizados e tornam a configura\u00e7\u00e3o do WordPress headless muito mais suave.<\/p>\n

Aqui est\u00e3o apenas alguns dos recursos que o SvelteKit oferece.<\/p>\n