Os aplicativos de página única (SPA) tornaram-se a maneira moderna de criar aplicativos da Web, e o Inertia.js é a principal ferramenta que permite aos desenvolvedores criar SPAs com renderização do lado do cliente e do lado do servidor.
Neste artigo, veremos como o Inertia facilita a criação do SPA e resolve muitos outros problemas para os desenvolvedores. Também abordaremos os principais funcionalidades da ferramenta.
Mas antes de começarmos, primeiro vamos nos certificar de que entendemos como os aplicativos do lado do servidor e do lado do cliente funcionam.
O que é renderização do lado do servidor?
Renderização do lado do servidor (SSR) é quando um aplicativo pode renderizar ou exibir o conteúdo da página de internet no servidor em vez do navegador. Quando um usuário tenta visitar o site exemplo.com, o navegador faz um pedido ao servidor solicitando todas as informações necessárias para exibir esta página de internet específica, e o servidor responde instantaneamente fornecendo ao navegador uma página totalmente renderizada.
Os mecanismos de pesquisa intervêm e indexam as informações fornecidas pelo servidor antes que elas cheguem ao navegador; conhecido como Search Engine Optimization (SEO). O navegador então resolve o conteúdo JavaScript, e a página de internet é exibida para o usuário.
O problema com a abordagem SSR é que leva muito tempo para carregar uma página totalmente renderizada do servidor, o que não oferece uma experiência agradável para o usuário. Esta é a razão pela qual os desenvolvedores consideram SPAs e renderização do lado do cliente.
O que é renderização do lado do cliente?
A renderização do lado do cliente permite que o navegador tenha tudo o que precisa para renderizar a página de internet do lado do cliente ao invés de receber uma página totalmente renderizada do servidor. Quando a página é carregada, o navegador não envia nenhuma outra solicitação ao servidor, tornando a experiência de navegação extremamente rápida.
A renderização do lado do cliente ajudou na criação de SPAs, revolucionando a internet. Você pode criar sites que não exijam recarregamento de página, independentemente do número de links. Isso facilita para os usuários navegar em seu site.
Embora os SPAs sejam fantásticos, esta abordagem tem muita complexidade e questões que iremos cobrir hoje. Inertia aborda a maioria dessas questões utilizando efetivamente frameworks do lado do servidor. Ela combina as melhores funcionalidades tanto dos aplicativos do lado do servidor quanto dos aplicativos do lado do cliente.
O que é Inertia.js?
Inertia não é um framework JavaScript. Ao invés disso, é uma estratégia ou técnica para desenvolver SPAs. Ele permite o desenvolvedor utilizar as frameworks atuais do lado do servidor para construir um SPA moderno sem a complexidade que vem com ele.
Inertia foi projetada para acompanhar, não para substituir, as frameworks que você já usa. Considere um aliado útil que o auxilia a completar tarefas de forma mais rápida e eficiente. Atualmente ele suporta três frameworks frontend (Vue, React e Svelte) para renderização do lado do cliente e dois frameworks backend (Laravel e Rails) para renderização do lado do servidor.
Para a maioria dos desenvolvedores de Laravel, Inertia é uma das técnicas mais confiáveis para a construção de SPAs, uma vez que permite que eles conectem ambas as frameworks frontend e backend.
Como Inertia.js funciona?
Inertia é similar ao Vue Router, pois ele permite que você se mova entre as páginas sem ter que recarregar a página inteira. Entretanto, Inertia funciona em sincronia com o seu framework do lado do servidor. Isto é possível com Link, um wrapper para a etiqueta padrão da âncora. Quando um Link é clicado, Inertia intercepta o evento do clique e envia uma solicitação XHR para o servidor, fazendo com que o servidor reconheça que esta é uma solicitação Inertia e retorne uma resposta JSON. Essa resposta inclui o nome e os dados do componente JavaScript, após o que Inertia remove magicamente os componentes desnecessários e os substitui pelos necessários para visitar a nova página e atualizar o estado do histórico.
Uma visão detalhada sobre a funcionalidade do Inertia.js
Quando um visitante visita inicialmente o site exemplo.com, o navegador executa uma solicitação padrão de página inteira, e o servidor retorna uma resposta HTML completa como se o Inertia não existisse. Esta resposta HTML tem todos os recursos do site (CSS, JavaScript), mas também contém um recurso extra para Inertia, o qual é a raiz div com o atributo data-page contendo dados JSON para a página inicial. Inertia então usa esses dados JSON para dar o pontapé inicial da framework do frontend e exibir a página inicial.
Assim que o aplicativo for inicializado, cada rota que o usuário visitar dentro do mesmo domínio usando Link será uma solicitação XHR com o cabeçalho X-Inertia. Isso diz ao servidor que esta é uma solicitação do Inertia.
O feedback virá como uma resposta JSON com o conteúdo da página, ao invés de uma resposta HTML completa, como na visita inicial.
Que problemas Inertia.js resolve?
Inertia resolve um grande número de problemas para desenvolvedores web. O objetivo de criar o Inertia era dar soluções rápidas e efetivas para toda a complexidade que vem com o projeto de um SPA.
Complexidades do SPA
Se os desenvolvedores construíssem um SPA sem Inertia, eles precisariam criar APIs REST ou GraphQL e protegê-las com algum tipo de método de autenticação, o que exigiria a criação de um sistema frontend de gerenciamento de estado, entre muitas outras coisas.
Inertia foi projetado para ajudar os desenvolvedores a transformar seus aplicativos do lado do servidor rodando completamente no servidor backend para um aplicativo JavaScript de uma única página sem ter que passar por todas as complexidades que vêm com a construção de SPAs.
Criar um SPA usando Inertia é similar ao criar um aplicativo renderizado no lado do servidor. Você cria controladores, faz consultas ao banco de dados para os dados requeridos e então retorna os resultados para as visualizações.
A chave é que as visualizações são componentes JavaScript. Isso significa que você recebe os dados do servidor, então Inertia trabalha com o framework frontend para mostrar a página contendo os dados como um arquivo JavaScript, eliminando a necessidade de criar APIs.
Autenticação
Como o Inertia alimenta o aplicativo com dados e respostas do backend, ele simplesmente usará qualquer sistema de autenticação que você tenha no lado do servidor. Isso significa que você não terá que se preocupar com a autenticação do lado do cliente — você terá um sistema de autenticação baseado em sessão que se sincroniza com o seu sistema de autenticação do lado do servidor.
Preocupações com SEO
Como explicado anteriormente para renderização do lado do servidor, os mecanismos de pesquisa interceptam a resposta do servidor ao navegador para indexar o conteúdo HTML da página de internet. No caso de um SPA, os mecanismos de pesquisa terão dificuldade em identificar o conteúdo da página, já que o servidor responderá com os componentes JavaScript e dados JSON.
Mas Inertia resolveu esta preocupação introduzindo o recurso de renderização do lado do servidor (SSR) que você pode adicionar ao seu aplicativo. Inertia usa o ambiente Node.js como um gatilho para converter a resposta de dados JSON para HTML.
Para melhor ilustrar isso, imagine Inertia sentada entre o servidor e o navegador, observando. Quando o servidor recebe um pedido de Inertia e retorna uma resposta JSON, Inertia detecta a existência de um servidor Node.js, transforma a resposta JSON em HTML e a retorna, permitindo que os mecanismos de pesquisa indexem a página como se o aplicativo não fosse um SPA.
Inertia também fornece um componente Head, que permite que você adicione um título e meta dados à sua página:
<script setup>
import { Head } from '@inertiajs/inertia-vue3'
</script>
<template>
<Head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
</Head>
</template>
Aqui está outro exemplo da documentação on-line do Inertia:
// Layout.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>My app</title>
<meta head-key="description" name="description" content="This is the default description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
// About.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Formulários e Form Helper
É possível enviar uma solicitação de formulário padrão enquanto se utiliza o Inertia. No entanto, fazer isso resultará em uma atualização de página inteira.
Inertia permite que os usuários façam pedidos de formulários usando Inertia, eliminando a possibilidade de atualização da página. Uma vez que o formulário é submetido com Inertia, ele é manipulado no lado do servidor, liberando você para redirecionar o usuário de volta para a mesma página (ou para uma página completamente diferente).
Inertia facilita nossas vidas ao criar e enviar formulários. Aqui está um exemplo de como você pode usá-lo com o Vue.js 3 composition API:
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
</script>
<template>
<form @submit.prevent="form.post('kinsta/login')">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
Você pode enviar o formulário com GET, POST, PUT, PATCH e DELETE.
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
const submit = () => {
form.post("kinsta/login");
};
</script>
<template>
<form @submit.prevent="submit()">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
O Form Helper do Inertia também está oferecendo algumas propriedades úteis como processing propriedade que se transforma em true uma vez que o formulário começa a ser processado. Isso pode ser usado para desativar botões de envio enquanto o formulário está sendo processado, a fim de evitar envios múltiplos:
<button type="submit" :disabled="form.processing">Submit</button>
Você também pode usar preserveState, preserveScroll e chamadas de retorno de eventos com o formulário, que serão úteis ao adicionar opções adicionais ao formulário:
form.post('kinsta/login, {
preserveScroll: true,
onSuccess: () => form.reset('password'),
})
Lembrando o estado com Inertia.js
Digamos que um usuário está preenchendo um formulário em seu site e decide navegar para outra página antes de enviá-lo. Quando eles retornarem para a página do formulário, a entrada do formulário do usuário será redefinida.
Felizmente, Inertia fornece o recurso useRemember, que permite salvar as entradas do formulário do usuário para o estado histórico e restaurá-lo na navegação do histórico.
Você pode usar este recurso importando do Inertia e aplicando em seu formulário:
import { useRemember } from '@inertiajs/inertia-vue3'
export default {
setup() {
const form = useRemember({
first_name: null,
last_name: null,
})
return { form }
},
}
Se você tem uma página com muitos formulários que usam o recurso useRemember, cada componente deve ter uma chave única para que Inertia saiba quais dados restaurar para cada componente:
const form = useRemember({
first_name: null,
last_name: null,
}, 'Users/Create')
Não precisamos usar o recurso useRemember enquanto utilizamos o Form Helper do Inertia. O Inertia se lembrará do estado da entrada do formulário automaticamente, então só precisamos dar um identificador único:
import { useForm } from '@inertiajs/inertia-vue3'
const form = useForm('CreateUser', data)
O melhor desse recurso é que você pode lembrar manualmente todos os dados em seu aplicativo. Isso também é útil para passar dados de componentes aninhados para o componente principal.
import { Inertia } from '@inertiajs/inertia'
// DeeplyNestedComponent.vue
Inertia.remember(data, 'my-key')
// MainComponent.vue
let data = Inertia.restore('my-key')
Upload de arquivos
Inertia detecta se o formulário inclui arquivos e, em caso afirmativo, transforma os dados do pedido para o objeto formData, o que é sempre necessário. Então, se você tiver um formulário que inclua um nome e um avatar, Inertia tratará o formulário como multipart/form-data.
Validação e erros
Quando um usuário submete um formulário com valores incorretos e ele é enviado para o servidor para validação, você retorna o usuário para a página do formulário com um aviso de erros de validação na sessão. O Inertia captura os erros da sessão e os salva como adereços da página.
Como os adereços são reativos, eles aparecem quando a submissão do formulário é completada. Para que Inertia detecte a existência de erros, ela mantém um olho em page.props.errors.
Uma vez encontrados erros, ele então fornece um retorno de chamada onError() ao invés de onSuccess().
Aqui está um exemplo com Vue 3 para ajudar você a entender o conceito:
const submit = () => {
form.post("kinsta/login", {
onError: () => {
return "Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me"
},
onSuccess: () => {
return "Wohoo!!"
}
}
);
};
Exibir erros é tão fácil quanto defini-los como adereços e exibi-los condicionalmente em seu HTML:
<script setup>
defineProps({
errors: Object,
});
//
</script>
<template>
<form @submit.prevent="submit()">
//
<div v-if="errors.email">{{ errors.email }}</div>
</form>
</template>
Ao usar o Inertia, você não precisa se preocupar com dados de entrada antigos no caso de algum erro. Uma vez que o Inertia detecta que o usuário foi redirecionado para a página com erros, ele preserva automaticamente o antigo estado do componente para POST, PUT, PATCH e DELETE.
Reload parciais com Inertia.js
A funcionalidade de recarga reload do Inertia é simplesmente excelente, uma vez que ele apenas recarrega um componente selecionado na página ao invés de ir buscar todo o conjunto de dados do servidor novamente. Isso leva a otimização do seu aplicativo para o próximo nível. Você também pode visitar o seguinte link para Saiba mais sobre como otimizar o desempenho do seu aplicativo Laravel.
Reload parciais podem ser realizadas usando a propriedade only do Inertia:
import { Inertia } from '@inertiajs/inertia'
Inertia.visit(url, {
only: ['users'],
})
Redirecionamentos externos com Inertia.js
O redirecionamento subdomínio, ou redirecionamento externo, é um dos desafios mais frustrantes com SPAs. É irracional esperar que seu aplicativo permaneça uma única página enquanto também visita um domínio diferente.
Pode ser necessário redirecionar um pedido do Inertia para um site externo ou mesmo para outro endpoint não Inertia em seu aplicativo. Isso é possível através de uma visita ao site window.location iniciada do lado do servidor:
return Inertia::location($url);
Se você abrir o console durante o teste, você verá que ele retorna 409 conflict. Esta resposta contém a URL do cabeçalho X-Inertia-Location, que Inertia detectará no lado do cliente e automaticamente realizará a visita.
Como trabalhar com o Inertia.js
Trabalhar com Inertia é semelhante a trabalhar em um aplicativo do lado do servidor, exceto pelo fato de ser um aplicativo de página única totalmente responsivo. Você deve conseguir definir sua rota, personalizar seu controlador e retornar uma visualização ao Inertia para enviar à sua framework de interface do usuário.
Rotas do Laravel e Inertia.js
As rotas do Laravel não são algo que você deseja abrir mão ao desenvolver seu aplicativo. Isso permite que você crie rapidamente as rotas mais complexas. Há também muitos recursos gratuitos e pagos do Laravel para ajudá-lo a aprender mais sobre o Laravel e como o roteamento funciona.
A vantagem disso é que você não precisa de um roteador Vue ou um roteador React para fazer o roteamento básico do lado do cliente. Isso ocorre porque o Inertia possui seu próprio sistema de roteamento que funciona com o roteamento do Laravel. Se o seu trabalho não precisar de dados de backend, você poderá usar o auxiliar do roteador para rotear diretamente para o seu componente.
Route::inertia('/home', 'HomeComponent');
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all();
'create_url' => URL::route('users.create'),
]);
}
Antes de continuarmos, gostaríamos de apresentar o DevKinsta, uma poderosa ferramenta para desenvolvedores, designers e agências que permite que eles construam aplicativos web WordPress de uma e várias páginas. Felizmente, o WordPress pode ser integrado com o Laravel usando o pacote Corcel. Se você construir um aplicativo Laravel com integração WordPress, confira a Ferramenta Kinsta APM para um extraordinário monitoramento de desempenho.
Redirecionamentos
Você deve sempre redirecionar o usuário para a rota correto que corresponda ao pedido inicial. Por exemplo, se um usuário está enviando para store endpoint para enviar um artigo, certifique-se de redirecionar o cliente para GET endpoint talvez para a rota do artigo.
public function store()
{
Post::create(
Request::validate([
'title' => ['required'],
'body' => ['required'],
])
);
// redirect the user to the posts show page
return Redirect::route('posts.show');
}
Desvantagens do uso do Inertia.js
Até agora, concentramos nas várias vantagens de usar o Inertia. No entanto, como em qualquer ferramenta, Inertia também tem desvantagens.
- O usuário deve ter conhecimentos básicos de Vue ou React.
- Como os dados do modelo podem ser passados completamente para o lado do cliente, o usuário deve ter certeza de retornar explicitamente os dados relevantes para o frontend.
- APIs devem ser recriadas para que o aplicativo web possa ter um aplicativo Android ou iOS a qualquer momento.
Você deve usar Inertia.js?
Para responder à pergunta se você deve ou não usar o Inertia, a resposta é sim, se estiver criando um aplicativo de página única moderno, do lado do servidor e orientado a SEO, a resposta é sim.
Para obter mais informações, visite o site oficial do Inertia.js e leia a documentação.
Resumo
Aplicativos do lado do cliente e SPAs estão se tornando cada vez mais populares à medida que as tecnologias web evoluem. Enquanto isso, os aplicativos tradicionais do lado do servidor começaram a desmoronar. Mais do que nunca, é importante ter as ferramentas certas à mão.
Inertia é uma abordagem moderna ou solução para desenvolvedores do lado do servidor para construir aplicativos de uma página. Ela resolve tantos problemas e economiza muito tempo.
Como discutimos em nosso artigo, Inertia agora suporta renderização do lado do servidor, o que o leva para um nível totalmente novo, permitindo que os desenvolvedores criem SPAs guiados por SEO.
Inertia também está recebendo muito amor da comunidade. O esforço de desenvolvimento é patrocinado por Laravel Forge, Laracasts e uma série de outras boas organizações. Como resultado, Inertia é uma ferramenta confiável que será melhorada e mantida no futuro para os desenvolvedores Laravel, especialmente porque a demanda por desenvolvedores de Laravel continua a crescer.
E se você está procurando pela próxima casa do seu projeto Intertia-powered, confira as ofertas da Hospedagem de Aplicativos da Kinsta.
