Laravel Projelerinizde Inertia.js Nasıl Kullanılır?

Çok sayfalı uygulamalar (MPA'lar) gün geçtikçe daha az popüler hale geliyor. Facebook, Twitter, YouTube, Github ve diğerleri gibi ünlü platformlar bunun yerine zaten tek sayfalı uygulama (SPA) teknolojisini kullanıyor.

Bu modaya uygun teknoloji, kullanıcıların web uygulamalarıyla hızlı ve duyarlı bir şekilde etkileşim kurmasına olanak tanır çünkü her şey istemci tarafında işlenir. Ancak, Laravel veya Django gibi çerçevelerle sunucu tarafında işlenmiş uygulamalar oluşturan geliştiriciler için bu bir sıkıntı olabilir.

Neyse ki, Inertia.js devreye girdi ve kurtarmaya geldi.
Laravel projelerinizin ihtiyaç duyduğu eksik bileşen? atalet.js. Bu kapsamlı kılavuzda daha fazla bilgi edinin Tweet için Tıklayın
Bu makalede, modern bir blog web uygulaması oluşturmak için Inertia.js'yi kullanmaya nasıl başlayabileceğinizi ve onu Laravel, Vue.js ve Tailwind CSS ile nasıl kullanacağınızı göstereceğiz. Ayrıca, SPA'ları nasıl daha SEO dostu hale getirebileceğimizi ve birkaç püf noktası daha paylaşacağız.

Laravel'e yeni başlıyorsanız, başlamaya hazır olmanız için önce bu makaleyi okumanızı öneririz.

Neden SPA'lar?

Neden Atalet kullanmamız gerektiğini sormadan önce, öncelikle şunu sormalıyız: "Neden SPA?"

Neden birileri geleneksel sunucu tarafı uygulamaları yerine istemci tarafı işlenmiş uygulamaları tercih etsin? Tam yığın bir Laravel geliştiricisini blade bileşenlerine elveda demeye ne zorlar?

Kısa cevap: çünkü herhangi bir başarılı kullanıcı etkileşimi için hız ve yanıt verebilirlik çok önemlidir.

MPA'lar söz konusu olduğunda, tarayıcı sürekli olarak arka uca istekler gönderir ve ardından çok sayıda veritabanı sorgusu yürütür. Veritabanı ve sunucu sorguları işleyip tarayıcıya teslim ettikten sonra sayfa işlenir.

Ancak SPA'lar farklıdır. Uygulama, kullanıcının ihtiyaç duyduğu her şeyi doğrudan sayfaya getirerek, tarayıcının sorgu gönderme veya yeni HTML öğeleri oluşturmak için sayfayı yeniden yükleme ihtiyacını ortadan kaldırır.

Bu benzersiz kullanıcı deneyimi nedeniyle, birçok büyük şirket, web sitelerinin tek sayfalık uygulamalar haline gelmesi için yaygara koparıyor.

Bununla birlikte, tek sayfalık bir uygulama oluşturmak Laravel geliştiricileri için zor olabilir çünkü bu, onların blade şablonları yerine Vue.js veya React kullanmaya başlamalarını gerektirecek ve bu da zamandan ve emekten tasarruf sağlayan birçok Laravel cevherinin kaybolmasına neden olacaktır.

Artık Inertia.js'ye sahip olduğumuza göre, hepsi değişti.

Neden atalet?

Laravel geliştiricileri, Inertia'dan önce Vue ile web SPA'ları oluşturacak olsaydı, API'leri kurmaları ve JSON verilerini Laravel ile döndürmeleri ve ardından Vue bileşenlerindeki verileri almak için AXIOS gibi bir şey kullanmaları gerekirdi. Ayrıca rotaları yönetmek için Vue Router gibi bir şeye ihtiyaç duyarlar, bu da Laravel yönlendirmesinin yanı sıra ara yazılımları ve denetleyicileri kaybetmek anlamına gelir.

Öte yandan Inertia.js, geliştiricilerin klasik sunucu tarafı yönlendirme ve denetleyicileri kullanarak modern tek sayfalık Vue, React ve Svelte uygulamaları oluşturmasına olanak tanır. Atalet, Laravel, Ruby on Rails ve Django geliştiricileri için denetleyici oluşturma, bir veritabanından veri alma ve görünüm oluşturma kodlama tekniklerini değiştirmeden uygulamalar oluşturmalarına olanak sağlamak için tasarlanmıştır.

Inertia.js sayesinde Laravel geliştiricileri kendilerini evlerinde hissedecekler.

Atalet Nasıl Çalışır?

Yalnızca Laravel ve Vue ile SPA oluşturmak, ön yüzünüz için size tam bir JavaScript sayfası sağlar, ancak bu size tek sayfalık bir uygulama deneyimi sağlamaz. Tıklanan her bağlantı, istemci tarafı çerçevenizin bir sonraki sayfa yüklemesinde yeniden başlatılmasına neden olur.

Ataletin resme girdiği yer burasıdır.

Atalet temelde bir istemci tarafı yönlendirme kitaplığıdır. Tüm sayfayı yeniden yüklemek zorunda kalmadan sayfalar arasında gezinmenizi sağlar. Bu, standart bir bağlantı etiketinin etrafındaki hafif bir sarmalayıcı olan <Link> bileşeni aracılığıyla gerçekleştirilir.

Bir Atalet bağlantısına tıkladığınızda, Atalet tıklamayı durdurur ve bunun yerine sizi XHR'ye yönlendirir. Tarayıcı, sayfayı bu şekilde yeniden yüklemeyecek ve kullanıcıya tam bir tek sayfa deneyimi sunacaktır.

Atalete Başlarken

Atalet'i ve Laravel ile nasıl entegre edileceğini anlamak için, en güçlü birleşimi, arka uç için Laravel'i, JavaScript ön ucu için Vue.js'yi ve stil için Tailwind CSS'yi kullanarak Kinsta Blog adlı bir blog web uygulaması oluşturacağız.

Bu öğreticiyi yerel bir ortamda izlemeyi tercih ederseniz, geliştiriciler, tasarımcılar ve ajanslar için tek ve çok sayfalı WordPress web uygulamaları oluşturmalarını sağlayan güçlü bir araç olan DevKinsta'yı kullanabilirsiniz. Neyse ki WordPress, Corcel paketi kullanılarak Laravel ile kolayca entegre edilebilir.

Önkoşullar

Bu eğitimden en iyi şekilde yararlanmak için aşağıdakilere aşina olmalısınız:

• Laravel temelleri (kurulum, veritabanı, veritabanı geçişleri, Eloquent Modelleri, denetleyiciler ve yönlendirme)
• Vue.js temelleri (kurulum, yapı ve formlar)

Emin değilseniz, bu harika ücretsiz ve ücretli Laravel eğitimlerine göz atın. Aksi takdirde, hadi içeri girelim.

Birinci Adım: Temel Öğeleri Kurun

Inertia.js'ye odaklanmak ve hemen eğlenceli kısma geçmek için aşağıdaki kurulumun hazır olduğundan emin olun:

1. kinsta-blog adlı yeni kurulmuş Laravel 9 projesi
2. Laravel projemizde yüklü olan Tailwind CSS CLI
3. Blogun ana sayfasını görüntülemek için kinsta-blog/resources/views içindeki iki kanat bileşeni ve aşağıda gösterildiği gibi blogdaki tek bir makale:

   " /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. Projemize bağlı kinsta_blog adlı MySQL yerel veritabanı:

   " .env ":

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

5. Makale modeli, geçişler ve fabrikalar:

   “app/Modeller/ Article.php ”:

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

   “veritabanı/geçişler/ 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'); } };

   “veritabanı/fabrikalar/ 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), ]; } }

Başlamak için ihtiyacımız olan tek şey bu! Şimdi işimize dönelim ve Inertia.js'yi projemize tanıtalım.

2. Adım: Ataleti Kurun

Atalet kurulum süreci iki ana aşamaya ayrılır: sunucu tarafı (Laravel) ve istemci tarafı (VueJ'ler).

Atalet belgelerindeki resmi kurulum kılavuzu biraz güncelliğini yitirdi çünkü Laravel 9 artık varsayılan olarak Vite'ı kullanıyor, ancak bunu da ele alacağız.

1. Sunucu Tarafı

Yapmamız gereken ilk şey Composer üzerinden aşağıdaki terminal komutu ile Inertia server-side adaptörlerini kurmak.

 composer require inertiajs/inertia-laravel

Şimdi CSS ve JS dosyalarınızı yüklemek için kullanılacak tek bir blade dosyası ve JavaScript uygulamamızı başlatmak için kullanılacak bir Atalet kökü olacak kök şablonumuzu kuracağız.

Laravel 9 v9.3.1'in en son sürümünü kullandığımız için, Vite'ı /resources/views/ app.blade.php içindeki etiketlerimize dahil ederek sihrini gerçekleştirmesini sağlamalıyız:

 <!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>

<title> etiketlerine Inertia niteliğini ekleyerek proje başlığını dinamik olarak nasıl alabildiğimize dikkat edin.

Vite'a uygulamamızı oluşturduğumuz ve CSS'imizi import ettiğimiz JavaScript ana dosyamızın yolunu bilmesi için @vite direktifini de ekledik. Vite, geliştiricilerin yerel geliştirme sırasında sayfayı yenilemek zorunda kalmadan ön uç değişikliklerini görüntülemesine izin vererek JavaScript ve CSS geliştirmeye yardımcı olan bir araçtır.

Bir sonraki hamlemiz ise HandleInertiaRequests katman yazılımını oluşturup projemizde yayınlamak olacak. Bunu, projemizin kök dizininde aşağıdaki terminal komutunu çalıştırarak yapabiliriz:

 php artisan inertia:middleware

Bu tamamlandığında, “App/Http/ Kernel ”e gidin ve web ara yazılımlarınızdaki son öğe olarak HandleInertiaRequests kaydedin:

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

2. Müşteri Tarafı

Ardından, ön uç Vue.js 3 bağımlılıklarımızı sunucu tarafında olduğu gibi kurmalıyız:

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

Ardından, Vue.js 3'ü çekmeniz gerekir:

 npm install [email protected]

Ardından, Inertia.js'yi Vue.js 3, Vite ve Laravel ile başlatmak için birincil JavaScript dosyanızı güncelleyin:

“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); }, });

Yukarıdaki kod parçacığında, resolvePageComponent solutionPageComponent eklentisini kullanıyoruz ve ona ./Pages/$name.vue dizininden bileşenlerimizi çözmesini söylüyoruz. Bunun nedeni Atalet bileşenlerimizi projemizde daha sonra bu dizine kaydetmemiz ve bu eklentinin bu bileşenleri doğru dizinden otomatik olarak yüklememize yardımcı olmasıdır.

Geriye kalan tek şey vitejs/plugin-vue yüklemek:

 npm i @vitejs/plugin-vue

Ve vite.config.js dosyasını güncelleyin:

 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, }, }, }), ], });

Son adım, bağımlılıklarımızı yüklemek ve dosyalarımızı derlemektir:

 npm install npm run dev

Ve işte! Vue.js 3 ve Vite ile kendinize çalışan bir Laravel 9 uygulaması edindiniz. Şimdi eylemde olan bir şey görmemiz gerekiyor!

Atalet Sayfaları Oluşturma

Ana sayfamızı ve tek bir makaleyi görüntülemek için bu iki blade dosyasını ( index ve show ) hatırlıyor musunuz?

Inertia'yı kullanırken ihtiyaç duyacağımız tek blade dosyası, zaten Inertia'yı kurarken kullandığımız app.blade.php dosyasıdır . Peki şimdi o dosyalara ne olacak?

Bu dosyaları blade bileşenlerinden Inertia.js bileşenlerine dönüştüreceğiz.

Uygulamanızdaki her sayfanın kendi denetleyicisi ve Atalete sahip JavaScript bileşeni vardır. Bu, bir API kullanmadan yalnızca o sayfa için gereken verileri elde etmenizi sağlar. Atalet sayfaları JavaScript bileşenlerinden başka bir şey değildir, bizim durumumuzda bunlar Vue.js bileşenleridir. Onlar hakkında özellikle kayda değer bir şey yok. Yani yapacağımız şey, tüm HTML içeriğini <template> etiketleri arasına sarmak ve JavaScript ile ilgili her şeyi <script> etiketleri arasına sarmak.

“Sayfalar” adlı bir klasör oluşturun ve dosyalarınızı oraya taşıyın. Yani " ./resources/js/Pages " içinde " index.blade.php " ve " show.blade.php " olacak. Daha sonra dosya formatını “.blade.php” yerine “.vue” olarak isimlerinin baş harflerini büyük yaparak içeriğini standart bir Vue.js bileşeni haline getireceğiz. <html> , <head> ve <body> etiketlerini hariç tutacağız çünkü bunlar zaten ana kök dikey bileşen bileşenine dahil edilmiştir.

“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>

Beni gerçekten rahatsız eden bir şey var! Her bileşende üst bilgimizi ve alt bilgimizi kopyalayıp yapıştırmaya devam ediyoruz, bu çok iyi bir uygulama değil. Kalıcı bileşenlerimizi depolamak için bir Atalet temel Düzeni oluşturalım.

“ /resources/js ” içinde “Layouts” adlı bir klasör oluşturun ve bu klasör içinde “KinstaLayout.vue” adlı bir dosya oluşturun. Bu dosya, bu düzen ile sarılmış tüm bileşenlerin içine gömülmesine izin vermek için üstbilgimize ve altbilgimize ve main dosyaya bir <slot /> sahip olacaktır. Bu dosya şöyle görünmelidir:

“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>

Ardından bu yeni düzeni sayfalarımıza aktaracağız ve tüm HTML içeriğini onunla saracağız. Bileşenlerimiz şöyle görünmelidir:

Index.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>

Show.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>

Laravel Rotaları ve Atalet Oluşturma

Öncelikle öğretici başlangıç ​​noktamızdan aldığımız “ ArticleFactory ” dosyasını kullanalım ve veritabanımıza bazı makaleler ekleyelim.

“veritabanı/seeders/ databaseSeeder.php ”:

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

Ardından, tablolarınızı taşımak ve fabrikalardan sahte verileri tohumlamak için aşağıdaki terminal komutuna basın:

 php artisan migrate:fresh --seed

Bu, veritabanında Laravel yönlendirmesini kullanarak görünümümüze geçirmemiz gereken 10 sahte makale oluşturacaktır. Artık görünümleri işlemek için Eylemsizliği kullandığımıza göre, rotalarımızı yazma şeklimiz biraz değişecek. “routes/ web.php ” içerisinde ilk Laravel Atalet rotamızı oluşturalım ve “/resources/js/Pages/ Index.vue ” adresinden ana sayfa görünümüne dönelim.

“yollar/ web.php ”:

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

Inertia içe aktardığımıza ve görünümü döndürmek için view() Laravel yardımcısını kullanmadığımıza, bunun yerine Inertia Inertia::render kullandığımıza dikkat edin. Atalet ayrıca varsayılan olarak rotamızda bahsettiğimiz dosya adını “resources/js” konumundaki Sayfalar klasöründe arayacaktır.

İndeks dosyasına gidin ve alınan verileri bir destek olarak ayarlayın ve sonuçları göstermek v-for ile bunların üzerinden geçin. Komut dosyası etiketleri arasında, iletilen verileri bir prop olarak tanımlayın. Ataletin bilmesi gereken tek şey, ne tür bir veri beklediğinizdir, bizim durumumuzda bu, bir dizi makale içeren bir 'Makale' nesnesidir.

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

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

Vue.js 3 kompozisyon API'si için setup formatını kullandığımız için, onu döndürmeden sadece bir destek olarak tanımlamanın yeterli olduğunu unutmayın. options API kullanıyorsak, onu döndürmemiz gerekir.

Döngüyü oluşturalım:

 <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 (çalışır durumda bırakın çünkü Vite kullanıyoruz) ve php artisan serve , veritabanındaki on makalenin tümünü görüntüleyen beklenen sayfayı göreceğiz.

Şimdi, uygulamamın hatalarını ayıklamamıza izin veren Google Chrome'un Vue DevTools uzantısını kullanıyoruz. Verilerimizin bileşene nasıl aktarıldığını size gösterelim.

"Makaleler", bileşene bir makale dizisini içeren bir destek nesnesi olarak iletilir; dizideki her makale aynı zamanda veritabanından aldığı verilere karşılık gelen özelliklere sahip bir nesnedir. Bu, Laravel'den Inertia'ya aktardığımız herhangi bir verinin bir destek olarak ele alınacağı anlamına gelir.

Tailwind CSS'yi Inertia.js ile Kullanma

Tailwind, projemizde başlangıç ​​noktasında kurulu olduğu için tek yapmamız gereken ona Atalet bileşenlerimizi okumasını söylemek. Bu, " tailwind.config.js " dosyasını aşağıdaki gibi düzenleyerek gerçekleştirilebilir:

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

Ardından, “resources/js/ app.js ” içindeki CSS dosyamızı içe aktardığımızdan emin olun:

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

Artık bileşenlerimizi şekillendirmeye hazırız.

“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>

Tarayıcıya bakarsanız, Vite'ın sayfayı Tailwind büyüsü ile zaten güncellediğini fark edeceksiniz.

Atalet Bağlantıları

Artık veritabanındaki tüm makaleleri görüntüleyebilen çalışan bir ana sayfamız olduğuna göre, tek tek makaleleri görüntülemek için başka bir yol oluşturmamız gerekiyor. Yeni bir rota oluşturalım ve URL'yi bir "id" joker karakterine ayarlayalım:

“yollar/ 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');

"Article" modelini içe aktardık ve Show.vue Inertia bileşenini döndürmek için yeni bir rota ekledik. Ayrıca Laravel'in atıfta bulunduğumuz makaleyi otomatik olarak almasını sağlayan rota modeli bağlamasından da yararlandık.

Şimdi tek ihtiyacımız olan, tüm sayfayı yeniden yüklemek zorunda kalmadan ana sayfadan bir bağlantıya tıklayarak bu rotayı ziyaret etmenin bir yolu. Bu, Inertia'nın sihirli aracı <Link> ile mümkündür. Giriş bölümünde, Inertia'nın <Link> standart bağlantı etiketi <a> için bir sarmalayıcı olarak kullandığından ve bu sarmalayıcının sayfa ziyaretlerini olabildiğince sorunsuz hale getirmeyi amaçladığından bahsetmiştik. Eylemsizlikte <Link> etiketi, <GET> isteklerini gerçekleştiren bir bağlantı etiketi gibi davranabilir, ancak aynı zamanda bir <button> ve bir <form> olarak da işlev görebilir. Şimdi bunu projemize nasıl uygulayacağımıza bakalım.

Index.vue'muzda, <Link> 'i Atalet'ten içe aktaracağız ve <a> bağlantı etiketlerini kaldırıp Atalet <Link> etiketleriyle değiştireceğiz. href niteliği, daha önce makaleyi görüntülemek için oluşturduğumuz yönlendirme URL'sine ayarlanacaktır:

 <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>

Biraz daha gösterişli ve ziyaretimiz için hazır görünmesi için Show.vue'yu Tailwind ile şekillendirelim. Ayrıca bir "Makale" nesnesi beklemesi gerektiğini bilmesini ve onu bir destek olarak ayarlamasını sağlamalıyız:

 <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>

Şimdi makale başlığına veya “Devamını oku”ya tıkladığımızda, sayfayı yenilemeden sihirli bir şekilde Show.vue'ye taşınacağız .

Bizim durumumuzda, rotaya bir GET isteği gönderen ve yeni verileri geri döndüren bir bağlantı etiketi olarak <Link> kullanıyoruz, ancak <Link> ayrıca POST , PUT , PATCH ve DELETE için de kullanabiliriz.

“yollar/ web.php ”:

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

Bilmeniz Gereken Laravel Atalet İpuçları ve Püf Noktaları

Artık Laravel, Inertia ve Tailwind CSS ile oluşturulmuş çalışan bir SPA'mız var. Ancak atalet, çok daha fazlasını başarmamıza yardımcı olabilir. Hem geliştiricilere hem de uygulama ziyaretçilerine yardımcı olacak bazı Atalet tekniklerini edinmenin zamanı geldi.

URL'ler oluşturuluyor

Laravel rotalarımıza onu kullanmadan isimler eklediğimizi fark etmişsinizdir. Atalet, rotanın tamamını manuel olarak yazmak yerine, adlandırılmış rotalarımızı bileşenlerimizde kullanmamıza izin verir.

Bunu Ziggy paketini projemize kurarak başarabiliriz:

 composer require tightenco/ziggy

Ardından "resources/js/app.js"ye gidin ve şu şekilde güncelleyin:

 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); }, });

“ /resources/views/app.blade.php ” adresine gidin ve başlığı @route direktifi ile güncelleyin:

 <!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>

… ve aşağıdaki iki terminal komutuna basarak NPM paketlerinizi yenileyin:

 npm install && npm run dev

Bu paket, Atalet bileşenlerimizde adlandırılmış rotaları kullanmamıza izin veriyor, bu yüzden Index.vue'ye gidelim ve eski manuel rotayı kaldıralım ve verileri normal bir şekilde kontrolörümüzdeymiş gibi geçirirken rota adıyla değiştirelim.

Bunu değiştireceğiz:

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

…Bununla:

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

Bu bize sahip olduğumuz davranışın tamamen aynısını verecektir, ancak daha geliştirici dostudur ve rotanız birçok parametre beklediğinde son derece yararlıdır.

İlerleme Göstergeleri

Bu, Inertia.js'nin en güzel özelliklerinden biridir; SPA etkileşimli bir kullanıcı deneyimi sağladığından, bir isteğin yüklenip yüklenmediği konusunda sürekli geri bildirim almak, uygulamaya harika bir katkı olacaktır. Bu, Inertia'nın sunduğu ayrı bir kitaplık ile gerçekleştirilebilir.

“@inertiajs/progress” kitaplığı, Atalet olaylarına göre yükleme göstergelerini koşullu olarak gösteren NProgress'i çevreleyen bir sarmalayıcıdır. Bunun perde arkasında nasıl çalıştığını gerçekten bilmenize gerek yok, o yüzden hadi çalıştıralım.

Bu kütüphaneyi aşağıdaki terminal komutuyla kurabiliriz:

 npm install @inertiajs/progress

Kurulduktan sonra, onu " resources/js/app.js " içine almamız gerekiyor.

 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 });

Bu, bir yükleme çubuğunu ve bir yükleme döndürücüyü siyah renkte gösterecektir, ancak rengi, Inertia.js ilerleme göstergesi belgelerinde bulunabilen diğer yararlı seçeneklerle birlikte değiştirebiliriz.

Kaydırma Yönetimi

Bazı durumlarda, aynı kaydırma konumunu koruyarak yeni bir sayfaya gitmek isteyebilirsiniz. Kullanıcıların yorum bırakmasına izin verirseniz buna ihtiyacınız olabilir; bu, bir form gönderecek ve yeni yorumu veritabanından bileşeninize yükleyecektir; bunun kullanıcı kaydırma konumunu kaybetmeden olmasını isteyeceksiniz. Atalet bizim için bununla ilgilenir.

Bizim durumumuzda, bunu Index.vue'daki <Link> etiketimize uygulayalım. Inertia'nın <Link> özelliği ile farklı bir sayfaya yönlendirirken kaydırma konumunu korumak için tek yapmamız gereken, < <Link> > öğesine preserve-scroll niteliğini eklemektir:

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

SEO İpuçları

SPA'ların doğuşundan bu yana, insanlar arama motoru optimizasyonu (SEO) ile ilgileniyor. SPA yaklaşımını kullanırsanız, arama motorlarının web uygulamanızı taramakta zorlanacağı yaygın olarak bilinir, çünkü her şey istemci tarafında işlenir, bu da web sitenizin arama sonuçlarının en üstünde gösterilmemesine neden olur; yine de, nasıl oluyor da Facebook ve Github gibi popüler platformlar artık SPA'lar ve SEO'da hala iyi performans gösteriyor?

Eh, bu bir görev değil: artık imkansız. Atalet, SPA'nızın SEO dostu olmasına yardımcı olacak birkaç çözüm sunuyor.

Laravel ve Vite ile Inertia Vue SSR

Arama motorları, içeriği tanımlamak için her zaman web sitenizde HTML arar; ancak URL'lerinizde HTML yoksa bu iş daha da zorlaşır. SPA'ları geliştirirken, sayfanızda sahip olduğunuz tek şey JavaScript ve JSON'dur. Atalet, uygulamanıza ekleyebileceğiniz bir Sunucu Tarafı Oluşturma (SSR) özelliğini kullanıma sundu. Bu, uygulamanızın sunucuda bir ilk sayfa ziyaretini önceden oluşturmasına ve ardından işlenen HTML'yi tarayıcıya göndermesine olanak tanır. Bu, kullanıcıların sayfalarınızı tamamen yüklenmeden önce görmelerini ve bunlarla etkileşimde bulunmalarını sağlar ve arama motorlarının sitenizi dizine ekleme süresini kısaltmak gibi başka avantajları da vardır.

Nasıl çalıştığını özetlemek gerekirse, Atalet, bir Node.js sunucusunda çalışıp çalışmadığını belirleyecek ve bileşen adlarını, özellikleri, URL'yi ve varlık sürümünü HTML'ye işleyecektir. Bu, kullanıcıya ve arama motoruna sayfanızın sunduğu hemen hemen her şeyi sağlayacaktır.

Ancak, Laravel ile uğraştığımız için bu pek mantıklı değil çünkü Laravel bir PHP çerçevesidir ve bir Node.js sunucusunda çalışmaz. Bu nedenle, isteği, sayfayı işleyecek ve HTML'yi döndürecek olan bir Node.js hizmetine ileteceğiz. Bu, Laravel Vue uygulamamızı varsayılan olarak SEO dostu yapacaktır.

First, we need to install the Vue.js SSR npm package:

 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>

Tüm sayfalar için global bir başlık da ekleyebiliriz, bu, uygulamanızın adını her sayfada başlığın yanına ekleyecektir. Bunu zaten app.js dosyasında yaptık:

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

Bu, uygulamamızın ana sayfasına bir başlıkla <head title="Homepage"> eklersek, bunun şu şekilde işleneceği anlamına gelir: <title>Home - My App</title> .

Uygulamanızı İzleme

Hız, web sitenizdeki SEO performansını optimize etmede en önemli faktörlerden biridir. Web siteniz için WordPress kullanıyorsanız, bu nedenle Kinsta APM, uygulamanızı hareket halindeyken izlemenize ve yakından takip etmenize yardımcı olacaktır. WordPress performans sorunlarını belirlemenize yardımcı olur ve Kinsta tarafından barındırılan tüm sitelerde ücretsiz olarak kullanılabilir.

Özet

Inertia.js, mevcut en önemli teknolojilerden biridir; laravel ile karıştırın ve PHP ve JavaScript ile oluşturulmuş modern bir Tek Sayfa uygulamasına sahip olun. Laravel'in yaratıcısı Taylor Otwell, Inertia ile o kadar ilgileniyor ki Laravel, Inertia ve SSR destekli en popüler başlangıç ​​kitleri Laravel Breeze ve Jetstream'i piyasaya sürdü.
Bu kılavuzda Inertia.js'yi kullanmaya nasıl başlayabileceğinizi ve modern bir blog web ap'si oluşturmak için onu Laravel, Vue.js ve Tailwind CSS ile nasıl kullanacağınızı görün Tweet için Tıklayın
Bir Laravel hayranıysanız veya profesyonel bir geliştiriciyseniz, Inertia.js şüphesiz gözünüze çarpacaktır. Bu eğitimde, sadece birkaç dakika içinde çok basit ve anlaşılır bir blog oluşturduk. Atalet hakkında öğrenilecek çok şey var ve bu, birçok makale ve eğitimin yalnızca ilki olabilir.

Laravel hakkında başka neyi keşfetmemizi istersiniz? Aşağıdaki yorumlar bölümünde bize bildirin.