Laravel ile modern single page uygulaması geliştirmek için Inertia kullanabilirsiniz. Bunu React, Vue veya Svelte gibi bir frontend frameworkü kullanarak yapabilirsiniz. Inertia, Laravel ve frontend frameworkü arasında bir köprü görevi görür. Laraveli server side işlemleri için kullanırken, client side tarafındaki işlemler için inertia'yı kullanıyoruz.

Peki neden modern bir single page uygulaması geliştirmek isteyelim? Çünkü bu uygulamalar daha hızlı ve daha iyi bir kullanıcı deneyimi sunar. Kullanıcılar sayfa yenileme olmadan uygulamada gezinebilir ve işlemler yapabilirler. Bu da kullanıcıların uygulamayı daha çok sevmesini sağlar. Ayrıca, modern single page uygulamaları daha hızlıdır ve daha az veri kullanır. Bu da kullanıcıların daha az beklemesini ve daha az veri kullanmasını sağlar.

Inertia Kurulumu

Üç farklı kurulum yöntemi var tercih edebileceğiniz. Laravel Jetstream, Laravel Breeze ve manuel kurulum. Laravel Jetstream ve Laravel Breeze ile Inertia'yı hazır bir stack halinde kuruyorsunuz. Biz bu örnekte Laravel Breeze kullanacağız.

Öncelikle composerdan Laravel Breeze'ı yükleyin:

composer require laravel/breeze --dev

Sonra Breeze'ı yükleyin ve kurun:

php artisan breeze:install

php artisan migrate
npm install
npm run dev

Breeze ile kurarken hangi stack ile kurmak istediğinizi soracaktır. Burada size uygun olanı seçebilirsiniz. Biz React kullanacağımız için "React with Inertia" seçiyoruz.

Routes ve Controller

Örnek bir routing ve controller yapısı aşağıdaki gibidir.

web.php

Route::get('/', [PageController::class, 'home'])->name('home');

PageController.php

<?php

namespace App\Http\Controllers;

use App\Models\Form;
use Illuminate\Http\Request;
use Inertia\Inertia;

class PageController extends Controller
{
    public function home(Request $request)
    {
        $data["form"] = Form::with('programs')->get();
        return Inertia::render('Home', $data);
    }
}

Home.js

import { Layout } from "@/Layouts";
import { usePage } from "@inertiajs/react";

export default function Home({ form }) {
  return (
    <Layout>
      <div className="flex flex-1 w-full max-w-screen-lg flex-wrap gap-8">
        {form?.map((form, index) => {
          return (
            <div
              key={index}
              className="flex flex-1 w-full max-w-screen-sm flex-col gap-8 p-12 rounded-md bg-white"
            >
              {form.name}
            </div>
          );
        })}
      </div>
    </Layout>
  );
}

Yukarıdaki örnekteki lifecycle şu şekildedir.

Request -> Routing -> PageController -> Inertia::render -> Home.js -> Response

Açıklamak gerekirse "/" adresine gelen istek öncelikle PageController'ın home metoduna yönlendirilir. Bu methodda form değişkeni Home componentinde gönderilip Inertia::render metodu ile render edilip return ediliyor.

Form değişkenini kullanarak form verilerini ekrana yazdırıyoruz. Bu şekilde Inertia ile Laravel uygulamalarınızda modern single page uygulamaları geliştirebilirsiniz. Bu oldukça basit bir örnektir. Daha karmaşık uygulamalar geliştirebilirsiniz.

Mesela her bir form submit işleminde sayfayı yenilemek yerine Inertia Forms özelliğini useForm hook'u ile kullanarak form submit işlemlerini gerçekleştirebilirsiniz. Bu sayede sayfa yenileme olmadan form submit işlemlerini gerçekleştirebilirsiniz. İhtiyacınız olan özellikleri React ve Inertia'yı kullanarak arkasınada Laravel'i alarak güçlü bir şekilde geliştirebilirsiniz.

Sonuç

Eğer monolitik bir uygulama geliştiriyorsanız ve modern bir single page uygulaması geliştirmek istiyorsanız Inertia kullanabilirsiniz. Inertia, Laravel ve frontend frameworkü arasında bir köprü görevi görür. Bu sayede Laravel ile server-side işlemleri yaparken, frontend tarafında modern bir single-page uygulaması geliştirebilirsiniz. Bu sayede uygulamanız daha hızlı ve daha iyi bir kullanıcı deneyimi sunar. Ayrıca, Inertia ile Laravel uygulamalarınızı daha modüler ve daha kolay bir şekilde geliştirebilirsiniz. Eğer daha fazla bilgi almak isterseniz Inertia sitesini ziyaret edebilirsiniz.

İyi kodlamalar.