{"id":622,"date":"2022-05-24T10:42:27","date_gmt":"2022-05-24T10:42:27","guid":{"rendered":"https:\/\/abdelrhmangamal.com\/?p=622"},"modified":"2022-06-21T12:27:17","modified_gmt":"2022-06-21T12:27:17","slug":"livewire-vs-inertiajs-%ef%bf%bc","status":"publish","type":"post","link":"https:\/\/abdelrhmangamal.com\/?p=622","title":{"rendered":"Livewire vs Inertiajs"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What Problem Does Livewire\/Inertia Solve?<\/h2>\n\n\n\n<p>Over the last years, single-page applications (SPAs) became popular. You load the JavaScript and assets once, and then all links on the page don&#8217;t reload the full page, but rather reload only certain parts. User experience became better, but the problem was that they take a lot of time to create properly. You need to take care of two separate parts: front-end and back-end, and then the link between them, including routing, security, and so on. So, at some point, some developers thought to simplify it somehow. That&#8217;s how Livewire and Inertia.js were born, roughly at the same time, and both became quite popular.<\/p>\n\n\n\n<p>Livewire and Inertia have very similar goals: to simplify the creation of SPAs. However, they do it differently. Livewire is focused on Laravel developers, so they could stay back-end only and not deal with JavaScript at all. Inertia is for Vue or React developers who want to simplify their workflow: not create a separate API, not deal with routing, state management, and other challenges.<\/p>\n\n\n\n<p>So, the goal is similar but the audience is different. You can even compare the URLs:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>laravel-livewire.com (&#8220;laravel&#8221; in the URL)<\/li><li>inertiajs.com (&#8220;js&#8221; in the URL)<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simplicity :<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Livewire is a Back-Ender&#8217;s Comfort Zone: <\/h3>\n\n\n\n<p>If you&#8217;re a back-ender and need to create a project quickly with just some dynamic elements on the page, Livewire is probably your best solution. It doesn&#8217;t take you outside of the comfort zone of Laravel: you kind of continue writing back-end Laravel code, creating PHP classes and Blade files. So, for Laravel developers adopting <strong>Livewire<\/strong> is typically faster than Inertia.<\/p>\n\n\n\n<p><strong>Setup of Livewire:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install the Livewire package via composer.<\/li><li>Add 2 Blade directives into the main layout.<\/li><\/ul>\n\n\n\n<p><strong>New Livewire component<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Make Livewire component with Artisan<\/li><li>Fill in the Livewire component class and its Blade with logic<\/li><li>Call the Livewire component with&nbsp;<code>@livewire<\/code>&nbsp;or&nbsp;<code>&lt;livewire&gt;<\/code><\/li><li>Build a navigation\/routing system between components<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Inertiajs is as front-Ender&#8217;s Comfort Zone : <\/h3>\n\n\n\n<p><strong>Inertia<\/strong> comes with a prerequisite: you need to be familiar with the front-end like Vue or React. So, it is by definition more complicated and requires more knowledge than Livewire.<\/p>\n\n\n\n<p><strong>Setup of Inertia Vue<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install the Inertia package via composer<\/li><li>Add 2 Blade directives into the main layout<\/li><li>Setup Inertia middleware<\/li><li>Install client-side adapters:&nbsp;<code>npm install @inertiajs\/inertia @inertiajs\/inertia-vue3<\/code><\/li><li>Update the main&nbsp;<code>resources\/js\/app.js<\/code>&nbsp;with&nbsp;<code>createInertiaApp()<\/code>&nbsp;method<\/li><\/ul>\n\n\n\n<p><strong>New Inertia component<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a Vue.js component with logic and visual template<\/li><li>Call Inertia component with&nbsp;<code>Inertia::render()<\/code><\/li><li>Build a navigation\/routing system between components.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Performance : <\/h2>\n\n\n\n<p>One typical criticism of Livewire is that it makes too many requests to the server, especially if the developers are not careful with wire:model additional options. Indeed, it may make too many requests without the need for that.<\/p>\n\n\n\n<p>It&#8217;s similar to the criticism of Eloquent: less-experienced developers tend to overlook the performance because &#8220;It just works&#8221; and leave the code with potentially hundreds of unoptimized SQL queries executed under the hood of Eloquent.<\/p>\n\n\n\n<p>And even the payload of Laravel requests and results is larger: Livewire downloads the full HTML for the block or the component, while Inertia is dealing with JSON as the result.<\/p>\n\n\n\n<p>So, in terms of performance, default Inertia behavior is probably a better way. But, in most cases, your users wouldn&#8217;t visually notice it, especially on smaller projects. Also, with Livewire, you can optimize a lot of things to improve performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last years, single-page applications (SPAs) became popular. <\/p>\n","protected":false},"author":1,"featured_media":623,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[40,19],"tags":[],"class_list":["post-622","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel-framework","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Livewire vs Inertiajs - Abdelrhman Gamal<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Livewire vs Inertiajs - Abdelrhman Gamal\" \/>\n<meta property=\"og:description\" content=\"Over the last years, single-page applications (SPAs) became popular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/abdelrhmangamal.com\/?p=622\" \/>\n<meta property=\"og:site_name\" content=\"Abdelrhman Gamal\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-24T10:42:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-21T12:27:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/abdelrhmangamal.com\/wp-content\/uploads\/2022\/05\/livewire-vs-inertia.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1175\" \/>\n\t<meta property=\"og:image:height\" content=\"803\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/abdelrhmangamal.com\/?p=622\",\"url\":\"https:\/\/abdelrhmangamal.com\/?p=622\",\"name\":\"Livewire vs Inertiajs - Abdelrhman Gamal\",\"isPartOf\":{\"@id\":\"https:\/\/abdelrhmangamal.com\/#website\"},\"datePublished\":\"2022-05-24T10:42:27+00:00\",\"dateModified\":\"2022-06-21T12:27:17+00:00\",\"author\":{\"@id\":\"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/37df82e7a8c0027f621c916f9044f978\"},\"breadcrumb\":{\"@id\":\"https:\/\/abdelrhmangamal.com\/?p=622#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/abdelrhmangamal.com\/?p=622\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/abdelrhmangamal.com\/?p=622#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/abdelrhmangamal.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Livewire vs Inertiajs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/abdelrhmangamal.com\/#website\",\"url\":\"https:\/\/abdelrhmangamal.com\/\",\"name\":\"Abdelrhman Gamal\",\"description\":\"Software Engineer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/abdelrhmangamal.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/37df82e7a8c0027f621c916f9044f978\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6368eb07883bf34cac0667420f263bcd8168e9cddf28fe0a276ff04700127482?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6368eb07883bf34cac0667420f263bcd8168e9cddf28fe0a276ff04700127482?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/abdelrhmangamal.com\"],\"url\":\"https:\/\/abdelrhmangamal.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Livewire vs Inertiajs - Abdelrhman Gamal","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Livewire vs Inertiajs - Abdelrhman Gamal","og_description":"Over the last years, single-page applications (SPAs) became popular.","og_url":"https:\/\/abdelrhmangamal.com\/?p=622","og_site_name":"Abdelrhman Gamal","article_published_time":"2022-05-24T10:42:27+00:00","article_modified_time":"2022-06-21T12:27:17+00:00","og_image":[{"width":1175,"height":803,"url":"https:\/\/abdelrhmangamal.com\/wp-content\/uploads\/2022\/05\/livewire-vs-inertia.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/abdelrhmangamal.com\/?p=622","url":"https:\/\/abdelrhmangamal.com\/?p=622","name":"Livewire vs Inertiajs - Abdelrhman Gamal","isPartOf":{"@id":"https:\/\/abdelrhmangamal.com\/#website"},"datePublished":"2022-05-24T10:42:27+00:00","dateModified":"2022-06-21T12:27:17+00:00","author":{"@id":"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/37df82e7a8c0027f621c916f9044f978"},"breadcrumb":{"@id":"https:\/\/abdelrhmangamal.com\/?p=622#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/abdelrhmangamal.com\/?p=622"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/abdelrhmangamal.com\/?p=622#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/abdelrhmangamal.com\/"},{"@type":"ListItem","position":2,"name":"Livewire vs Inertiajs"}]},{"@type":"WebSite","@id":"https:\/\/abdelrhmangamal.com\/#website","url":"https:\/\/abdelrhmangamal.com\/","name":"Abdelrhman Gamal","description":"Software Engineer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/abdelrhmangamal.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/37df82e7a8c0027f621c916f9044f978","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/abdelrhmangamal.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6368eb07883bf34cac0667420f263bcd8168e9cddf28fe0a276ff04700127482?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6368eb07883bf34cac0667420f263bcd8168e9cddf28fe0a276ff04700127482?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/abdelrhmangamal.com"],"url":"https:\/\/abdelrhmangamal.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/posts\/622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=622"}],"version-history":[{"count":3,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/posts\/622\/revisions"}],"predecessor-version":[{"id":629,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/posts\/622\/revisions\/629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=\/wp\/v2\/media\/623"}],"wp:attachment":[{"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abdelrhmangamal.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}