O WordPress Headless é uma tendência crescente no mundo do desenvolvimento web. A separação entre frontend e backend oferece maior controle, possibilita a criação de aplicativos omnicanal e abre espaço para usos inovadores dessa tecnologia.
Muitos desenvolvedores têm gostado de fazer experiências com frameworks como Vue.js e React.js ou mesmo frameworks web como Django e Ruby on Rails, que geralmente são quase incompatíveis com o WordPress.
Existem muitos frameworks que funcionam bem com o WordPress Headless, mas o SvelteKit é especial. O framework de interface foi construído especificamente para facilitar o desenvolvimento de aplicativos web com código conciso e elegante. Ele pode facilmente otimizar funcionalidades que normalmente não funcionam bem em um ambiente desacoplado.
Você tem interesse em saber mais? Vamos examinar alguns conceitos básicos do WordPress headless e, em seguida, ensinaremos a você tudo sobre o SvelteKit e como fazê-lo funcionar em seu ambiente.
O que é WordPress headless?
Talvez você já saiba a diferença entre o frontend e o backend do WordPress. O backend é onde ficam todas as operações subjacentes do CMS: Você cria artigos e páginas, instala plugins, cria seu tema e altera as configurações.
Por outro lado, o frontend é basicamente o site exibido aos visitantes. O WordPress, juntamente com seus temas e plugins, usa várias funções, como get_posts(), para extrair e exibir os dados de que você precisa.
Por exemplo, considere o widget de Artigos Recentes que aparece na página inicial. Usando funções assim, ele acessa dados do backend e exibe seus artigos mais recentes no frontend público.
O backend e o frontend do WordPress são muito bem interligados e, de muitas maneiras, dependem um do outro para funcionar, mas isso não significa que sejam inseparáveis.
É aqui que entra o conceito de “WordPress Headless”: com ele, você separa, ou desacopla, o backend do WordPress. Dessa forma, você fica livre para conectá-lo a qualquer tecnologia de frontend que deseje utilizar — não apenas PHP, mas qualquer framework de desenvolvimento web ou até mesmo um aplicativo.
Isso tem a funcionalidade adicional de permitir que você use o CMS do WordPress em vários canais. Transfira os artigos do seu blog ou outros itens do CMS para vários sites, aplicativos móveis e onde você quiser.
De modo geral, o WordPress headless oferece a você mais controle sobre o CMS e a capacidade de utilizar tecnologias que normalmente são incompatíveis com ele. Isso também evita que você tenha que escrever um aplicativo inteiro do zero – você pode usar o CMS integrado do WordPress para fazer parte do trabalho.
O que é API REST?
Para que o WordPress headless funcione, você precisa conectar seus aplicativos usando uma API ou Interface de Programação de Aplicativos. As APIs permitem que dois aplicativos diferentes façam interface um com o outro, neste caso, o backend do WordPress e seu aplicativo frontend personalizado.
Embora existam muitos tipos de APIs, a API REST é uma que vem integrada ao WordPress. Isso permite que aplicativos externos recuperem dados com segurança do backend do WordPress sem a necessidade de passar pela interface de administração.
A API REST é usada em várias funções oficiais do WordPress, inclusive no editor de blocos, e a maioria dos temas e plugins que exigem uma API para funcionar usam essa API.
Isso também 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.
A API REST fornece endpoints que representam diferentes recursos do WordPress, como artigos, páginas, usuários, categorias e assim por diante. O acesso a eles permite que você exiba esses dados no frontend.
Mas, embora você possa usar a API REST com ele, o SvelteKit depende principalmente de uma tecnologia diferente para muitas de suas funções: GraphQL.
O que é GraphQL?
O GraphQL não é uma API em si, mas uma linguagem de consulta de API. Diferentemente das APIs REST tradicionais, em que os clientes geralmente precisam fazer várias solicitações a diferentes endpoints para obter dados relacionados, o GraphQL permite que você recupere todos os seus dados em uma única solicitação.
Em geral, o GraphQL foi projetado para permitir que você faça consultas mais concisas em uma estrutura rápida e otimizada. Também é mais fácil de aprender e menos complexo do que a API REST.
Por esses motivos, muitos frameworks de WordPress headless usam o GraphQL em vez da API REST ou junto com ela. Embora o GraphQL não seja fornecido com o WordPress como a API REST, há plugins que você pode usar para trazer essa funcionalidade para o CMS.
Graças ao framework otimizado, você evita a busca excessiva e a busca insuficiente de dados. Você pode buscar os dados exatos de que precisa em uma única consulta, o que é muito mais fácil para a rede e o servidor.
O que é SvelteKit?
O SvelteKit é um framework web criada com base no Svelte, um framework frontend de código aberto semelhante ao Next.js ou ao React em termos de função. Ele foi desenvolvido para simplificar o processo de build de aplicativos web e, embora não tenha sido criado especificamente para o WordPress headless, esse é apenas um dos muitos aplicativos possíveis.
O SvelteKit foi desenvolvido com base em HTML, CSS e Javascript, nada mais. Isso o torna muito fácil de usar e independente do framework, de modo que você pode usá-lo com outros frameworks para criar um aplicativo frontend totalmente dinâmico ou construir um site estático.
O Svelte foi lançado em 2016 e ainda hoje é atualizado ativamente. O framework web SvelteKit foi lançado alguns anos depois, em 2020. Ambos são bem conhecidos e adorados no cenário de desenvolvimento web, permitindo que você escreva códigos simples e elegantes.
Por que você deveria usar o SvelteKit para WordPress headless
Há alguns aspectos do WordPress headless que podem ser difíceis de configurar. Graças ao design minimalista do SvelteKit, esses problemas são minimizados e tornam a configuração do WordPress headless muito mais suave.
Aqui estão apenas alguns dos recursos que o SvelteKit oferece.
- Somente Javascript.Diferente de outros frameworks, você quase não precisa se preocupar com dependências e configurações confusas. Frequentemente, nenhuma configuração é necessária. O SvelteKit funciona onde quer que o Javascript possa ser executado.
- Agnóstico a frameworks. O SvelteKit se integra bem com outros frameworks devido à sua simplicidade. Traga qualquer tecnologia para sua aplicação WordPress headless.
- Extensível. Se o SvelteKit não funcionar perfeitamente em seu ambiente, é extremamente fácil expandi-lo e corrigir qualquer coisa que não funcione bem na sua configuração.
- Leve e fácil de aprender. O SvelteKit depende apenas de Javascript, HTML e CSS. É muito leve comparado aos frameworks tradicionais e é super fácil de trabalhar. Crie códigos limpos, elegantes e simples com componentes compactos e concisos.
- Busca de dados simplificada. O GraphQL, com o qual o SvelteKit funciona bem, simplifica o processo de obtenção de dados do WordPress e permite que você faça consultas mais concisas e eficientes.
- A autenticação é fácil. O SvelteKit implementou recentemente o suporte ao NextAuth.js, mantendo seus dados seguros e protegidos, além de ser fácil de instalar.
- Renderização do lado do servidor (SSR) e geração de site estático (SSG). O SvelteKit não se destina apenas a sites estáticos ou aplicativos dinâmicos. Você pode fazer qualquer um deles facilmente usando este framework, pois são fornecidas várias opções de renderização de páginas e a geração de sites estáticos é facilmente realizada.
- Sitemaps. Se você já se cansou de tentar obter um mapa do site funcional em um site headless, não está sozinho. O SvelteKit permite que você renderize dinamicamente sitemaps com um endpoint.
- Comunidade ativa. Há muitos fãs do SvelteKit desenvolvendo aplicativos com o software. Se você precisar de ajuda ou quiser conversar sobre o framework, eles são fáceis de encontrar pela internet e nas redes sociais. Há até um servidor no Discord com mais de 60 mil membros!
Como criar um site WordPress headless com o SvelteKit
Pronto para começar? Este guia irá orientá-lo na configuração do WordPress em um ambiente local, na instalação do SvelteKit em sua máquina e na implantação da sua instância WordPress headless na Kinsta assim que você terminar.
Vamos nos aprofundar no assunto.
Etapa 1. Configure um site WordPress
Há muitas maneiras de configurar uma instância local do WordPress em sua máquina. Se você já tiver uma conta Kinsta, poderá criar um site com o painel MyKinsta ou usar a API da Kinsta para configurar um.
Para este tutorial, utilizaremos o DevKinsta, um kit de desenvolvimento local de WordPress. Você não precisa ter uma hospedagem Kinsta para usar o DevKinsta – ele é totalmente gratuito.
Você pode fazer o download do DevKinsta no link acima. Se você precisar de ajuda com a instalação ou quiser aprender o básico, consulte a documentação do DevKinsta.
Depois que o DevKinsta estiver instalado e configurado, siga estas etapas para criar um ambiente local do WordPress.
- Crie um novo site WordPress ou um site personalizado se você quiser alterar configurações como versão PHP, multisite e assim por diante.
- Digite o nome do seu site, nome de usuário, senha e qualquer outra informação e clique em Criar site. Espere um pouco enquanto o DevKinsta configura seu ambiente WordPress local.
- Você será direcionado para a tela de Informações do Site. Anote o host do seu site, pois essa é a URL local que você acessa para abrir seu site.
- Clique em Abrir site e navegue até http://<seusite>.local/wp-admin, ou simplesmente clique em WP Admin para abrir essa página diretamente. Faça login com as credenciais que você inseriu anteriormente.
Etapa 2. Prepare o WordPress headless para a implantação
Na sua nova tela inicial de administração, você precisará executar algumas etapas adicionais para preparar a instalação do WordPress headless para a implantação.
O SvelteKit depende do GraphQL para que muitas de suas funções funcionem, portanto, você precisará instalar o WPGraphQL. Esse plugin permite que você use o framework GraphQL para se conectar a tecnologias Javascript headless, como NextJS, Gatsby e, é claro, SvelteKit.
Para isso, vá até Plugins > Add New e instale o WPGraphQL. Isso adicionará um IDE GraphiQL à sua barra de administração, que você poderá usar para escrever consultas GraphQL no WordPress.
Você também precisará corrigir seus permalinks. O WordPress vem com permalinks simples por padrão, que não funcionam com a API JSON da qual o REST utiliza ou com o próprio SvelteKit devido a restrições dentro do Next.js.
Vá até Settings > Permalinks e desative os permalinks do tipo Plain. Experimente os permalinks Post name.
Para verificar se funcionou, acrescente “/wp-json” ao URL do seu site local. Você deverá ver a saída do conteúdo do seu site como dados JSON.
Posteriormente, você precisará usar um plugin de redirecionamento do site completo, como o Redirection ou o All In One SEO Pro, para apontar a URL para o aplicativo frontend que você criou. Instale e configure um plugin de redirecionamento quando você estiver pronto para redirecionar os usuários para o seu aplicativo SvelteKit.
Com isso, você está pronto para instalar o SvelteKit.
Etapa 3. Configure o ambiente do SvelteKit
Antes de mais nada, o SvelteKit tem alguns requisitos básicos de sistema, incluindo o Node 18.13 ou superior. Como o framework é muito leve, ele funcionará em praticamente qualquer sistema. No entanto, certifique-se de ter o npm instalado junto com o Node, caso contrário, ele não funcionará!
Agora você pode instalar o SvelteKit em seu sistema. A documentação fornece um passo a passo completo, mas aqui estão os princípios básicos.
Primeiro, vamos instalar o Svelte com o pacote create-svelte. Você pode dar o nome que quiser ao seu projeto (“my-svelte-app”). Com esse comando, você criará um aplicativo Svelte com todas as configurações básicas prontas para uso.
npm create svelte my-svelte-appVocê receberá várias solicitações; responda sim ou não para criar seu ambiente SvelteKit.
Há alguns pacotes npm que você precisará instalar, portanto, acesse a raiz do seu projeto com este comando (substitua “my-svelte-app” pelo nome que você deu a ele).
cd my-svelte-app/Em seguida, execute este comando para instalar os pacotes necessários:
npm installE, por fim, execute o servidor de desenvolvimento com este comando:
npm run devQuando o servidor for iniciado, você poderá verificar o aplicativo em andamento neste URL: http://localhost:3000
Agora, em vez de usar o renderizador de página padrão, você pode querer mudar para o renderizador estático para gerar um site estático do SvelteKit.
Com isso, o SvelteKit deve ter sido configurado com êxito e você pode começar a criar seu site headless.
Etapa 4. Use o GraphQL para conectar o SvelteKit e o WordPress
À medida que você experimentar o GraphQL e o ambiente do SvelteKit, lembre-se destas dicas.
- Leia a introdução ao Svelte/SvelteKit para que você entenda completamente como esse framework funciona. Este tutorial é interativo; você mesmo pode experimentar o código!
- Talvez você queira instalar o pacote GraphQL do SvelteKit se tiver problemas para configurar manualmente a API GraphQL.
- Como parte do WPGraphQL, você também pode usar blocos do Gutenberg por meio do wp-graphql-gutenberg, que vem com o plugin padrão.
- Embora você possa usar a API REST com o SvelteKit até certo ponto, a funcionalidade expandida do GraphQL funciona melhor com esse framework. Se você preferir usar a API REST, confira esta demonstração do SvelteKit WordPress headless no GitHub, que usa a API REST para conectar as duas plataformas.
Você também deve ler sobre carregamento de dados e roteamento para integrar o SvelteKit e o WordPress. Há muitas maneiras de você se conectar ao WordPress e criar um aplicativo headless.
Etapa 5. Implante o WordPress e o SvelteKit na Kinsta
Depois de configurar um ambiente headless e estar pronto para implantar, você precisará seguir duas etapas distintas: Implantar o WordPress e enviar o frontend para um site estático.
A parte do WordPress é muito fácil. No DevKinsta, na página de Informações do site, você deve ver um botão Mover para o ambiente de teste. Você precisará fazer login com suas credenciais da Kinsta, mas depois disso, tudo estará pronto.
Quanto ao seu aplicativo SvelteKit, isso também é muito fácil. A Kinsta oferece hospedagem gratuita de site estático, que funciona muito bem com a maioria dos aplicativos criados no SvelteKit. Veja como você pode fazer isso.
- Envie seu aplicativo SvelteKit para o Bitbucket, GitHub ou GitLab.
- Crie uma conta Kinsta e faça login no painel MyKinsta.
- Faça login na conta Git de sua escolha e autorize a Kinsta.
- No MyKinsta, clique em Sites estáticos e, em seguida, em Adicionar site.
- Selecione o repositório do seu aplicativo e adicione as configurações de build adequadas.
- Clique em Criar site.
Se você criou um aplicativo complexo em que um site estático não é suficiente, talvez queira implantar com a hospedagem de aplicativos da Kinsta.
De qualquer forma, seu site headless já está implantado! Você está pronto para exibir seu novo aplicativo WordPress headless.
Resumo
Atualmente, o WordPress headless é um grande negócio, mas sua configuração nem sempre é fácil. O SvelteKit foi criado especificamente para tornar o desenvolvimento web mais limpo e fácil, e o framework é perfeito para uma configuração do WordPress headless.
Agora que você aprendeu a criar uma instância local do WordPress, trabalhar com o SvelteKit e implantar na Kinsta, está pronto para levar o WordPress headless ao próximo nível.
Não importa se você está criando um site estático ou um aplicativo dinâmico web, o SvelteKit é adequado exclusivamente para a tarefa. A hospedagem gratuita de aplicativos ou sites estáticos da Kinsta é a melhor opção para você, graças à sua infraestrutura ultrarrápida baseada no Google Cloud e no Cloudflare.
Você já trabalhou com o SvelteKit? Você acha que o framework está à altura das expectativas? Compartilhe suas ideias nos comentários!
Deixe um comentário