{"id":54758,"date":"2022-11-07T08:02:48","date_gmt":"2022-11-07T11:02:48","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=54758&post_type=knowledgebase&preview_id=54758"},"modified":"2025-10-01T17:03:03","modified_gmt":"2025-10-01T20:03:03","slug":"inertia-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/inertia-js\/","title":{"rendered":"O Guia Definitivo para Inertia.js"},"content":{"rendered":"

Os aplicativos de p\u00e1gina \u00fanica (SPA) tornaram-se a maneira moderna de criar aplicativos da Web, e o Inertia.js \u00e9 a principal ferramenta que permite aos desenvolvedores criar SPAs com renderiza\u00e7\u00e3o do lado do cliente e do lado do servidor.<\/p>\n

Neste artigo, veremos como o Inertia facilita a cria\u00e7\u00e3o do SPA e resolve muitos outros problemas para os desenvolvedores. Tamb\u00e9m abordaremos os principais funcionalidades da ferramenta.<\/p>\n

Mas antes de come\u00e7armos, primeiro vamos nos certificar de que entendemos como os aplicativos do lado do servidor e do lado do cliente funcionam.<\/p>\n

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

O que \u00e9 renderiza\u00e7\u00e3o do lado do servidor?<\/h2>\n

Renderiza\u00e7\u00e3o do lado do servidor (SSR) \u00e9 quando um aplicativo pode renderizar ou exibir o conte\u00fado da p\u00e1gina de internet no servidor em vez do navegador. Quando um usu\u00e1rio tenta visitar o site exemplo.com<\/strong>, o navegador faz um pedido ao servidor solicitando todas as informa\u00e7\u00f5es necess\u00e1rias para exibir esta p\u00e1gina de internet espec\u00edfica, e o servidor responde instantaneamente fornecendo ao navegador uma p\u00e1gina totalmente renderizada.<\/p>\n

Os mecanismos de pesquisa interv\u00eam e indexam as informa\u00e7\u00f5es fornecidas pelo servidor antes que elas cheguem ao navegador; conhecido como Search Engine Optimization (SEO). O navegador ent\u00e3o resolve o conte\u00fado JavaScript, e a p\u00e1gina de internet \u00e9 exibida para o usu\u00e1rio.<\/p>\n

\"Exibindo
Exibindo conte\u00fado renderizado no lado do servidor.<\/figcaption><\/figure>\n

O problema com a abordagem SSR \u00e9 que leva muito tempo para carregar uma p\u00e1gina totalmente renderizada do servidor, o que n\u00e3o oferece uma experi\u00eancia agrad\u00e1vel para o usu\u00e1rio. Esta \u00e9 a raz\u00e3o pela qual os desenvolvedores consideram SPAs e renderiza\u00e7\u00e3o do lado do cliente.<\/p>\n\n

O que \u00e9 renderiza\u00e7\u00e3o do lado do cliente?<\/h2>\n

A renderiza\u00e7\u00e3o do lado do cliente permite que o navegador tenha tudo o que precisa para renderizar a p\u00e1gina de internet do lado do cliente ao inv\u00e9s de receber uma p\u00e1gina totalmente renderizada do servidor. Quando a p\u00e1gina \u00e9 carregada, o navegador n\u00e3o envia nenhuma outra solicita\u00e7\u00e3o ao servidor, tornando a experi\u00eancia de navega\u00e7\u00e3o extremamente r\u00e1pida.<\/p>\n

\"Exibindo
Exibindo conte\u00fado renderizado do lado do cliente.<\/figcaption><\/figure>\n

A renderiza\u00e7\u00e3o do lado do cliente ajudou na cria\u00e7\u00e3o de SPAs, revolucionando a internet. Voc\u00ea pode criar sites que n\u00e3o exijam recarregamento de p\u00e1gina, independentemente do n\u00famero de links. Isso facilita para os usu\u00e1rios navegar em seu site.<\/p>\n

Embora os SPAs sejam fant\u00e1sticos, esta abordagem tem muita complexidade e quest\u00f5es que iremos cobrir hoje. Inertia aborda a maioria dessas quest\u00f5es 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.<\/p>\n

O que \u00e9 Inertia.js?<\/h2>\n

Inertia n\u00e3o \u00e9 um framework JavaScript<\/a>. Ao inv\u00e9s disso, \u00e9 uma estrat\u00e9gia ou t\u00e9cnica 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.<\/p>\n

Inertia foi projetada para acompanhar, n\u00e3o para substituir, as frameworks que voc\u00ea j\u00e1 usa. Considere um aliado \u00fatil que o auxilia a completar tarefas de forma mais r\u00e1pida e eficiente. Atualmente ele suporta tr\u00eas frameworks frontend (Vue, React e Svelte) para renderiza\u00e7\u00e3o do lado do cliente e dois frameworks backend (Laravel e Rails) para renderiza\u00e7\u00e3o do lado do servidor.<\/p>\n

Para a maioria dos desenvolvedores de Laravel<\/a>, Inertia \u00e9 uma das t\u00e9cnicas mais confi\u00e1veis para a constru\u00e7\u00e3o de SPAs, uma vez que permite que eles conectem ambas as frameworks frontend e backend.<\/p>\n

Como Inertia.js funciona?<\/h2>\n

Inertia \u00e9 similar ao Vue Router, pois ele permite que voc\u00ea se mova entre as p\u00e1ginas sem ter que recarregar a p\u00e1gina inteira. Entretanto, Inertia funciona em sincronia com o seu framework do lado do servidor. Isto \u00e9 poss\u00edvel com Link<\/code>, um wrapper para a etiqueta padr\u00e3o da \u00e2ncora. Quando um Link<\/code> \u00e9 clicado, Inertia intercepta o evento do clique e envia uma solicita\u00e7\u00e3o XHR para o servidor, fazendo com que o servidor reconhe\u00e7a que esta \u00e9 uma solicita\u00e7\u00e3o Inertia e retorne uma resposta JSON. Essa resposta inclui o nome e os dados do componente JavaScript, ap\u00f3s o que Inertia remove magicamente os componentes desnecess\u00e1rios e os substitui pelos necess\u00e1rios para visitar a nova p\u00e1gina e atualizar o estado do hist\u00f3rico.<\/p>\n

Uma vis\u00e3o detalhada sobre a funcionalidade do Inertia.js<\/h3>\n

Quando um visitante visita inicialmente o site exemplo.com<\/strong>, o navegador executa uma solicita\u00e7\u00e3o padr\u00e3o de p\u00e1gina inteira, e o servidor retorna uma resposta HTML completa como se o Inertia n\u00e3o existisse. Esta resposta HTML tem todos os recursos do site (CSS, JavaScript), mas tamb\u00e9m cont\u00e9m um recurso extra para Inertia, o qual \u00e9 a raiz div<\/code> com o atributo data-page<\/code> contendo dados JSON para a p\u00e1gina inicial. Inertia ent\u00e3o usa esses dados JSON para dar o pontap\u00e9 inicial da framework do frontend e exibir a p\u00e1gina inicial.<\/p>\n

\"Inertia.js:
Inertia.js: Resposta da p\u00e1gina inicial de visita.<\/figcaption><\/figure>\n

Assim que o aplicativo for inicializado, cada rota que o usu\u00e1rio visitar dentro do mesmo dom\u00ednio usando Link<\/code> ser\u00e1 uma solicita\u00e7\u00e3o XHR com o cabe\u00e7alho X-Inertia<\/code>. Isso diz ao servidor que esta \u00e9 uma solicita\u00e7\u00e3o do Inertia.<\/p>\n

O feedback vir\u00e1 como uma resposta JSON com o conte\u00fado da p\u00e1gina, ao inv\u00e9s de uma resposta HTML completa, como na visita inicial.<\/p>\n

\"Inertia.js:
Inertia.js: Resposta de visita de rota subsequente.<\/figcaption><\/figure>\n

Que problemas Inertia.js resolve?<\/h2>\n

Inertia resolve um grande n\u00famero de problemas para desenvolvedores web. O objetivo de criar o\u00a0 Inertia era dar solu\u00e7\u00f5es r\u00e1pidas e efetivas para toda a complexidade que vem com o projeto de um SPA.<\/p>\n

Complexidades do SPA<\/h3>\n

Se os desenvolvedores constru\u00edssem um SPA sem Inertia, eles precisariam criar APIs REST ou GraphQL e proteg\u00ea-las com algum tipo de m\u00e9todo de autentica\u00e7\u00e3o, o que exigiria a cria\u00e7\u00e3o de um sistema frontend de gerenciamento de estado, entre muitas outras coisas.<\/p>\n

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 \u00fanica p\u00e1gina sem ter que passar por todas as complexidades que v\u00eam com a constru\u00e7\u00e3o de SPAs.<\/p>\n

Criar um SPA usando Inertia \u00e9 similar ao criar um aplicativo renderizado no lado do servidor. Voc\u00ea cria controladores, faz consultas ao banco de dados para os dados requeridos e ent\u00e3o retorna os resultados para as visualiza\u00e7\u00f5es.<\/p>\n

A chave \u00e9 que as visualiza\u00e7\u00f5es s\u00e3o componentes JavaScript. Isso significa que voc\u00ea recebe os dados do servidor, ent\u00e3o Inertia trabalha com o framework frontend para mostrar a p\u00e1gina contendo os dados como um arquivo JavaScript, eliminando a necessidade de criar APIs.<\/p>\n

Autentica\u00e7\u00e3o<\/h3>\n

Como o Inertia alimenta o aplicativo com dados e respostas do backend, ele simplesmente usar\u00e1 qualquer sistema de autentica\u00e7\u00e3o que voc\u00ea tenha no lado do servidor. Isso significa que voc\u00ea n\u00e3o ter\u00e1 que se preocupar com a autentica\u00e7\u00e3o do lado do cliente \u2014 voc\u00ea ter\u00e1 um sistema de autentica\u00e7\u00e3o baseado em sess\u00e3o que se sincroniza com o seu sistema de autentica\u00e7\u00e3o do lado do servidor.<\/p>\n

Preocupa\u00e7\u00f5es com SEO<\/h3>\n

Como explicado anteriormente para renderiza\u00e7\u00e3o do lado do servidor, os mecanismos de pesquisa interceptam a resposta do servidor ao navegador para indexar o conte\u00fado HTML da p\u00e1gina de internet. No caso de um SPA, os mecanismos de pesquisa ter\u00e3o dificuldade em identificar o conte\u00fado da p\u00e1gina, j\u00e1 que o servidor responder\u00e1 com os componentes JavaScript e dados JSON.<\/p>\n

Mas Inertia resolveu esta preocupa\u00e7\u00e3o introduzindo o recurso de renderiza\u00e7\u00e3o do lado do servidor (SSR)<\/a> que voc\u00ea pode adicionar ao seu aplicativo. Inertia usa o ambiente Node.js como um gatilho para converter a resposta de dados JSON para HTML.<\/p>\n

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\u00eancia de um servidor Node.js, transforma a resposta JSON em HTML e a retorna, permitindo que os mecanismos de pesquisa indexem a p\u00e1gina como se o aplicativo n\u00e3o fosse um SPA.<\/p>\n

Inertia tamb\u00e9m fornece um componente Head<\/code>, que permite que voc\u00ea adicione um t\u00edtulo e meta dados \u00e0 sua p\u00e1gina:<\/p>\n

\n<script setup>\nimport { Head } from '@inertiajs\/inertia-vue3'\n<\/script>\n\n<template>\n  <Head>\n    <title>Page Title<\/title>\n    <meta name=\"description\" content=\"Page Description\" \/>\n  <\/Head>\n<\/template>\n<\/code><\/pre>\n
Aqui est\u00e1 outro exemplo da documenta\u00e7\u00e3o on-line do Inertia<\/a>:<\/p>\n
\n\/\/ Layout.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is the default description\" \/>\n  <link rel=\"icon\" type=\"image\/svg+xml\" href=\"\/favicon.svg\" \/>\n<\/Head>\n\n\/\/ About.vue\n\nimport { Head } from '@inertiajs\/inertia-vue3'\n\n<Head>\n  <title>About - My app<\/title>\n  <meta head-key=\"description\" name=\"description\" content=\"This is a page specific description\" \/>\n<\/Head>\n<\/code><\/pre>\n
Formul\u00e1rios e Form Helper<\/h3>\n
\u00c9 poss\u00edvel enviar uma solicita\u00e7\u00e3o de formul\u00e1rio padr\u00e3o enquanto se utiliza o Inertia. No entanto, fazer isso resultar\u00e1 em uma atualiza\u00e7\u00e3o de p\u00e1gina inteira.<\/p>\n
Inertia permite que os usu\u00e1rios fa\u00e7am pedidos de formul\u00e1rios usando Inertia, eliminando a possibilidade de atualiza\u00e7\u00e3o da p\u00e1gina. Uma vez que o formul\u00e1rio \u00e9 submetido com Inertia, ele \u00e9 manipulado no lado do servidor, liberando voc\u00ea para redirecionar o usu\u00e1rio de volta para a mesma p\u00e1gina (ou para uma p\u00e1gina completamente diferente).<\/p>\n
Inertia facilita nossas vidas ao criar e enviar formul\u00e1rios. Aqui est\u00e1 um exemplo de como voc\u00ea pode us\u00e1-lo com o Vue.js 3 composition API:<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n<\/script>\n\n<template>\n  <form @submit.prevent=\"form.post('kinsta\/login')\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Voc\u00ea pode enviar o formul\u00e1rio com GET<\/code>, POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code>.<\/p>\n
\n<script setup>\n  import { useForm } from \"@inertiajs\/inertia-vue3\";\n\n  const form = useForm({\n    email: null,\n    password: null,\n  });\n\n  const submit = () => {\n    form.post(\"kinsta\/login\");\n  };\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \n    <input type=\"text\" v-model=\"form.email\" \/>\n    \n    <input type=\"password\" v-model=\"form.password\" \/>\n    \n    <button type=\"submit\">Login<\/button>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
O Form Helper do Inertia tamb\u00e9m est\u00e1 oferecendo algumas propriedades \u00fateis como processing<\/code> propriedade que se transforma em true<\/code> uma vez que o formul\u00e1rio come\u00e7a a ser processado. Isso pode ser usado para desativar bot\u00f5es de envio enquanto o formul\u00e1rio est\u00e1 sendo processado, a fim de evitar envios m\u00faltiplos:<\/p>\n
\n<button type=\"submit\" :disabled=\"form.processing\">Submit<\/button>\n<\/code><\/pre>\n
Voc\u00ea tamb\u00e9m pode usar preserveState<\/code>, preserveScroll<\/code> e chamadas de retorno de eventos com o formul\u00e1rio, que ser\u00e3o \u00fateis ao adicionar op\u00e7\u00f5es adicionais ao formul\u00e1rio:<\/p>\n
\nform.post('kinsta\/login, {\n  preserveScroll: true,\n  onSuccess: () => form.reset('password'),\n})\n<\/code><\/pre>\n
Lembrando o estado com Inertia.js<\/h3>\n
Digamos que um usu\u00e1rio est\u00e1 preenchendo um formul\u00e1rio em seu site e decide navegar para outra p\u00e1gina antes de envi\u00e1-lo. Quando eles retornarem para a p\u00e1gina do formul\u00e1rio, a entrada do formul\u00e1rio do usu\u00e1rio ser\u00e1 redefinida.<\/p>\n
Felizmente, Inertia fornece o recurso useRemember<\/code>, que permite salvar as entradas do formul\u00e1rio do usu\u00e1rio para o estado hist\u00f3rico e restaur\u00e1-lo na navega\u00e7\u00e3o do hist\u00f3rico.<\/p>\n
Voc\u00ea pode usar este recurso importando do Inertia e aplicando em seu formul\u00e1rio:<\/p>\n
\nimport { useRemember } from '@inertiajs\/inertia-vue3'\n\nexport default {\n  setup() {\n    const form = useRemember({\n        first_name: null,\n        last_name: null,\n    })\n\n    return { form }\n  },\n}\n<\/code><\/pre>\n
Se voc\u00ea tem uma p\u00e1gina com muitos formul\u00e1rios que usam o recurso useRemember<\/code>, cada componente deve ter uma chave \u00fanica para que Inertia saiba quais dados restaurar para cada componente:<\/p>\n
\nconst form = useRemember({\n        first_name: null,\n        last_name: null,\n    }, 'Users\/Create')\n<\/code><\/pre>\n
N\u00e3o precisamos usar o recurso useRemember<\/code> enquanto utilizamos o Form Helper do Inertia. O Inertia se lembrar\u00e1 do estado da entrada do formul\u00e1rio automaticamente, ent\u00e3o s\u00f3 precisamos dar um identificador \u00fanico:<\/p>\n
\nimport { useForm } from '@inertiajs\/inertia-vue3'\n\nconst form = useForm('CreateUser', data)\n<\/code><\/pre>\n
O melhor desse recurso \u00e9 que voc\u00ea pode lembrar manualmente todos os dados em seu aplicativo. Isso tamb\u00e9m \u00e9 \u00fatil para passar dados de componentes aninhados para o componente principal.<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\n\/\/ DeeplyNestedComponent.vue\nInertia.remember(data, 'my-key')\n\n\/\/ MainComponent.vue\nlet data = Inertia.restore('my-key')\n<\/code><\/pre>\n
Upload de arquivos<\/h3>\n
Inertia detecta se o formul\u00e1rio inclui arquivos e, em caso afirmativo, transforma os dados do pedido para o objeto formData<\/code>, o que \u00e9 sempre necess\u00e1rio. Ent\u00e3o, se voc\u00ea tiver um formul\u00e1rio que inclua um nome e um avatar, Inertia tratar\u00e1 o formul\u00e1rio como multipart\/form-data<\/code>.<\/p>\n
Valida\u00e7\u00e3o e erros<\/h3>\n
Quando um usu\u00e1rio submete um formul\u00e1rio com valores incorretos e ele \u00e9 enviado para o servidor para valida\u00e7\u00e3o, voc\u00ea retorna o usu\u00e1rio para a p\u00e1gina do formul\u00e1rio com um aviso de erros de valida\u00e7\u00e3o na sess\u00e3o. O Inertia captura os erros da sess\u00e3o e os salva como adere\u00e7os da p\u00e1gina.<\/p>\n
Como os adere\u00e7os s\u00e3o reativos, eles aparecem quando a submiss\u00e3o do formul\u00e1rio \u00e9 completada. Para que Inertia detecte a exist\u00eancia de erros, ela mant\u00e9m um olho em page.props.errors<\/code>.<\/p>\n
Uma vez encontrados erros, ele ent\u00e3o fornece um retorno de chamada onError()<\/code> ao inv\u00e9s de onSuccess()<\/code>.<\/p>\n
Aqui est\u00e1 um exemplo com Vue 3 para ajudar voc\u00ea a entender o conceito:<\/p>\n
\nconst submit = () => {\n    form.post(\"kinsta\/login\", {\n        onError: () => {\n            return \"Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me\"\n        },\n        onSuccess: () => {\n            return \"Wohoo!!\"\n        }\n    }\n    );\n  };\n<\/code><\/pre>\n
Exibir erros \u00e9 t\u00e3o f\u00e1cil quanto defini-los como adere\u00e7os e exibi-los condicionalmente em seu HTML:<\/p>\n
\n<script setup>\n  defineProps({\n    errors: Object,\n  });\n\n\/\/\n<\/script>\n\n<template>\n  <form @submit.prevent=\"submit()\">\n    \/\/\n    <div v-if=\"errors.email\">{{ errors.email }}<\/div>\n  <\/form>\n<\/template>\n<\/code><\/pre>\n
Ao usar o Inertia, voc\u00ea n\u00e3o precisa se preocupar com dados de entrada antigos no caso de algum erro. Uma vez que o Inertia detecta que o usu\u00e1rio foi redirecionado para a p\u00e1gina com erros, ele preserva automaticamente o antigo estado do componente para POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code>.<\/p>\n
Reload parciais com Inertia.js<\/h3>\n
A funcionalidade de recarga reload do Inertia \u00e9 simplesmente excelente, uma vez que ele apenas recarrega um componente selecionado na p\u00e1gina ao inv\u00e9s de ir buscar todo o conjunto de dados do servidor novamente. Isso leva a otimiza\u00e7\u00e3o do seu aplicativo para o pr\u00f3ximo n\u00edvel. Voc\u00ea tamb\u00e9m pode visitar o seguinte link para Saiba mais sobre como otimizar o desempenho do seu aplicativo Laravel<\/a>.<\/p>\n
Reload parciais podem ser realizadas usando a propriedade only<\/code> do Inertia:<\/p>\n
\nimport { Inertia } from '@inertiajs\/inertia'\n\nInertia.visit(url, {\n  only: ['users'],\n})\n<\/code><\/pre>\n
Redirecionamentos externos com Inertia.js<\/h3>\n
O redirecionamento subdom\u00ednio, ou redirecionamento externo, \u00e9 um dos desafios mais frustrantes com SPAs. \u00c9 irracional esperar que seu aplicativo permane\u00e7a uma \u00fanica p\u00e1gina enquanto tamb\u00e9m visita um dom\u00ednio diferente.<\/p>\n
Pode ser necess\u00e1rio redirecionar um pedido do Inertia para um site externo ou mesmo para outro endpoint n\u00e3o Inertia em seu aplicativo. Isso \u00e9 poss\u00edvel atrav\u00e9s de uma visita ao site window.location<\/code> iniciada do lado do servidor:<\/p>\n
\nreturn Inertia::location($url);\n<\/code><\/pre>\n
Se voc\u00ea abrir o console durante o teste, voc\u00ea ver\u00e1 que ele retorna 409 conflict<\/code>. Esta resposta cont\u00e9m a URL do cabe\u00e7alho X-Inertia-Location<\/code>, que Inertia detectar\u00e1 no lado do cliente e automaticamente realizar\u00e1 a visita.<\/p>\n
Como trabalhar com o Inertia.js<\/h2>\n
Trabalhar com Inertia \u00e9 semelhante a trabalhar em um aplicativo do lado do servidor, exceto pelo fato de ser um aplicativo de p\u00e1gina \u00fanica totalmente responsivo. Voc\u00ea deve conseguir definir sua rota, personalizar seu controlador e retornar uma visualiza\u00e7\u00e3o ao Inertia para enviar \u00e0 sua framework de interface do usu\u00e1rio.<\/p>\n
Rotas do Laravel e Inertia.js<\/h3>\n
As rotas do Laravel n\u00e3o s\u00e3o algo que voc\u00ea deseja abrir m\u00e3o ao desenvolver seu aplicativo. Isso permite que voc\u00ea crie rapidamente as rotas mais complexas. H\u00e1 tamb\u00e9m muitos<\/span> recursos gratuitos e pagos do Laravel<\/span><\/a> para ajud\u00e1-lo a aprender mais sobre o Laravel e como o roteamento funciona.<\/span>
\n<\/span>
\n<\/span>A vantagem disso \u00e9 que voc\u00ea n\u00e3o precisa de um roteador Vue ou um roteador React para fazer o roteamento b\u00e1sico do lado do cliente. Isso ocorre porque o Inertia possui seu pr\u00f3prio sistema de roteamento que funciona com o roteamento do Laravel. Se o seu trabalho n\u00e3o precisar de dados de backend, voc\u00ea poder\u00e1 usar o auxiliar do roteador para rotear diretamente para o seu componente.<\/span><\/p>\n
\nRoute::inertia('\/home', 'HomeComponent');\n<\/code><\/pre>\n
\npublic function index()\n    {\n    return Inertia::render('Users\/Index', [\n        'users' => User::all();\n        'create_url' => URL::route('users.create'),\n    ]);\n}\n<\/code><\/pre>\n
Antes de continuarmos, gostar\u00edamos de apresentar o DevKinsta<\/a>, uma poderosa ferramenta para desenvolvedores, designers e ag\u00eancias que permite que eles construam aplicativos web WordPress de uma e v\u00e1rias p\u00e1ginas. Felizmente, o WordPress pode ser integrado com o Laravel usando o pacote Corcel<\/a>. Se voc\u00ea construir um aplicativo Laravel com integra\u00e7\u00e3o WordPress, confira a Ferramenta Kinsta APM<\/a> para um extraordin\u00e1rio monitoramento de desempenho.<\/p>\n
Redirecionamentos<\/h3>\n
Voc\u00ea deve sempre redirecionar o usu\u00e1rio para a rota correto que corresponda ao pedido inicial. Por exemplo, se um usu\u00e1rio est\u00e1 enviando para store<\/code> endpoint para enviar um artigo, certifique-se de redirecionar o cliente para GET<\/code> endpoint talvez para a rota do artigo.<\/p>\n
\npublic function store()\n{\n    Post::create(\n        Request::validate([\n            'title' => ['required'],\n            'body' => ['required'],\n        ])\n    );\n\n    \/\/ redirect the user to the posts show page\n    return Redirect::route('posts.show');\n}\n<\/code><\/pre>\n
Desvantagens do uso do Inertia.js<\/h2>\n
At\u00e9 agora, concentramos nas v\u00e1rias vantagens de usar o Inertia. No entanto, como em qualquer ferramenta, Inertia tamb\u00e9m tem desvantagens.<\/p>\n