# Inertia.js ile monolitten modern arayüze

> Inertia.js'in ayrı bir API yazmadan SPA hissi verme modelini, Laravel ile entegrasyonunu ve ne zaman doğru seçim olduğunu anlatıyorum.

- Yayın: 2020-09-06
- Kategori: Framework & Kütüphane
- Etiketler: Laravel, Inertia.js
- Okuma süresi: 3 dk okuma
- Kaynak: https://www.muhammetsafak.com.tr/blog/inertia-js-ile-monolitten-modern-arayuze/
- Dil: tr-TR
- Yazar: Muhammet Şafak

---
Bir monolitik Laravel uygulamasını modern bir arayüze taşımak istediğinizde iki seçenek var gibi görünüyor: ya [Blade şablonlarında](/blog/laravel-5-4-ve-blade-ile-bilesen-dusunmek) kalmak ya da ayrı bir [SPA yazıp API üzerinden](/blog/laravel-ile-json-api-uclari-yazmak) bağlamak. İlki bilinen yol; ikincisi büyük bir maliyet — iki ayrı kod tabanı, iki ayrı kimlik doğrulama mekanizması, API sürümleme kararları, deployment karmaşası.

Inertia.js bu iki uç arasında üçüncü bir yol sunuyor. Monolit kalıyor, ama arayüz Vue veya React ile yazılıyor. API tasarlamaya gerek yok.

## Inertia nasıl çalışır?

Inertia, sayfa geçişlerini intercept ediyor. Normal bir bağlantıya tıkladığınızda tarayıcı sunucuya istek atıyor; Inertia bu isteği yakalıyor ve JSON formatında sayfa bileşenini ve verisini alıyor. Tam sayfa yenilenmesi olmuyor, Vue bileşeni yerinde güncelleniyor.

Sunucu tarafında bir `Inertia::render()` çağrısı yeterli:

```php
// app/Http/Controllers/PostController.php
use Inertia\Inertia;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::with('user')
            ->latest()
            ->paginate(15);

        return Inertia::render('Posts/Index', [
            'posts' => $posts,
        ]);
    }

    public function show(Post $post)
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->load('comments.user'),
        ]);
    }
}
```

İstemci tarafında `Posts/Index` bir Vue bileşeni; `props` olarak `posts` geliyor:

```vue
<template>
  <div>
    <article v-for="post in posts.data" :key="post.id">
      <h2>{{ post.title }}</h2>
      <p>{{ post.user.name }}</p>
    </article>

    <Pagination :links="posts.links" />
  </div>
</template>

<script>
export default {
  props: {
    posts: Object,
  },
};
</script>
```

Kimlik doğrulama, middleware, oturum — bunların tamamı Laravel'in kendi mekanizmaları. Ekstra bir şey kurmanıza gerek yok.

## API yazmak zorunda değilsiniz — ama bu bir sınır da

Inertia'nın "API yok" modeli bazı durumları dışarıda bırakıyor. Aynı API'yi başka bir mobil uygulama ya da üçüncü taraf istemci tüketecekse Inertia uygun değil; o zaman gerçekten ayrı bir API yazmanız gerekiyor. Inertia web arayüzüyle aynı Laravel uygulamasını paylaşan tek bir istemci için tasarlanmış.

Bir trade-off daha: sunucu ile istemci birbirine sıkıca bağlı. Bileşen adları, prop yapıları Laravel controller'larında tanımlı. Frontend bağımsız evrim geçiremiyor. Bu bazı takımlar için sorun değil; bazıları için kabul edilemez.

## Shared data ile global veri aktarımı

Her sayfada tekrarlanan veriyi — kimlik doğrulanmış kullanıcı, flash mesajları, global ayarlar — her controller'da ayrı ayrı geçirmek gereksiz. Inertia'nın `share()` mekanizması bunu çözüyor:

```php
// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'success' => $request->session()->get('success'),
            'error'   => $request->session()->get('error'),
        ],
    ]);
}
```

Bu veriler her Inertia yanıtına otomatik ekleniyor; bileşenlerde `$page.props.auth.user` ile erişilebilir. Laravel'deki `View::share()` mantığının Inertia karşılığı bu.

## Blade'den Inertia'ya geçiş stratejisi

Mevcut bir Laravel + Blade projesini tamamen değiştirmeden Inertia'ya geçmek mümkün. İki sistem paralel çalışabiliyor: bazı rotalar Blade döndürürken bazıları Inertia::render döndürüyor. Kademeli geçiş için bu önemli.

Bir ekrandan başlamak, orada Inertia'nın nasıl çalıştığını görmek ve takımın alışmasını beklemek daha güvenli bir yol. Tüm uygulamayı bir günde geçirmek gereksiz risk.

## Livewire ile karşılaştırma

Bu yıl hem Livewire hem de Inertia'yı projelerde kullandım. Fark şu:

Livewire backend odaklı ekipler için tasarlanmış — JavaScript minimum, sunucu render hâkim. Inertia frontend geliştiricisinin sahada olduğu durumlar için daha iyi — tam Vue/React kabiliyetleri kullanılıyor.

Proje bir form ağırlıklı yönetim paneliyse [Livewire](/blog/laravel-livewire-ile-javascript-yazmadan-etkilesim) daha az bileşen yazmamı sağlıyor. Proje karmaşık istemci tarafı etkileşimleri içeriyorsa ya da Vue yazabilecek biri varsa Inertia daha doğal hissettiriyor.

---

Inertia, monolit-SPA tartışmasında keskin bir pozisyon alıyor: büyük ölçekte değil, tek istemci senaryosunda mükemmel bir denge. API tasarlamak gereksiz zaman kaybı gibi hissedilen, ama Blade'in artık yeterli olmadığı noktada tam olarak doğru araç.