"Inertia.js Nedir? Ne İşe Yarar? Nasıl Kullanılır?"

Inertia.js, web geliştirme dünyasında SPA (Single Page Application - Tek Sayfa Uygulaması) benzeri bir deneyim sunmak için geliştirilmiş bir kütüphanedir. Vue.js, React veya Svelte gibi frontend framework'lerle entegre olarak, Laravel veya Rails gibi backend framework’lerini bir araya getirir. Inertia.js, API yazmadan dinamik bir kullanıcı deneyimi sunmayı mümkün kılar. Bu sayede, klasik server-rendered (sunucu tarafında render edilen) uygulamaların avantajlarını koruyarak, modern bir frontend deneyimi sunar.

Inertia.js Nedir?

Inertia.js, bir routing (yönlendirme) kütüphanesi olarak tanımlanabilir. Web uygulamalarında, her sayfa geçişinde tam sayfa yenilenmesi yerine, yalnızca değişen içeriği yükleyerek kullanıcıya daha hızlı bir deneyim sunar. Klasik bir SPA yapısı kurmadan, kullanıcıya SPA benzeri bir geçiş ve hız sunar. Bu yaklaşım, Laravel gibi backend framework’lerle sorunsuz bir şekilde entegre edilerek uygulamanın daha dinamik hale gelmesini sağlar.

Inertia.js Ne İşe Yarar?

Inertia.js, özellikle API katmanı oluşturmadan SPA deneyimi yaşatmak isteyen geliştiricilere kolaylık sağlar. Inertia’nın sağladığı başlıca özellikler:

1. API İhtiyacını Ortadan Kaldırır: Inertia.js, klasik SPA mimarisinde olduğu gibi bir API yapılandırması gerektirmeden frontend ve backend’i birbirine bağlar. Bu, Laravel gibi backend framework'leri kullanarak Vue.js veya React ile SPA deneyimi sağlamayı kolaylaştırır.

2. Sayfa Yenilemeden Geçiş Sağlar: Inertia.js, her sayfa geçişinde yalnızca değişen içeriği güncelleyerek tam sayfa yenilemeden kullanıcıya hızlı bir deneyim sunar. Böylece, SPA benzeri bir deneyim yaşatılırken, klasik MVC yapısı korunur.

3. Frontend ve Backend Entegrasyonu Sağlar: Inertia, backend ve frontend arasında doğal bir bağlantı kurarak geliştiricilerin her iki tarafı da kolayca yönetmesini sağlar. Böylece, Laravel'de tanımlanan controller'lar, doğrudan frontend tarafında render edilebilen component'lerle bağlanır.

4. Yüksek Performans Sunar: Sunucudan yalnızca gerekli verileri çekerek ön yüzden doğrudan yükler. Bu sayede, veri aktarımı minimuma iner ve sayfa yükleme süreleri azalır.

5. Vue.js, React, Svelte Gibi Framework’leri Destekler: Inertia.js, Vue, React ve Svelte gibi modern frontend framework’leriyle uyumlu çalışarak, geliştiricilere istedikleri framework’te çalışabilme esnekliği sunar.

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

1. Inertia.js ile Laravel Projesi Kurulumu

Inertia.js’yi Laravel ile kullanmak için öncelikle projede Vue.js, React veya Svelte kurulmalıdır. Laravel ve Vue örneği üzerinden ilerleyelim:

Adım 1: Laravel Projesini Oluşturun

laravel new inertia-example
cd inertia-example

Adım 2: Inertia.js ve Vue.js Kurulumu

composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@next

Adım 3: Laravel’de Inertia.js Service Provider’ı Yükleyin

php artisan inertia:middleware

Bu komut, App\Http\Middleware\HandleInertiaRequests dosyasını oluşturur ve bu dosya üzerinden sayfa yönlendirmeleri yapılır.

2. Inertia.js Vue.js ile Entegre Edin

Inertia ile Vue.js entegrasyonunu yapmak için app.js dosyasını aşağıdaki gibi yapılandırın:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});

3. Laravel Controller ve Sayfa Yapısını Oluşturun

Inertia.js ile sayfa yönlendirmeleri klasik controller yapısına benzer bir şekilde yapılır:

Örnek Controller:

// app/Http/Controllers/HomeController.php
namespace App\Http\Controllers;

use Inertia\Inertia;

class HomeController extends Controller
{
    public function index()
    {
        return Inertia::render('Home', [
            'message' => 'Inertia.js ile Laravel örneğine hoş geldiniz!',
        ]);
    }
}

Örnek Vue Component: resources/js/Pages/Home.vue dosyasına örnek component yapısını ekleyin:

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
export default {
    props: {
        message: String
    }
}
</script>

4. Routes (Yönlendirme) Tanımlaması

Inertia.js ile yönlendirmeyi Laravel’in web.php dosyasından yönetebilirsiniz:

Route::get('/', [HomeController::class, 'index']);

5. Inertia.js ile Sayfa Geçişleri

Inertia.js’de sayfa geçişleri, Vue, React veya Svelte bileşenleri arasında hızlı geçiş yapılmasını sağlar. Örneğin, başka bir sayfaya geçmek için inertia-link veya Link bileşenlerini kullanabilirsiniz:

<template>
    <div>
        <inertia-link href="/about">Hakkımızda</inertia-link>
    </div>
</template>

Inertia.js Kullanmanın Avantajları

• Zaman Kazandırır: API yapısı oluşturmadan SPA deneyimi sunarak hem geliştirme süresini hızlandırır hem de yönetimi kolaylaştırır.
• Veri İletimini Optimize Eder: Sunucudan yalnızca ihtiyaca göre veri çekilmesi sağlanır, bu da veri iletişim süresini azaltır.
• Frontend-Backend Entegrasyonu: Backend üzerinden yönetilen bir SPA gibi çalışır, frontend ile backend arasında net bir yapı kurar.
• İhtiyaçlara Göre Esneklik: Vue, React ve Svelte ile çalışarak ekiplerin tercihine uygun bir çözüm sunar.

Dezavantajları

• SPA’lar Kadar Esnek Değil: Gerçek bir SPA mimarisi gibi tam bağımsız çalışmaz; sunucu bağımlılığı sürer.
• Orta ve Büyük Projelerde Karmaşıklaşabilir: Çok karmaşık frontend mantıkları gerektiğinde yönetimi zorlaşabilir.

Sonuç

Inertia.js, özellikle küçük ve orta ölçekli projelerde kullanıcıya SPA deneyimi sunarken, Laravel gibi güçlü bir backend framework’ünden tam anlamıyla faydalanmak isteyenler için harika bir araçtır. Büyük projelerde de özellikle iyi optimize edildiğinde güçlü bir performans sağlar. Inertia.js kullanarak SPA benzeri bir deneyim elde edebilir, API yazma ihtiyacını ortadan kaldırabilir ve uygulamanızı kullanıcı dostu bir hale getirebilirsiniz.

Aykhan Gasimzade

Full Stack Developer

Merhaba! Ben Aykhan, 1999 doğumlu bir Azerbaycanlıyım ve 2017 yılından bu yana programlamayla ilgileniyorum. Teknolojinin büyülü dünyası beni her zaman etkilemiştir ve bu merakımı kendi blogumda paylaşarak daha geniş bir kitleyle buluşturmayı amaçlıyorum.