Laravel ve React ile Sunucu Tarafında Renderleme (Inertia.js Kullanarak)

“Basit olanı hızlı yap.” – Alan Kay

Modern web uygulamalarının hızlı, SEO dostu ve etkileşimli olması bekleniyor. Geleneksel olarak, ekipler bunu genellikle sorumlulukları ayırarak başarmak için: Laravel’i backend için, React’i frontend için kullanarak gerçekleştirdiler ve arada çok fazla yapıştırma kodu vardı.

Bu ayrım işe yarıyor, ancak bazı maliyetleri de beraberinde getiriyor:

• Yinelenen yönlendirme mantığı
• API bakım yükü
• Kimlik doğrulama ve durum senkronizasyon sorunları
• SEO ve performans ödünleri

Inertia.js bu denklemi değiştiriyor.
Bu makalede, Laravel ve React ile Inertia.js kullanarak Sunucu Tarafı İşlemeden (SSR) nasıl yararlanacağımızı keşfedeceğiz, içsel işleyişini açıklayacağız ve bu yaklaşımın ne zaman mantıklı olduğunu ve ne zaman olmadığını anlayacağız.
Mimaride, akışta ve kullanımdaki detaylara odaklanacağız, kullanıcı arayüzü yazılımına değil.

Sunucu Tarafı İşlemenin Önemi

Müşteri tarafı işlemenin bazı gerçek dezavantajları vardır:

• İlk içerik boyamanın daha yavaş olması
• Ek araçlar olmaksızın kötü SEO
• JavaScript ağırlıklı başlangıç yükleri
• Yavaş ağlarda kötü deneyim

Sunucu tarafı işleme bunu şu şekilde çözüyor:

• İlk sayfayı sunucuda işlemesi
• Tarayıcıya hazır HTML göndermesi
• Sonrasında React’i istemci tarafında etkinleştirmesi

SSR, etkileşimi harcama yapmadan hızlılık + SEO + kullanıcı deneyimi sunar.

Neden Laravel + React ile Inertia.js?

Inertia.js, benzersiz bir orta noktada yer alıyor:

• Geleneksel bir SPA değil
• Sadece Blade uygulaması da değil
• React tabanlı görünümlerle modern bir monolit

Inertia’nın yaptığı şeyler:

• Yönlendirme ve denetleyicileri sunucuda tutar (Laravel)
• Sayfaları oluşturmak için React kullanır
• Ayrı bir API katmanına gerek bırakmaz
• Verileri JSON uç noktaları yerine props olarak aktarır

Sunucu merkezli uygulamalar, istemci tarafında kullanıcı deneyimi ile yazıyorsunuz.

Önemli Noktalar

• Inertia.js, Laravel ve React kullanarak ayrı bir API katmanı oluşturmadan SPA benzeri deneyimler sağlar.
• Sunucu Tarafı İşleme (SSR), ilk sayfa yükleme performansını, SEO’yu ve içerik ağırlıklı uygulamalar için Core Web Vitals’ı geliştirir.
• Laravel, yönlendirme, doğrulama ve yetkilendirme için tek bilgi kaynağı olmaya devam eder.
• React bileşenleri, bağımsız frontend yönlendirmeleri değil, sayfa görünümleri olarak kullanılır.
• Inertia, API sürümlemesi, yinelenen mantık ve aşırı frontend yapılandırması gibi yaygın SPA sorunlarını ortadan kaldırır.
• Inertia ile SSR, paneller, yönetim sistemleri, SaaS uygulamaları ve içerik odaklı platformlar için en iyi şekilde çalışır.
• Bu mimari, geleneksel SPA’lara göre daha basit ve daha kolay bakım yapılabilir bir kod tabanı tutarken iyi ölçeklenir.

İçindekiler

1. Giriş
2. Inertia.js Nedir?
3. Laravel ve React ile SSR Nasıl Çalışır
4. Mimari Genel Görünüm
5. Laravel + Inertia Kurulumu (Kavramsal)
6. Sunucu Tarafı İşleme Akışı
7. Veri Paylaşımı ve Props
8. Yönlendirme ve Navigasyon
9. SEO ve Meta Verilerin İşlenmesi
10. Kimlik Doğrulama ve Oturumlar
11. Frontend, Backend’i Nasıl Kullanır
12. Bu Mimari Neden Mantıklı
13. Dikkat Edilmesi Gerekenler
14. Alabileceğiniz Sonraki Adımlar
15. İlginç Bilgiler
16. SSS
17. Sonuç

1. Giriş

Modern web uygulamaları, genellikle iki tür arasında bir tercih yapmayı gerektirir: sunucu tarafından işlenen uygulamaların sadeliği veya Tek Sayfa Uygulamalarının (SPA) zengin kullanıcı deneyimi. Geleneksel SPAlar, ayrı frontendler, API’ler ve durum yönetimi yoluyla ek karmaşıklık getirirken, klasik sunucu işleme, etkileşimli kullanıcı arayüzleri için kısıtlayıcı hissi verebilir.

Inertia.js bu boşluğu kapatıyor.

Inertia.js ile Laravel, yönlendirme ve verilerden sorumlu kalırken, React herhangi bir ayrı API katmanı gerektirmeksizin render etmeyi üstleniyor. Sunucu Tarafı İşleme (SSR) ile birleştiğinde, bu yaklaşım hızlandırılmış ilk yüklemeler, daha iyi SEO ve içerik ağırlıklı sayfalar için iyileştirilmiş Core Web Vitals sunuyor.

Bu makalede, Laravel ve React ile Inertia.js kullanarak Sunucu Tarafı İşlemenin nasıl çalıştığını ve neden geleneksel SPA mimarilerine pratik ve sürdürülebilir bir alternatif olduğunu açıklıyoruz.

2. Inertia.js Nedir?

Inertia.js bir bağlantı katmanı, bir çatı değil.
Şu imkanları sağlar:

• Laravel denetleyicilerini sayfa uç noktası olarak kullanma
• Blade görünümleri yerine React bileşenleri render etme
• Tam sayfa yeniden yüklemeleri olmaksızın gezinme
• REST veya GraphQL API’leri oluşturma ve yönetme yükünden kurtulma
• Inertia Laravel veya React’in yerini almaz, onları düzgün bir şekilde bağlar.

3. Laravel ve React ile SSR Nasıl Çalışır

Yüksek seviyede süreç:

1. Tarayıcı bir sayfa talep eder
2. Laravel denetleyicisi çalışır
3. Inertia, sunucuda bir React sayfası render eder
4. HTML, tarayıcıya döner
5. React, istemcide etkinleşir

Bundan sonra:

• Navigasyon istemci tarafında yönetilir
• Yalnızca veriler (props) değiştirilir
• Tam yeniden yükleme yoktur
• İlk yükleme için SSR, sonrasında SPA davranışı elde edersiniz.

4. Mimari Genel Görünüm

Tarayıcı
  ↓ HTTP isteği
Laravel Yönlendirici
  ↓ Denetleyici
Inertia Yanıtı
  ↓
React Sayfası (SSR)
  ↓ HTML
Tarayıcı
  ↓ Etkinleştirme
İstemci tarafı navigasyon

Ana fikir:
Laravel yönlendirme ve verileri sahiplenir. React render etme ve etkileşimi yönetir.

5. Laravel + Inertia Kurulumu (Kavramsal)

Tipik bir kurulum şunları içerir:

• Laravel backend
• Inertia middleware
• Vite ile paketlenmiş React frontend
• Paylaşılan SSR giriş noktası

Önemli detay:
Laravel ile React arasında bir API katmanı yoktur.

Denetleyiciler Inertia yanıtlarını döndürür, JSON değil.

6. Sunucu Tarafı İşleme Akışı

SSR etkinleştirildiğinde:

• Laravel bir Node süreci başlatır (Vite/SSR aracılığıyla)
• React verilen props ile sayfayı render eder
• HTML, yanıta enjekte edilir
• Tarayıcı tamamen render edilmiş bir sayfa alır

Eğer SSR başarısız olursa:

• Inertia, istemci tarafı render etmeye otomatik olarak geçiş yapar

Bu, SSR’nin isteğe bağlı ancak dayanıklı olmasını sağlar.

7. Veri Paylaşımı ve Props

Veri akışı şöyle gerçekleşir:

Denetleyici → Inertia::render() → React props

// Örnek 

namespace App\Http\Controllers;

use Inertia\Inertia;

class DashboardController extends Controller
{
    public function index()
    {
        return Inertia::render('Dashboard', [
            'user' => auth()->user(),
            'stats' => [
                'projects' => 12,
                'tasks' => 87,
            ],
        ]);
    }
}

Burada:

• fetch() yok
• axios yok
• yinelenen veri sözleşmesi yok

Paylaşılan veriler (kimlik bilgisi kullanıcı, flash mesajlar, ayarlar) Inertia middleware aracılığıyla global olarak eklenebilir.
Bu, veri akışını öngörülebilir ve merkezileştirir.

“En iyi mimariler, düşünmeniz gereken şeylerin sayısını azaltır.” – Martin Fowler

8. Yönlendirme ve Navigasyon

Yönlendirme Laravel’de kalır:

/web.php → Denetleyici → React sayfası

Route::get('/dashboard', [DashboardController::class, 'index'])
    ->middleware(['auth']);

Navigasyon:

• bileşenleri kullanır
• Tıklamaları yakalar
• Sadece yeni props ister
• Sayfa durumunu korur

SPA benzeri navigasyon elde edersiniz, ancak SPA karmaşıklığı olmadan.

9. SEO ve Meta Verilerin Yönetimi

SSR ile:

• Arama motorları işlenmiş HTML alır
• Başlıklar ve meta etiketleri hemen görünür
• Sosyal önizlemeler doğru çalışır

Meta yönetimi, React sayfa seviyesinde, ancak sunucu tarafında işlenerek yapılır.
Bu, saf istemci tarafı SPAlarına göre büyük bir avantajdır.

10. Kimlik Doğrulama ve Oturumlar

Inertia’nın en büyük güçlerinden biri.
Çünkü hala Laravel kullanıyorsunuz:

• Oturumlar normal çalışır
• CSRF koruması intact kalır
• Middleware otomatik olarak uygulanır

Hiçbir token üzerinde oynamaya gerek yok.
Kimlik doğrulamayı yeniden yapmaya gerek yok.
İstemci tarafında hileler yok.

“Basitlik, nihai karmaşıklıktır.” – Leonardo da Vinci

11. Frontend, Backend’i Nasıl Kullanır

// resources/js/Pages/Dashboard.jsx

import React from 'react';
import { Head } from '@inertiajs/react';

export default function Dashboard({ user, stats }) {
  return (
    
      Head title="Dashboard" />

      h1>Hoş geldiniz, {user.name}h1>

      ul>
        li>Projeler: {stats.projects}li>
        li>Görevler: {stats.tasks}li>
      ul>
    >
  );
}

Frontend’in perspektifinden:

• Sayfalar props alır
• Eylemler, Inertia aracılığıyla formları gönderir
• Hatalar ve doğrulama otomatik olarak geri döner

Frontend asla:

• Ham API’leri aramaz
• Kimlik doğrulama başlıklarını yönetmez
• Backend URL’leriyle ilgili endişeler taşımaz

Bu, frontend karmaşıklığını büyük ölçüde azaltır.

12. Bu Mimari Neden Mantıklı

• Tek kod tabanı
• Güçlü backend otoritesi
• Varsayılan olarak SEO dostu
• Hızlı ilk yüklemeler
• Minimum yapılandırma
• Ekipler için daha kolay onboarding

Bu nedenle birçok ekip Inertia’yı “eksik halka” olarak tanımlıyor.

13. Dikkat Edilmesi Gerekenler

• Halka açık API’ler için ideal değil
• Frontend ve backend arasında sıkı bağlılık
• SSR için Node gerektirir
• Microservices-ağırlıklı yapılar için uygun değil

Bu, monolit dostu bir mimaridir – ve bu sorun değil.

14. Alabileceğiniz Sonraki Adımlar

• SSR önbellekleme ekleyin
• Kısmi yeniden yüklemeleri uygulayın
• Paylaşılan düzen bileşenleri tanıtın
• Canlandırma performansını optimize edin
• Gerçek zamanlı özellikler için WebSockets ekleyin

15. İlginç Bilgiler

16. SSS

1. Inertia.js bir çatı mı?
Hayır. Sunucu ve frontend çatıları arasında ince bir adaptördür.

2. Vue yerine React kullanabilir miyim?
Evet. Inertia, Vue ve Svelte’yi de destekler.

3. SSR, Javascript olmadan çalışır mı?
İlk render eder, ancak etkileşim için JS gerektirir.

4. Bu, Next.js’den daha iyi mi?
Farklı araçlar. Inertia sunucu merkezli; Next.js frontend merkezlidir.

5. Bu ölçeklenebilir mi?
Evet – çoğu ürün tarzı uygulamalar için.

17. Sonuç

Laravel, React ve Inertia.js ile sunucu tarafında render etme, geleneksel SPAlar ve tamamen ayrılmış mimarilere güçlü bir alternatif sunar.
Yönlendirme, kimlik doğrulama ve verileri sunucuda tutarken UI için React’i kullanarak elde edersiniz:

• Daha hızlı sayfalar
• Daha iyi SEO
• Daha az karmaşıklık
• Daha mutlu ekipler

Ürününüz bir sunucu merkezli modele uygunsa, bu yaklaşım gerçekten üst düzeydir.

Yazar Hakkında: Ankit, AddWebSolution‘da tam yığın geliştiricidir ve PHP, Laravel ve modern frontend araçlarıyla akıllı web çözümleri geliştirir.