Recentemente tive uma experiência com Inertia Js em um projeto, e fiquei impressionada com a facilidade que foi o desenvolvimento! Neste artigo, vou falar um pouquinho sobre como o Inertia funciona e seus benefícios.
O que é o Inertia.js?
O Inertia JS é uma nova abordagem criada pra facilitar o desenvolvimento de monolitos modernos. Ele tem uma forte relação com o ecossistema Laravel, mas também pode ser usado em outros frameworks de backend. Um projeto com Inertia.js é bem parecido com os projetos em PHP, a diferença é que o frontend agora é em React (ou Vue). O inertia.js atua fazendo a comunicação entre o seu frontend e seu backend, substituindo a necessidade por uma API, por exemplo.
Por que usar o Inertia.js?
Seu objetivo de negócio e o seu time são alguns dos pontos a levar em consideração! Em projetos onde os times de frontend e backend são separados ou há integração entre diferentes negócios ou empresas, faz sentido dividir o sistema em serviços ou projetos independentes.
Em contrapartida, um só time com poucos desenvolvedores que precisariam ser multidisciplinares, trabalhando tanto no código frontend quando backend o tempo todo, fez bastante sentido em utilizar o inertia pra entregar o projeto sem grandes complexidades que os microserviços trazem.
Como funciona?
O Inertia.js elimina a necessidade de uma API tradicional. Você pode enviar dados do backend diretamente para o frontend como parâmetros em uma resposta, e o frontend usa esses dados para renderizar componentes. Para realizar a instalação, você pode seguir os passos da documentação:https://inertiajs.com/server-side-setup
Aqui adicionei um exemplo simples:
Definição de rota:
// web.php
Route::get('/books', [BooksController::class, 'index']);
Criação de lógica no controller:
//BooksController.php
namespace App\Http\Controllers;
use App\Models\Book;
use Inertia\Inertia;
class BooksController extends Controller
{
public function index()
{
$books = Book::all();
return Inertia::render('Books/Index', [
'books' => $books
]);
}
}
Renderização da sua view usando React e Typescript:
// resources/js/Pages/Books/Index.tsx
import { usePage } from '@inertiajs/react';
type Book = {
id: number;
title: string;
};
export default function BooksIndex() {
const { books } = usePage().props;
return (
<div>
{books.map((book: Book) => (
<div key={book.id}>
{book.title}
</div>
))}
</div>
);
}
E pronto! Esse é um exemplo simples do funcionamento do inertia, quem já vem do desenvolvimento em PHP percebe que é bem parecido com as blades do PHP (tirando o fato de ser React/Vue).
Nesse exemplo acima, o hook usePage do Inertia é usado pra puxar as informações que mandamos como lá no controller. Além disso, alguns dos principais utilitários disponíveis são:
useRemember: Armazena dados entre navegações de página.
WhenVisible: Componente usado como forma de só carregar dados quando um elemento se torna vísivel na página
Deferred: Permite você adie o carragamento de determinados nados da ágina até depois da renderização inicial, especialment usando em casos onde parte dos dados não são imediatamente necessárias no primeiro carregamento
Link: Componente usado para navegação, similar ao do React Router
Conclusão
Logicamente, tudo depende dos requisitos do seu projeto e do seu time. Mas o Inertia é uma ótima ferramenta que vem crescendo e se desenvolvendo cada vez mais no ecossistema laravel, uma ótima pedida pra projetos monolitos com PHP e com frameworks modernos como React/Vue para trazer uma melhor experiência para os usuários. A seguir o link da documentação, que foi base para este artigo, recomendo a leitura para conhecer mais sobre o Inertia:
SOCIAL SHARE CARD GENERATOR