Cara Menggunakan Inertia.js di Proyek Laravel Anda

Aplikasi multi-halaman (MPA) semakin kurang populer dari hari ke hari. Platform terkenal seperti Facebook, Twitter, YouTube, Github, dan banyak lainnya sudah menggunakan teknologi aplikasi satu halaman (SPA).

Teknologi trendi ini memungkinkan pengguna untuk terlibat dengan aplikasi web dengan cepat dan responsif karena semuanya dirender di sisi klien. Namun, ini bisa menjadi masalah bagi pengembang yang membangun aplikasi yang dirender di sisi server dengan kerangka kerja seperti Laravel atau Django.

Untungnya, Inertia.js masuk dan menyelamatkan.
Bahan yang hilang yang dibutuhkan proyek Laravel Anda? Inersia.js. Pelajari lebih lanjut dalam panduan menyeluruh ini Klik untuk Tweet
Pada artikel ini, kami akan menunjukkan bagaimana Anda bisa mulai menggunakan Inertia.js dan bagaimana menggunakannya dengan Laravel, Vue.js, dan Tailwind CSS untuk membuat aplikasi web blog modern. Kami juga akan membagikan cara membuat SPA lebih SEO-friendly, serta beberapa trik lainnya.

Jika Anda baru memulai dengan Laravel, kami sarankan Anda membaca artikel ini terlebih dahulu sehingga Anda siap untuk memulai.

Mengapa SPA?

Sebelum kita dapat bertanya mengapa kita harus menggunakan Inersia, pertama-tama kita harus bertanya: "Mengapa SPA?"

Mengapa ada orang yang lebih suka aplikasi yang dirender sisi klien daripada aplikasi sisi server tradisional? Apa yang akan memaksa developer full-stack Laravel untuk mengucapkan selamat tinggal pada komponen blade?

Jawaban singkatnya: karena kecepatan dan daya tanggap sangat penting untuk keterlibatan pengguna yang berhasil.

Dalam kasus MPA, browser secara konstan mengirimkan permintaan ke backend, yang kemudian mengeksekusi banyak kueri basis data. Setelah database dan server memproses kueri dan mengirimkannya ke browser, halaman akan dirender.

Tetapi SPA berbeda. Aplikasi membawa semua yang diperlukan pengguna langsung ke halaman, menghilangkan kebutuhan browser untuk mengirim kueri atau memuat ulang halaman untuk merender elemen HTML baru.

Karena pengalaman pengguna yang unik ini, banyak perusahaan besar menuntut agar situs web mereka menjadi aplikasi satu halaman.

Meskipun demikian, membuat aplikasi satu halaman bisa jadi sulit bagi developer Laravel karena akan mengharuskan mereka untuk mulai menggunakan Vue.js atau React daripada template blade, yang mengakibatkan hilangnya banyak permata Laravel yang menghemat waktu dan tenaga.

Sekarang kita memiliki Inertia.js, semuanya berubah.

Mengapa Inersia?

Jika developer Laravel akan membuat web SPA dengan Vue sebelum Inersia, mereka harus menyiapkan API dan mengembalikan data JSON dengan Laravel, kemudian menggunakan sesuatu seperti AXIOS untuk mengambil data dalam komponen Vue. Mereka juga memerlukan sesuatu seperti Vue Router untuk mengelola rute, yang berarti kehilangan perutean Laravel, serta middleware dan pengontrol.

Inertia.js, di sisi lain, memungkinkan pengembang untuk membangun aplikasi Vue, React, dan Svelte satu halaman modern menggunakan perutean dan pengontrol sisi server klasik. Inersia dirancang untuk pengembang Laravel, Ruby on Rails, dan Django untuk memungkinkan mereka membangun aplikasi tanpa mengubah teknik pengkodean mereka dalam membuat pengontrol, mengambil data dari database, dan merender tampilan

Berkat Inertia.js, pengembang Laravel akan merasa seperti di rumah sendiri.

Bagaimana Inersia Bekerja

Membangun SPA hanya dengan Laravel dan Vue akan memberi Anda halaman JavaScript lengkap untuk frontend Anda, tetapi ini tidak akan memberi Anda pengalaman aplikasi satu halaman. Setiap tautan yang diklik akan menyebabkan kerangka kerja sisi klien Anda di-reboot pada pemuatan halaman berikutnya.

Di sinilah Inersia memasuki gambar.

Inersia pada dasarnya adalah pustaka perutean sisi klien. Ini memungkinkan Anda untuk menavigasi antar halaman tanpa harus memuat ulang seluruh halaman. Ini dilakukan melalui komponen <Link> , yang merupakan pembungkus ringan di sekitar tag jangkar standar.

Saat Anda mengeklik tautan Inersia, Inersia mencegat klik dan mengalihkan Anda ke XHR. Browser tidak akan memuat ulang halaman dengan cara ini, memberi pengguna pengalaman satu halaman penuh.

Memulai Dengan Inersia

Untuk memahami Inersia dan cara mengintegrasikannya dengan Laravel, kita akan membuat aplikasi web blog bernama Kinsta Blog menggunakan kombo yang paling kuat, Laravel untuk backend, Vue.js untuk frontend JavaScript, dan Tailwind CSS untuk styling.

Jika Anda lebih suka mengikuti tutorial ini di lingkungan lokal, Anda dapat menggunakan DevKinsta, alat yang ampuh untuk pengembang, desainer, dan agensi yang memungkinkan mereka membuat aplikasi web WordPress satu dan banyak halaman. Untungnya, WordPress dapat dengan mudah diintegrasikan dengan Laravel menggunakan paket Corcel.

Prasyarat

Untuk mendapatkan hasil maksimal dari tutorial ini, Anda harus terbiasa dengan hal-hal berikut:

• Dasar-dasar Laravel (instalasi, basis data, migrasi basis data, Model Eloquent, pengontrol, dan perutean)
• Dasar-dasar Vue.js (instalasi, struktur, dan formulir)

Jika Anda merasa tidak yakin, lihat tutorial Laravel gratis dan berbayar yang fantastis ini. Kalau tidak, mari kita masuk.

Langkah Satu: Instal Elemen Inti

Untuk fokus pada Inertia.js dan langsung ke bagian yang menyenangkan, pastikan Anda menyiapkan penyiapan berikut:

1. Proyek Laravel 9 yang baru diinstal bernama kinsta-blog
2. Tailwind CSS CLI terpasang di proyek Laravel kami
3. Dua komponen blade di kinsta-blog/resources/views untuk melihat beranda blog dan satu artikel di blog seperti yang ditunjukkan di bawah ini:

   “/resources/views/ index.blade.php “:

    <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Kinsta Blog</title> </head> <body> <header> <h1>Kinsta Blog</h1> </header> <main> <h2>Read our latest articles</h2> <section> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html>

   “/resources/views/ show.blade.php “:

    <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Kinsta Blog</title> </head> <body> <main> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html>

4. Database lokal MySQL bernama kinsta_blog terhubung ke proyek kami:

   “ .env “:

    DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=kinsta_blog DB_USERNAME=root DB_PASSWORD=

5. Model artikel, migrasi, dan pabrik:

   “aplikasi/Model/ Artikel.php “:

    <?php namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Article extends Model { use HasFactory; protected $fillable = ['title', 'excerpt', 'body']; }

   “database/migrasi/ create_articles_table.php “:

    <?php use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; return new class extends Migration { public function up() { Schema::create('articles', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('excerpt'); $table->text('body'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('articles'); } };

   “database/pabrik/ ArticleFactory.php “:

    <?php namespace DatabaseFactories; use IlluminateDatabaseEloquentFactoriesFactory; class ArticleFactory extends Factory { public function definition() { return [ 'title' => $this->faker->sentence(6), 'excerpt' => $this->faker->paragraph(4), 'body' => $this->faker->paragraph(15), ]; } }

Hanya itu yang kita butuhkan untuk memulai! Sekarang mari kita mulai bisnis dan perkenalkan Inertia.js ke proyek kita.

Langkah 2: Instal Inersia

Proses instalasi Inersia dibagi menjadi dua fase utama: sisi server (Laravel) dan sisi klien (VueJs).

Panduan penginstalan resmi dalam dokumentasi Inersia sedikit ketinggalan zaman karena Laravel 9 sekarang menggunakan Vite secara default, tetapi kita akan membahasnya juga.

1. Sisi Server

Hal pertama yang perlu kita lakukan adalah menginstal adaptor sisi server Inersia dengan perintah terminal di bawah ini melalui Komposer.

 composer require inertiajs/inertia-laravel

Sekarang kita akan menyiapkan template root kita, yang akan menjadi file blade tunggal yang akan digunakan untuk memuat file CSS dan JS Anda, serta root Inersia yang akan digunakan untuk meluncurkan aplikasi JavaScript kita.

Karena kita menggunakan Laravel 9 v9.3.1 versi terbaru, kita juga harus mengaktifkan Vite untuk melakukan keajaibannya dengan memasukkannya ke dalam tag kita di /resources/views/ app.blade.php :

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Fetch project name dynamically --> <title inertia>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> @vite('resources/js/app.js') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html>

Perhatikan bagaimana kita dapat mengambil judul proyek secara dinamis dengan menambahkan atribut Inertia ke tag <title> .

Kami juga menambahkan direktif @vite ke kepala untuk memberi tahu Vite jalur file utama JavaScript tempat kami membuat aplikasi dan mengimpor CSS kami. Vite adalah alat yang membantu pengembangan JavaScript dan CSS dengan memungkinkan pengembang untuk melihat perubahan frontend tanpa harus me-refresh halaman selama pengembangan lokal.

Langkah kita selanjutnya adalah membuat middleware HandleInertiaRequests dan menerbitkannya ke proyek kita. Kita dapat melakukannya dengan menjalankan perintah terminal di bawah ini di dalam direktori root proyek kita:

 php artisan inertia:middleware

Setelah ini selesai, buka "App/Http/ Kernel " dan daftarkan HandleInertiaRequests sebagai item terakhir di middlewares web Anda:

 'web' => [ // ... AppHttpMiddlewareHandleInertiaRequests::class, ],

2. Sisi Klien

Selanjutnya, kita harus menginstal dependensi Vue.js 3 frontend kita dengan cara yang sama seperti di sisi server:

 npm install @inertiajs/inertia @inertiajs/inertia-vue3 // or yarn add @inertiajs/inertia @inertiajs/inertia-vue3

Selanjutnya, Anda perlu menarik Vue.js 3:

 npm install [email protected]

Kemudian perbarui file JavaScript utama Anda untuk menginisialisasi Inertia.js dengan Vue.js 3, Vite, dan Laravel:

“resources/js/ app.js “:

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .mount(el); }, });

Dalam cuplikan kode di atas, kami menggunakan plugin Laravel resolvePageComponent , dan kami memintanya untuk menyelesaikan komponen kami dari direktori ./Pages/$name.vue . Ini karena kami akan menyimpan komponen Inersia kami di direktori ini nanti di proyek kami, dan plugin ini akan membantu kami memuat komponen tersebut secara otomatis dari direktori yang benar.

Yang tersisa hanyalah menginstal vitejs/plugin-vue :

 npm i @vitejs/plugin-vue

Dan perbarui file vite.config.js :

 import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [ laravel({ input: ["resources/css/app.css", "resources/js/app.js"], refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], });

Langkah terakhir adalah menginstal dependensi kami dan mengkompilasi file kami:

 npm install npm run dev

Dan voila! Anda mendapatkan aplikasi Laravel 9 yang berfungsi dengan Vue.js 3 dan Vite. Sekarang kita perlu melihat sesuatu terjadi dalam aksi!

Membuat Halaman Inersia

Apakah Anda ingat dua file blade ( index dan show ) untuk melihat beranda kami dan satu artikel?

Satu-satunya file blade yang kita perlukan saat menggunakan Inersia adalah app.blade.php , yang sudah pernah kita gunakan saat menginstal Inersia. Jadi apa yang terjadi pada file-file itu sekarang?

Kami akan mengubah file tersebut dari komponen blade menjadi komponen Inertia.js.

Setiap halaman di aplikasi Anda memiliki pengontrol dan komponen JavaScript sendiri dengan Inersia. Ini memungkinkan Anda mendapatkan hanya data yang diperlukan untuk halaman itu, tanpa menggunakan API. Halaman inersia tidak lebih dari komponen JavaScript, dalam kasus kami, ini adalah komponen Vue.js. Mereka tidak memiliki sesuatu yang sangat penting tentang mereka. Jadi yang akan kita lakukan adalah membungkus semua konten HTML di antara <template> dan segala sesuatu yang berhubungan dengan JavaScript akan dibungkus dengan <script> .

Buat folder bernama "Halaman" dan pindahkan file Anda ke sana. Jadi kita akan memiliki " index.blade.php " dan " show.blade.php " di " ./resources/js/Pages ". Kemudian kita akan mengubah format file menjadi “.vue” alih-alih “.blade.php” sambil membuat huruf pertama namanya menjadi huruf besar dan mengubah isinya menjadi komponen Vue.js standar. Kami akan mengecualikan <html> , <head> , dan <body> karena sudah termasuk dalam komponen root blade utama.

“resources/js/Pages/ Index.vue “:

 <script setup> // </script> <template> <header> <h1>Kinsta Blog</h1> </header> <main> <h2>Read our latest articles</h2> <section> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

“resources/js/Pages/ Show.vue “:

 <script setup> // </script> <template> <header> <h1>Welcome to Kinsta Blog</h1> </header> <main> <article> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

Ada sesuatu yang sangat menggangguku! Kami terus menyalin dan menempelkan header dan footer kami di setiap komponen yang bukan praktik yang baik. Mari buat Layout dasar Inersia untuk menyimpan komponen persisten kita.

Buat folder bernama "Layouts" di " /resources/js " dan di dalam folder itu buat file bernama "KinstaLayout.vue". File ini akan memiliki header dan footer kita dan main dengan <slot /> untuk memungkinkan semua komponen yang dibungkus dengan tata letak ini disematkan di dalamnya. File ini akan terlihat seperti ini:

“resources/js/Layouts/ KinstaLayout.vue “:

 <script setup></script> <template> <header> <h1>Kinsta Blog</h1> </header> <main> <slot /> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

Lalu kita akan mengimpor tata letak baru ini di halaman kita dan membungkus semua konten HTML dengannya. Komponen kita akan terlihat seperti ini:

Indeks.vue :

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; </script> <template> <KinstaLayout> <section> <h2>Read our latest articles</h2> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </KinstaLayout> </template>

Tampilkan.vue :

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; </script> <template> <KinstaLayout> <article> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </KinstaLayout> </template>

Rute Laravel dan Render Inersia

Pertama mari gunakan file “ ArticleFactory ” yang kita miliki dari titik awal tutorial kita dan masukkan beberapa artikel ke dalam database kita.

“database/seeders/ databaseSeeder.php “:

 <?php namespace DatabaseSeeders; use AppModelsArticle; use IlluminateDatabaseSeeder; class DatabaseSeeder extends Seeder { public function run() { Article::factory(10)->create(); } }

Kemudian tekan perintah terminal di bawah ini untuk memigrasikan tabel Anda dan menyebarkan data palsu dari pabrik:

 php artisan migrate:fresh --seed

Ini akan membuat 10 artikel palsu dalam database, yang harus kita sampaikan ke tampilan kita menggunakan perutean Laravel. Sekarang kita menggunakan Inersia untuk membuat tampilan, cara kita menulis rute akan sedikit berubah. Mari buat rute Laravel Inertia pertama kita di “routes/ web.php ” dan kembalikan tampilan beranda dari “/resources/js/Pages/ Index.vue “.

“rute/ web.php “:

 <?php use AppModelsArticle; use IlluminateSupportFacadesRoute; use InertiaInertia; Route::get('/', function () { return Inertia::render('Index', [ 'articles' => Article::latest()->get() ]); })->name('home');

Perhatikan bahwa kita mengimpor Inertia dan tidak menggunakan helper view() Laravel untuk mengembalikan tampilan, melainkan menggunakan Inertia::render . Inersia juga secara default akan mencari nama file yang kami sebutkan di route kami di folder Pages di "resources/js".

Buka file indeks dan atur data yang diambil sebagai penyangga dan ulangi dengan v-for untuk menampilkan hasilnya. Di antara tag skrip, tentukan data yang diteruskan sebagai penyangga. Yang perlu diketahui Inersia hanyalah jenis data yang Anda harapkan, yang dalam kasus kami adalah objek 'Artikel' yang berisi larik artikel.

“resources/js/Pages/ Index.vue “:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ Articles: Object, }); </script>

Perhatikan bahwa cukup mendefinisikannya sebagai prop tanpa mengembalikannya karena kami menggunakan format setup untuk API komposisi Vue.js 3. Jika kami menggunakan API opsi maka kami harus mengembalikannya.

Mari kita membuat lingkaran:

 <template> <KinstaLayout> <h2>Read our latest articles</h2> <section> // Looping over articles <article v-for="article in articles":key="article.id"> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>{{article.title}}</h3> <p>{{article.excerpt}}</p> <a href="#">Read more</a> </article> </section> </KinstaLayout> </template>

npm run dev (biarkan berjalan karena kami menggunakan Vite) dan php artisan serve untuk memulai server pengembangan laravel dan mengakses situs web kami, kami akan melihat halaman yang diharapkan menampilkan kesepuluh artikel dalam database.

Sekarang, kami menggunakan ekstensi Vue DevTools Google Chrome, yang memungkinkan kami untuk men-debug aplikasi saya. Mari tunjukkan bagaimana data kita diteruskan ke komponen.

“Artikel” diteruskan ke komponen sebagai objek penyangga yang berisi larik artikel; setiap artikel dalam larik juga merupakan objek dengan properti yang sesuai dengan data yang diperolehnya dari database. Ini berarti bahwa setiap data yang kami transfer dari Laravel ke Inertia akan diperlakukan sebagai penyangga.

Menggunakan Tailwind CSS Dengan Inertia.js

Karena Tailwind sudah terinstal di proyek kita pada titik awal, yang perlu kita lakukan hanyalah memerintahkannya untuk membaca komponen Inersia kita. Ini dapat dilakukan dengan mengedit " tailwind.config.js " sebagai berikut:

 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./storage/framework/views/*.php", "./resources/views/**/*.blade.php", "./resources/js/**/*.vue", ], theme: { extend: {}, }, plugins: [], };

Kemudian pastikan kita telah mengimpor file CSS kita di “resources/js/ app.js “:

 import "../css/app.css";

Dan sekarang kita siap untuk menata komponen kita.

“resources/js/Pages/ Index.vue “:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ articles: Object, }); </script> <template> <KinstaLayout> <h2 class="text-2xl font-bold py-10">Read our latest articles</h2> <section class="space-y-5 border-b-2 pb-10"> <article v-for="article in articles" :key="article.id" class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl" > <img src="/images/kinsta-logo.png" class="w-32 h-32 rounded-xl object-cover" alt="" /> <div class="flex flex-col text-left justify-between pl-3 space-y-5"> <h3 class="text-xl font-semibold text-indigo-600 hover:text-indigo-800" > <a href="#">{{ article.title }}</a> </h3> <p> {{ article.excerpt }} </p> <a href="#" class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold" >Read more</a > </div> </article> </section> </KinstaLayout> </template>

“resources/js/Layouts/ KinstaLayout.vue “:

 <script setup></script> <template> <Header class="bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4" > <h1 class="text-white font-bold text-4xl">Kinsta Blog</h1> </Header> <main class="container mx-auto text-center"> <slot /> </main> <footer class="bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto" > <h2 class="font-bold text-xl pb-5">Join our Newsletter</h2> <input class="rounded-xl w-80 h-12 px-3 py-2 shadow-md" type="email" placeholder="Write your email.." /> </footer> </template>

Jika Anda melihat browser, Anda akan melihat bahwa Vite telah memperbarui halaman dengan keajaiban Tailwind.

Tautan Inersia

Sekarang kita memiliki beranda yang berfungsi yang dapat menampilkan semua artikel dalam database, kita perlu membuat rute lain untuk menampilkan artikel individual. Mari buat rute baru dan setel URL ke wildcard "id":

“rute/ web.php ”

 <?php use AppModelsArticle; use IlluminateSupportFacadesRoute; use InertiaInertia; Route::get('/', function () { return Inertia::render('Index', [ 'articles' => Article::latest()->get() ]); })->name('home'); Route::get('/posts/{article:id}', function (Article $article) { return Inertia::render('Show', [ 'article' => $article ]); })->name('article.show');

Kami mengimpor model "Artikel" dan menambahkan rute baru untuk mengembalikan komponen Inersia Show.vue . Kami juga memanfaatkan pengikatan model rute Laravel, yang memungkinkan Laravel untuk secara otomatis mendapatkan artikel yang kami maksud.

Yang kita butuhkan sekarang adalah cara untuk mengunjungi rute ini dengan mengeklik tautan dari beranda tanpa harus memuat ulang seluruh laman. Ini dimungkinkan dengan alat magis Inersia <Link> . Kami menyebutkan di pendahuluan bahwa Inersia menggunakan <Link> sebagai pembungkus untuk tag jangkar standar <a> , dan pembungkus ini dimaksudkan untuk membuat kunjungan halaman semulus mungkin. Di Inersia, tag <Link> dapat berperilaku sebagai tag jangkar yang melakukan permintaan <GET> , tetapi juga dapat bertindak sebagai <button> dan <form> secara bersamaan. Mari kita lihat bagaimana kita bisa menerapkannya pada proyek kita.

Di Index.vue kita, kita akan mengimpor <Link> dari Inersia, dan menghapus tag jangkar <a> dan menggantinya dengan tag Inersia <Link> . Atribut href akan disetel ke URL rute yang sebelumnya kami buat untuk melihat artikel:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; import { Link } from "@inertiajs/inertia-vue3"; defineProps({ articles: Object, }); </script> <template> <KinstaLayout> <section class="space-y-5 border-b-2 pb-10"> <h2 class="text-2xl font-bold pt-10 mx-auto text-center"> Read our latest articles </h2> <article v-for="article in articles" :key="article.id" class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl" > <img src="/images/kinsta-logo.png" class="w-32 h-32 rounded-xl object-cover" alt="" /> <div class="flex flex-col text-left justify-between pl-3 space-y-5" > <h3 class="text-xl font-semibold text-indigo-600 hover:text-indigo-800" > <Link :href="'/posts/' + article.id">{{ article.title }}</Link> </h3> <p> {{ article.excerpt }} </p> <Link :href="'/posts/' + article.id" class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold" >Read more </Link> </div> </article> </section> </KinstaLayout> </template>

Mari gayakan Show.vue dengan Tailwind agar terlihat sedikit lebih berdandan dan siap untuk kunjungan kita. Dan juga kita perlu memberi tahu bahwa ia harus mengharapkan objek "Artikel" dan menetapkannya sebagai penyangga:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ article: Object, }); </script> <template> <KinstaLayout> <article class="mx-auto mt-10 flex justify-center max-w-5xl border-b-2"> <img src="/images/kinsta-logo.png" class="w-80 h-80 rounded-xl mx-auto py-5" alt="" /> <div class="text-left flex flex-col pt-5 pb-10 px-10"> <h1 class="text-xl font-semibold mb-10">{{ article.title }}</h1> <p>{{ article.body }}</p> </div> </article> </KinstaLayout> </template>

Sekarang ketika kita mengklik judul artikel atau “Read more”, kita akan secara ajaib dipindahkan ke Show.vue tanpa me-refresh halaman.

Dalam kasus kami, kami menggunakan <Link> sebagai tag jangkar yang mengirimkan permintaan GET ke rute dan mengembalikan data baru, tetapi kami juga dapat menggunakan <Link> untuk POST , PUT , PATCH dan DELETE

“rute/ web.php “:

 <Link href="/logout" method="post" as="button" type="button">Logout</Link>

Tips dan Trik Inersia Laravel yang Harus Anda Ketahui

Kami sekarang memiliki SPA yang berfungsi yang dibuat dengan Laravel, Inertia, dan Tailwind CSS. Tetapi inersia dapat membantu kita mencapai lebih banyak lagi. Saatnya untuk memperoleh beberapa teknik Inersia yang akan membantu pengembang dan pengunjung aplikasi.

Menghasilkan URL

Anda mungkin telah memperhatikan bahwa kami telah menambahkan nama ke rute Laravel kami tanpa menggunakannya. Inersia memungkinkan kita untuk menggunakan rute bernama kita di dalam komponen kita alih-alih menuliskan rute lengkap secara manual.

Kami dapat mencapainya dengan menginstal paket Ziggy di proyek kami:

 composer require tightenco/ziggy

Kemudian buka "resources/js/app.js" dan perbarui seperti ini:

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, Ziggy) .mount(el); }, });

Buka “/resources/views/ app.blade.php ” dan perbarui head dengan arahan @route :

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fetch project name dynamically --> <title inertia>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> @routes @vite('resources/js/app.js') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html>

…dan segarkan paket NPM Anda dengan menekan dua perintah terminal di bawah ini:

 npm install && npm run dev

Paket ini memungkinkan kita untuk menggunakan rute bernama dalam komponen Inersia kita, jadi mari menuju ke Index.vue dan menghapus rute manual lama dan menggantinya dengan nama rute sambil mengirimkan data secara normal seolah-olah kita berada di controller kita.

Kami akan mengganti ini:

 <Link :href="'/posts/' + article.id"> {{ article.title }} </Link>

…dengan ini:

 <Link :href="route('article.show', article.id)"> {{ article.title }} </Link>

Ini akan memberi kami perilaku yang sama persis dengan yang kami miliki tetapi lebih ramah pengembang dan sangat membantu ketika rute Anda mengharapkan banyak parameter.

Indikator Kemajuan

Ini adalah salah satu fitur terbaik dari Inertia.js; karena SPA memberikan pengalaman pengguna yang interaktif, memiliki umpan balik yang konstan apakah permintaan sedang dimuat akan menjadi tambahan yang fantastis untuk aplikasi tersebut. Ini dapat dicapai dengan perpustakaan terpisah yang ditawarkan Inersia.

Pustaka “@inertiajs/progress” adalah pembungkus di sekitar NProgress yang secara kondisional menampilkan indikator pemuatan menurut peristiwa Inersia. Anda tidak benar-benar perlu tahu bagaimana ini bekerja di balik layar, jadi mari kita membuatnya bekerja.

Kita dapat menginstal perpustakaan ini dengan perintah terminal di bawah ini:

 npm install @inertiajs/progress

Setelah diinstal, kita perlu mengimpornya di “ resources/js/app.js ”

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; import { InertiaProgress } from "@inertiajs/progress"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, Ziggy) .mount(el); }, }); InertiaProgress.init({ color: "#000000", showSpinner: true });

Ini akan menampilkan bilah pemuatan dan pemintal pemuatan dalam warna hitam, tetapi kami dapat mengubah warna bersama dengan opsi bermanfaat lainnya yang dapat ditemukan di dokumentasi indikator kemajuan Inertia.js.

Manajemen Gulir

Dalam beberapa kasus, Anda mungkin ingin menavigasi ke halaman baru sambil mempertahankan posisi gulir yang sama. Mungkin Anda memerlukan ini jika Anda mengizinkan pengguna untuk meninggalkan komentar; ini akan mengirimkan formulir dan memuat komentar baru dari database ke dalam komponen Anda; Anda ingin ini terjadi tanpa pengguna kehilangan posisi gulir. Inersia menangani ini untuk kita.

Dalam kasus kita, mari terapkan ini pada tag <Link> kita di Index.vue . Untuk mempertahankan posisi gulir sambil mengarahkan ulang ke halaman lain dengan <Link> Inersia, yang perlu kita lakukan hanyalah menambahkan atribut preserve-scroll ke <Link> :

 <Link :href="route('article.show', article.id)" preserve-scroll> {{ article.title }} </Link>

Kiat SEO

Sejak lahirnya SPA, orang-orang khawatir tentang pengoptimalan mesin telusur (SEO). Sudah umum diketahui bahwa jika Anda menggunakan pendekatan SPA, mesin telusur akan kesulitan merayapi aplikasi web Anda karena semuanya dirender sisi klien, sehingga situs web Anda tidak muncul di bagian atas hasil penelusuran; namun, mengapa platform populer seperti Facebook dan Github sekarang menjadi SPA dan masih berkinerja baik di SEO?

Nah, ini bukan misi: mustahil lagi. Inersia menawarkan beberapa solusi untuk membantu SPA Anda menjadi ramah SEO.

Inersia Vue SSR Dengan Laravel dan Vite

Mesin telusur selalu mencari HTML di situs web Anda untuk mengidentifikasi kontennya; namun, jika Anda tidak memiliki HTML di URL Anda, pekerjaan ini menjadi lebih sulit. Saat mengembangkan SPA, semua yang Anda miliki di halaman Anda adalah JavaScript dan JSON. Inersia memperkenalkan fitur Server-Side Rendering (SSR) yang dapat Anda tambahkan ke aplikasi Anda. Hal ini memungkinkan aplikasi Anda melakukan pra-render kunjungan halaman awal di server, lalu mengirimkan HTML yang telah dirender ke browser. Hal ini memungkinkan pengguna melihat dan berinteraksi dengan halaman Anda sebelum dimuat sepenuhnya, dan juga memiliki keuntungan lain, seperti mempersingkat waktu yang diperlukan mesin telusur untuk mengindeks situs Anda.

Untuk meringkas cara kerjanya, Inersia akan mengidentifikasi apakah itu berjalan di server Node.js dan akan merender nama komponen, properti, URL, dan versi aset ke HTML. Ini akan memberi pengguna dan mesin pencari hampir semua yang ditawarkan halaman Anda.

Namun, karena kita berurusan dengan Laravel, ini tidak masuk akal karena Laravel adalah framework PHP dan tidak berjalan di server Node.js. Oleh karena itu, kami akan meneruskan permintaan ke layanan Node.js, yang akan merender halaman dan mengembalikan HTML. Ini akan membuat aplikasi Laravel Vue kita SEO friendly secara default.

Pertama, kita perlu menginstal paket npm Vue.js SSR:

 npm install @vue/server-renderer

Another helpful Inertia “NPM” package provides a simple “HTTP” server. It is strongly recommended that you install it:

 npm install @inertiajs/server

Then, in “resources/js/”, we'll add a new file named ssr.js . This file will be very similar to the app.js file we created when installing Inertia, only it will execute in Node.js rather than the browser:

 import { createSSRApp, h } from "vue"; import { renderToString } from "@vue/server-renderer"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import createServer from "@inertiajs/server"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; const appName = "Laravel"; createServer((page) => createInertiaApp({ page, render: renderToString, title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ app, props, plugin }) { return createSSRApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, { ...page.props.ziggy, location: new URL(page.props.ziggy.location), }); }, }) );

Make sure not to include everything in the ssr.js file since it will not be visible to visitors; this file is only for search engines and browsers to show the data within your page, so include only what is important to your data or only what will make your data available.

“By default, Inertia's SSR server will operate on port 13714. However, you can change this by providing a second argument to the createServer method.” Inertia DOCss.

The Inertia.js DOCs aren't explaining how to integrate Inertia SSR with Vite, but we will go through this now. Head to vite.config.js and paste the below:

 import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [ laravel({ input: "resources/js/app.js", ssr: "resources/js/ssr.js", }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], });

Next, head to package.json and change the build script:

 "build": "vite build && vite build --ssr"

Now if we run npm run build , Vite will build our SSR bundle for production. For more information about this you may visit Inertia SSR DOCs and Vite SSR DOCs.

Title and Meta

Because JavaScript applications are rendered within the document's <body> , they cannot render markup to the document's <head> because it is outside of their scope. Inertia has a <Head> component that may be used to set the page <title> , <meta> tags, and other <head> components.

To add <head> element to your Page, we must import <head> from Inertia same as we did with <Link> component:

import { Head } from '@inertiajs/inertia-vue3' <Head> <title>Kinsta Blog</title> <meta name="description" content="Kinsta blog for developers"> </Head>

Kami juga dapat menambahkan judul global untuk semua halaman, ini akan menambahkan nama aplikasi Anda di samping judul di setiap halaman. Kami sudah melakukannya di file app.js :

 createInertiaApp({ title: (title) => `${title} - ${appName}`, // });

Artinya, jika kita menambahkan <head title="Homepage"> di beranda aplikasi kita dengan judul, ini akan ditampilkan seperti ini: <title>Home - My App</title> .

Memantau Aplikasi Anda

Kecepatan adalah salah satu faktor terpenting dalam mengoptimalkan kinerja SEO di situs web Anda. Jika Anda menggunakan WordPress untuk situs web Anda, untuk alasan ini, Kinsta APM akan membantu Anda dalam memantau dan mengawasi tindakan aplikasi Anda. Ini membantu Anda mengidentifikasi masalah kinerja WordPress dan tersedia gratis di semua situs yang dihosting Kinsta.

Ringkasan

Inertia.js adalah salah satu teknologi paling signifikan yang tersedia; gabungkan dengan Laravel dan Anda memiliki aplikasi Halaman Tunggal modern yang dibuat dengan PHP dan JavaScript. Taylor Otwell, pencipta Laravel, sangat tertarik dengan Inersia sehingga Laravel telah meluncurkan starter kit terpopulernya, Laravel Breeze dan Jetstream, dengan dukungan Inersia dan SSR.
Lihat bagaimana Anda dapat mulai menggunakan Inertia.js dan cara menggunakannya dengan Laravel, Vue.js, dan Tailwind CSS untuk membuat ap web blog modern dalam panduan ini Klik untuk Tweet
Jika Anda adalah penggemar Laravel atau pengembang profesional, Inertia.js pasti akan menarik perhatian Anda. Dalam tutorial ini, kami membuat blog yang sangat mendasar dan mudah hanya dalam beberapa menit. Masih banyak yang harus dipelajari tentang inersia, dan ini mungkin hanya yang pertama dari banyak artikel dan tutorial.

Apa lagi tentang Laravel yang ingin Anda jelajahi? Beri tahu kami di bagian komentar di bawah.