Orijinal olarak hafiz.dev‘de yayımlanmıştır.
Inertia.js v3, 25 Mart’ta stabil hale geldi. Duyuruyu kaçırdıysanız, bu gerçek bir büyük sürüm, içi boş bir “büyük” artırmadan çok daha fazlası. Axios kullanımdan kalktı, tek çıkış formatı ESM, React 18 ve Svelte 4 desteklenmiyor ve bazı olay isimleri ve API’ler değişti. Eğer güncelleme kılavuzunu okumazsanız, ayar dosyası yapısındaki değişiklikler sizi şaşırtabilir.
İyi haber: v3 gerçekten daha iyi. Paket boyutu daha küçük, SSR (Sunucu Tarafı Render) geliştirme modunda bağımsız bir Node.js işlemi olmadan çalışıyor ve iki yeni API (useHttp hook ve iyimser güncellemeler) önceki karmaşık çözüm gereksinimlerini ortadan kaldırıyor. Durumu değerlendirmek için güncellemeyi ertelediyseniz, bu yazı tam size göre.
Ayrıca, Laravel 12’den 13’e geçiş işlemiyle de benzer bir süreçten geçtik, bu tamamen uyumlu bir güncellemeydi. Inertia v3 farklı. Değişikliklere dokunmadan önce gerçekten okumaya değer.
<h2>
<a name="whats-actually-new-in-v3" href="#whats-actually-new-in-v3"></a>
v3'te Gerçekten Ne Yenilik Var?
</h2>
<p>Ne tür kırılmalar olduğunu anlamadan önce, yükseltme neden istenir, buna bakalım.</p>
<p><strong>Vite eklentisi.</strong> Bu en büyük yaşam kalitesi değişikliğidir. Önceden bir Inertia uygulaması kurmak, bir çözüm geri çağrısı, başlangıç geri çağrısı ve kendi konfigürasyonu ile ayrı bir SSR giriş noktası yazmayı gerektiriyordu. Şimdi <code>@inertiajs/vite</code> kurulumu yaparak, giriş noktanız yalnızca bir <code>createInertiaApp()</code> çağrısı ile herhangi bir argüman olmadan tek bir satıra indirgenebiliyor. Sayfa çözümü, kod parçalama ve SSR yapılandırması otomatik olarak gerçekleşiyor. Bu, belgelerden kopyala-yapıştır yaptığınız ve yıllarca unutabileceğiniz şaşırtıcı sayıda boilerplate'i ortadan kaldırıyor.</p>
<p><strong>Geliştirme modunda SSR.</strong> v3'ten önce, SSR uygulaması çalıştırıyorsanız, geliştirirken bunu görmek için bağımsız bir Node.js sunucusu başlatmanız gerekiyordu. Şimdi Vite eklentisi <code>npm run dev</code> komutunun bir parçası olarak bunu otomatik olarak hallediyor. Ek bir işlem yok, hataları daha iyi gösteriyor (SSR başarısız olursa bileşen adı ve URL'yi kaydediyor) ve stil içermeyen içerik için bir düzeltme dahil.</p>
<p><strong><code>useHttp</code> hook.</strong> Bu, gerçek bir boşluğu dolduruyor. v2'de, sayfa ziyaretini tetiklemeyen bir HTTP isteği yapmanız gerektiğinde, örneğin bir arama uç noktasını çağırmak ya da bir API rotasına göndermek gerektiğinde, Axios ya da ham fetch kullanmak zorunda kalıyordunuz ve <code>useForm</code>'dan aldığınız reaktif durumu kaybediyordunuz. Yeni <code>useHttp</code> hook'u, <code>useForm</code> ile aynı geliştirme deneyimini sunuyor (reaktif <code>processing</code>, <code>errors</code>, <code>progress</code>, <code>isDirty</code>) ama düz JSON istekleri için. Sayfa navigasyonu yok, tam Inertia yaşam döngüsü yok.</p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="c1">// Vue örneği</span>const http = useHttp({ query: ” })
function search() {
http.get(‘/api/search‘, { query: http.data.query })
}
<p>Eğer Inertia bileşenlerinizde Axios çağrıları karıştırıyorsanız çünkü temiz bir alternatif yoksa, bu, o örüntüyü tamamen değiştirecektir. Kendi uç noktalarınızı çağırıyorsanız, <a href="https://hafiz.dev/blog/laravel-api-development-restful-best-practices" target="_blank" rel="noopener noreferrer">REST API desenleri buradaki içeriklerle uyumlu</a> olacaktır.</p>
<p><strong>İyimser güncellemeler.</strong> Şimdi Inertia, sunucu doğrulamasından önce bir UI değişikliğini hemen uygulama konusunda birinci sınıf desteğe sahip ve isteğin başarısız olması durumunda otomatik olarak geri alma yapmaktadır. Bu, yönlendirme, <code>useForm</code> ve <code>useHttp</code> üzerinde çalışıyor. Birbirine bağlı iyimser istekler de yönetiliyor, her biri için kendi geri alınma anlığı vardır.</p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="nx">router</span>.optimistic((props) => ({
post: { …props.post, likes: props.post.likes + 1 },
}))
.post(/posts/</span><span class="p">${</span><span class="nx">post</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="s2">/like)
