Inertia.js, sunucu tarafı Laravel uygulamaları ile modern JavaScript ön yüzleri arasında köprü kurar. Laravel yönlendirmesinin, denetleyicilerinin ve middleware’inin verimliliğini, ayrı bir API oluşturmadan Vue veya React ile birlikte sunar. Ancak, Inertia uygulamasını üretime dağıtmak, sadece kodu göndermenin ötesinde bir süreç gerektirir. JavaScript varlıklarınız için bir derleme hattına ihtiyacınız vardır ve sunucu tarafı render alma (SSR) istiyorsanız, PHP uygulamanızın yanında çalışan bir Node.js sürecine ihtiyacınız vardır.
<p>Bu rehber, Inertia.js uygulamalarını Deploynix üzerinde dağıtmanın tam süreç hattını kapsar. Dağıtım kancalarındaki derleme skriptlerinin yapılandırılmasından SSR ayarlarına ve üretimde sık karşılaşılan sorunların giderilmesine kadar her aşmayı ele alacağız.</p>
<h2>
<a name="understanding-the-deployment-pipeline" href="#understanding-the-deployment-pipeline"></a>
Dağıtım Hattını Anlamak
</h2>
<p>Inertia.js uygulamasının iki derleme çıktısı vardır:</p>
<ol>
<li>İstemci tarafı varlıkları: Tarayıcıya sunulan, Vite tarafından derlenmiş JavaScript ve CSS. Bunlar <code>public/build</code> dizinine gider.</li>
<li>SSR paketi (isteğe bağlı): Sayfalarınızı sunucuda render eden, Node.js ile uyumlu bir JavaScript dosyası.</li>
</ol>
<p>Her ikisi de dağıtım sırasında derlenmelidir ve SSR paketi istekleri sunmak için çalışan bir Node.js sürecine ihtiyaç duyar.</p>
<h2>
<a name="configuring-vite-for-production" href="#configuring-vite-for-production"></a>
Üretim için Vite Yapılandırması
</h2>
<p>Laravel, kutudan çıktığı gibi Vite entegrasyonu ile gelir. <code>vite.config.js</code> dosyanız, tercih ettiğiniz framework için yapılandırılmış olmalıdır.</p>
<p><strong>Vue için:</strong><br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vite</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">laravel</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">laravel-vite-plugin</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">vue</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@vitejs/plugin-vue</span><span class="dl">'</span><span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nf">defineConfig</span><span class="p">({</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span>
<span class="nf">laravel</span><span class="p">({</span>
<span class="na">input</span><span class="p">:</span> <span class="dl">'</span><span class="s1">resources/js/app.js</span><span class="dl">'</span><span class="p">,</span>
<span class="na">ssr</span><span class="p">:</span> <span class="dl">'</span><span class="s1">resources/js/ssr.js</span><span class="dl">'</span><span class="p">,</span>
<span class="na">refresh</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">}),</span>
<span class="nf">vue</span><span class="p">({</span>
<span class="na">template</span><span class="p">:</span> <span class="p">{</span>
<span class="na">transformAssetUrls</span><span class="p">:</span> <span class="p">{</span>
<span class="na">base</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span>
<span class="na">includeAbsolute</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="p">}),</span>
<span class="p">],</span>
<span class="p">});</span>
</code></pre>
</div>
<p><strong>React için:</strong><br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">defineConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vite</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">laravel</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">laravel-vite-plugin</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">react</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@vitejs/plugin-react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">export</span> <span class="k">default</span> <span class="nf">defineConfig</span><span class="p">({</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span>
<span class="nf">laravel</span><span class="p">({</span>
<span class="na">input</span><span class="p">:</span> <span class="dl">'</span><span class="s1">resources/js/app.jsx</span><span class="dl">'</span><span class="p">,</span>
<span class="na">ssr</span><span class="p">:</span> <span class="dl">'</span><span class="s1">resources/js/ssr.jsx</span><span class="dl">'</span><span class="p">,</span>
<span class="na">refresh</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">}),</span>
<span class="nf">react</span><span class="p">(),</span>
<span class="p">],</span>
<span class="p">});</span>
</code></pre>
</div>
<p>SSR ile ilgili giriş noktası <code>ssr</code> anahtarının, Vite'e SSR giriş noktanızı nerede bulacağını belirtir. Bu dosya, sunucu tarafı rendering mantığını ayarlar.</p>
<h2>
<a name="setting-up-deployment-hooks" href="#setting-up-deployment-hooks"></a>
Dağıtım Kancalarını Ayarlamak
</h2>
<p>Deploynix, dağıtım sürecinin farklı aşamalarında özel komutları çalıştıran dağıtım kancalarını destekler. Inertia uygulamaları için, dağıtım sırasında varlıkların derlenmesi gerekir.</p>
<h3>
<a name="build-script-in-deployment-hooks" href="#build-script-in-deployment-hooks"></a>
Dağıtım Kancalarında Derleme Skripti
</h3>
<p>Kodunuz dağıtıldıktan sonra, ancak site canlıya geçirilmeden önce çalışan bir dağıtım kancası yapılandırmalısınız:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code><span class="nb">cd</span> /home/deploynix/your-site
<span class="c"># Node.js bağımlılıklarını yükle</span>
npm ci <span class="nt">--production</span><span class="o">=</span><span class="nb">false</span>
<span class="c"># İstemci tarafı varlıklarını derle</span>
npm run build
<span class="c"># SSR paketi derle (eğer SSR kullanıyorsanız)</span>
npm run build:ssr
</code></pre>
</div>
<p><strong>Neden <code>npm ci</code> yerine <strong><code>npm install</code></strong>?</strong></p>
<p><code>npm ci</code>, bağımlılıkları <code>package-lock.json</code> dosyanızdaki gibi kesin olarak yükler, bu da tekrar edilebilir derlemeler sağlar. CI/CD ortamlarında <code>npm install</code>’dan daha hızlıdır çünkü bağımlılık çözümleme adımını atlar. <code>--production=false</code> bayrağı, derleme adımında gereksinim duyulan devDependencies (Vite, Vue derleyici vb.)’nin yüklenmesini sağlar.</p>
<p><strong>Önemli:</strong> <code>package-lock.json</code> dosyanızın depozitinize dahil edildiğinden emin olun. Olmadan <code>npm ci</code> başarısız olur.</p>
<h3>
<a name="optimizing-build-times" href="#optimizing-build-times"></a>
Derleme Sürelerini Optimize Etme
</h3>
<p>Varlık derlemeleri büyük uygulamalar için 30-60 saniye veya daha uzun sürebilir. Dağıtım sırasında ekipmanın sürelerini minimize etmek için stratejiler:</p>
<p><strong>node_modules'ı önbellekleme:</strong> Eğer Node.js bağımlılıklarınıza değişiklik yapılmadıysa, <code>npm ci</code> adımını atlayabilirsiniz. <code>node_modules</code> dizininin var olup olmadığını kontrol edin ve <code>package-lock.json</code>'un son yüklemeden beri değişip değişmediğini kontrol edin:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code><span class="c"># Dağıtım kancanızın içeriğinde</span>
<span class="k">if</span> <span class="o">[</span> <span class="o">!</span> <span class="nt">-d</span> <span class="s2">"node_modules"</span> <span class="o">]</span> <span class="o">||</span> <span class="o">[</span> <span class="s2">"package-lock.json"</span> <span class="nt">-nt</span> <span class="s2">"node_modules/.package-lock.json"</span> <span class="o">]</span><span class="p">;</span> <span class="k">then</span>
npm ci <span class="nt">--production</span><span class="o">=</span><span class="nb">false</span>
<span class="k">fi</span>
npm run build
</code></pre>
</div>
<p><strong>Deploynix’in sıfır kesinti ile dağıtımını kullanın:</strong> Deploynix, sıfır kesinti ile dağıtımları destekler; bu, derlemenin yeni bir sürüm dizininde gerçekleştiği ve önceki sürümün trafiği devam ettirdiği anlamına gelir. Geçiş, yalnızca derleme başarıyla tamamlandıktan sonra gerçekleşir.</p>
<h2>
<a name="setting-up-serverside-rendering" href="#setting-up-serverside-rendering"></a>
Sunucu Tarafı Render'ı Ayarlamak
</h2>
<p>SSR, uygulamanızın ilk sayfa yükleme performansını ve SEO’yu geliştirir. SSR olmadan, tarayıcı bir boş HTML kabuğu alır ve içeriği render etmek için JavaScript yükleyip ayrıştırması gerekir. SSR ile sunucu, tamamen render edilmiş bir HTML gönderir ve JavaScript, etkileşim için bunu kurar.</p>
<h3>
<a name="the-ssr-entry-point" href="#the-ssr-entry-point"></a>
SSR Giriş Noktası
</h3>
<p><strong>Vue için SSR giriş noktası (</strong><code>resources/js/ssr.js</code><strong>):</strong><br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">createSSRApp</span><span class="p">,</span> <span class="nx">h</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">renderToString</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue/server-renderer</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">createInertiaApp</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@inertiajs/vue3</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">createServer</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@inertiajs/vue3/server</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">resolvePageComponent</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">laravel-vite-plugin/inertia-helpers</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">route</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../../vendor/tightenco/ziggy</span><span class="dl">'</span><span class="p">;</span>
<span class="nf">createServer</span><span class="p">((</span><span class="nx">page</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">createInertiaApp</span><span class="p">({</span>
<span class="nx">page</span><span class="p">,</span>
<span class="na">render</span><span class="p">:</span> <span class="nx">renderToString</span><span class="p">,</span>
<span class="na">title</span><span class="p">:</span> <span class="p">(</span><span class="nx">title</span><span class="p">)</span> <span class="o">=></span> <span class="s2">`</span><span class="p">${</span><span class="nx">title</span><span class="p">}</span><span class="s2"> - Your App`</span><span class="p">,</span>
<span class="na">resolve</span><span class="p">:</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">resolvePageComponent</span><span class="p">(</span>
<span class="s2">`./Pages/</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">.vue`</span><span class="p">,</span>
<span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nf">glob</span><span class="p">(</span><span class="dl">'</span><span class="s1">./Pages/ /*.vue</span><span class="dl">'</span><span class="p">),</span>
<span class="p">),</span>
<span class="nf">setup</span><span class="p">({</span> <span class="nx">App</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="nx">plugin</span> <span class="p">})</span> <span class="p">{</span>
<span class="k">return</span> <span class="nf">createSSRApp</span><span class="p">({</span> <span class="na">render</span><span class="p">:</span> <span class="p">()</span> <span class="o">=></span> <span class="nf">h</span><span class="p">(</span><span class="nx">App</span><span class="p">,</span> <span class="nx">props</span><span class="p">)</span> <span class="p">})</span>
<span class="p">.</span><span class="nf">use</span><span class="p">(</span><span class="nx">plugin</span><span class="p">)</span>
<span class="p">.</span><span class="nf">mixin</span><span class="p">({</span>
<span class="na">methods</span><span class="p">:</span> <span class="p">{</span>
<span class="na">route</span><span class="p">:</span> <span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">params</span><span class="p">,</span> <span class="nx">absolute</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">route</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">params</span><span class="p">,</span> <span class="nx">absolute</span><span class="p">,</span> <span class="nx">page</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">ziggy</span><span class="p">),</span>
<span class="p">},</span>
<span class="p">});</span>
<span class="p">},</span>
<span class="p">}),</span>
<span class="p">);</span>
</code></pre>
</div>
<p><strong>React için SSR giriş noktası (</strong><code>resources/js/ssr.jsx</code><strong>):</strong><br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="k">import</span> <span class="nx">ReactDOMServer</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">react-dom/server</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">createInertiaApp</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@inertiajs/react</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="nx">createServer</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@inertiajs/react/server</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">resolvePageComponent</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">laravel-vite-plugin/inertia-helpers</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">route</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../../vendor/tightenco/ziggy</span><span class="dl">'</span><span class="p">;</span>
<span class="nf">createServer</span><span class="p">((</span><span class="nx">page</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">createInertiaApp</span><span class="p">({</span>
<span class="nx">page</span><span class="p">,</span>
<span class="na">render</span><span class="p">:</span> <span class="nx">ReactDOMServer</span><span class="p">.</span><span class="nx">renderToString</span><span class="p">,</span>
<span class="na">title</span><span class="p">:</span> <span class="p">(</span><span class="nx">title</span><span class="p">)</span> <span class="o">=></span> <span class="s2">`</span><span class="p">${</span><span class="nx">title</span><span class="p">}</span><span class="s2"> - Your App`</span><span class="p">,</span>
<span class="na">resolve</span><span class="p">:</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">resolvePageComponent</span><span class="p">(</span>
<span class="s2">`./Pages/</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">.jsx`</span><span class="p">,</span>
<span class="k">import</span><span class="p">.</span><span class="nx">meta</span><span class="p">.</span><span class="nf">glob</span><span class="p">(</span><span class="dl">'</span><span class="s1">./Pages/ /*.jsx</span><span class="dl">'</span><span class="p">),</span>
<span class="p">),</span>
<span class="na">setup</span><span class="p">:</span> <span class="p">({</span> <span class="nx">App</span><span class="p">,</span> <span class="nx">props</span><span class="p">})</span> <span class="o">=></span> <span class="p">{</span>
<span class="nb">global</span><span class="p">.</span><span class="nx">route</span> <span class="o">=</span> <span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">params</span><span class="p">,</span> <span class="nx">absolute</span><span class="p">)</span> <span class="o">=></span>
<span class="nf">route</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">params</span><span class="p">,</span> <span class="nx">absolute</span><span class="p">,</span> <span class="nx">props</span><span class="p">.</span><span class="nx">initialPage</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">ziggy</span><span class="p">);</span>
<span class="k">return</span> <span class="p">;</span>
<span class="p">},</span>
<span class="p">}),</span>
<span class="p">);</span>
</code></pre>
</div>
<h3>
<a name="building-the-ssr-bundle" href="#building-the-ssr-bundle"></a>
SSR Paketini Oluşturmak
</h3>
<p>SSR yapı skriptini <code>package.json</code> dosyanıza ekleyin:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight json"><code><span class="p">{</span>
<span class="w"></span><span class="nl">"scripts"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"></span><span class="nl">"build"</span><span class="p">:</span><span class="w"> </span><span class="s2">"vite build"</span><span class="p">,</span>
<span class="w"></span><span class="nl">"build:ssr"</span><span class="p">:</span><span class="w"> </span><span class="s2">"vite build --ssr"</span><span class="w"></span>
<span class="p">}</span><span class="w"></span>
<span class="p">}</span><span class="w"></span>
</code></pre>
</div>
<p>SSR yapısı, <code>bootstrap/ssr/ssr.js</code> (veya Vite yapılandırmanızın çıkış yaptığı yere) bir dosya oluşturur. Bu dosya, sunucuda çalışabilecek bir Node.js uyumlu pakettir.</p>
<h3>
<a name="running-the-ssr-server" href="#running-the-ssr-server"></a>
SSR Sunucusunu Çalıştırmak
</h3>
<p>SSR sunucusu sürekli bir süreç olarak çalışmalıdır. Deploynix üzerinde, bunu bir daemon olarak yapılandırın:</p>
<ul>
<li>Komut: <code>node bootstrap/ssr/ssr.js</code></li>
<li>Dizin: Site dizininiz</li>
<li>Kullanıcı: <code>deploynix</code></li>
</ul>
<p>Deploynix bu daemon’ı Supervisor ile yönetir, böylelikle çökmesi durumunda kendisini otomatik olarak yeniden başlatır.</p>
<p>SSR sunucusu varsayılan olarak 13714 portunu dinler. Laravel, sunucudan sayfaları render etmek için onunla dahili olarak iletişim kurar ve HTML’yi istemciye gönderir.</p>
<h3>
<a name="restarting-the-ssr-server-during-deployments" href="#restarting-the-ssr-server-during-deployments"></a>
Dağıtım Sırasında SSR Sunucusunu Yeniden Başlatma
</h3>
<p>Horizon'da olduğu gibi, SSR sunucusu JavaScript kodunuzu bellek içine yükler. Yeni kod dağıtıldıktan sonra, değişiklikleri almak için SSR sürecini yeniden başlatmanız gerekir.</p>
<p>Dağıtım kancanıza bir yeniden başlatma adımı ekleyin:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code><span class="c"># Derleme adımları</span>
npm ci <span class="nt">--production</span><span class="o">=</span><span class="nb">false</span>
npm run build
npm run build:ssr
<span class="c"># SSR'yi yeniden başlat (Deploynix'in Supervisor'u yeniden başlatmayı yönetecek)</span>
php artisan inertia:stop-ssr
</code></pre>
</div>
<p>SSR süreci durduktan sonra, Supervisor otomatik olarak yeni yapı ile yeni bir örnek başlatacaktır.</p>
<h2>
<a name="asset-versioning" href="#asset-versioning"></a>
Varlık Versiyonlaması
</h2>
<p>Vite, varlık dosyalarının adlarına içerik hash'leri ekler (ör. <code>app-BxH7a3C4.js</code>). Bu, tarayıcıların her zaman varlıklarınızın en son sürümünü yüklemesini sağlar. Vite manifest dosyası (<code>public/build/manifest.json</code>), orijinal dosya adları ile hash'lenmiş versiyonları arasında bir eşleme yapar.</p>
<p><strong>Üretimde nasıl çalışır:</strong></p>
<ol>
<li>Vite, varlıklarınızı içerik hash'leri ile derler.</li>
<li>Manifest dosyası eşlemeyi kaydeder.</li>
<li>Laravel'in <code>@vite</code> Blade direktifi manifesti okur ve doğru <code>and</code> etiketlerini oluşturur.</li>
<li>Tarayıcılar varlıkları agresif bir şekilde önbelleğe alır çünkü hash, içerik değiştiğinde değişir.</li>
</ol>
<p><strong>Versiyonlama ile ilgili yaygın sorunlar:</strong></p>
<p><strong>Dağıtımdan sonra eski varlıkların saklanması:</strong> Kullanıcılar eski sayfanızı önbellekte sakladıysa, HTML’leri eski varlık URL'lerine başvurur. Bu varlıklar (çünkü yalnızca yeni hash'lenmiş versiyonlar vardır) silindiğinde, kullanıcılar bozuk sayfalar görür. Çözüm: Önceki dağıtımın varlıklarını geçiş süresince mevcut tutun. Deploynix’in sıfır kesinti ile dağıtımı, bu geçişte önceki sürümü tam olarak aktif hale gelene kadar korur.</p>
<p><strong>CDN önbellek sorunları:</strong> Bir CDN kullanıyorsanız, dağıtımdan sonra önbelleği temizleyin veya CDN'nizi Nginx'in ayarladığı önbellek başlıklarını dikkate alacak şekilde yapılandırın. Varlık dosyası adları içerik hash'lerini içerdiği için, CDN önbelleklemesi mükemmel çalışır, yeter ki adın hash'ini dosya adından çıkarmayın.</p>
<h2>
<a name="troubleshooting-common-issues" href="#troubleshooting-common-issues"></a>
Yaygın Sorunların Giderilmesi
</h2>
<h3>
<a name="unable-to-locate-file-in-vite-manifest" href="#unable-to-locate-file-in-vite-manifest"></a>
"Vite manifestinde dosya bulamıyorum"
</h3>
<p><strong>Semptom:</strong> <code>Illuminate\Foundation\ViteException: Vite manifestinde dosya bulamıyorum</code></p>
<p><strong>Neden:</strong> Vite manifest dosyası yoktur çünkü varlıklar henüz derlenmemiştir.</p>
<p><strong>Çözüm:</strong> Sunucuda <code>npm run build</code> çalıştırın. Dağıtımdan sonra bunu görüyorsanız, dağıtım kancanızın başarıyla build adımını çalıştırdığını doğrulayın. Deploynix’te dağıtım günlüklerini kontrol edin.</p>
<h3>
<a name="ssr-process-crashes-on-startup" href="#ssr-process-crashes-on-startup"></a>
SSR Süreci Başlangıçta Çöküyor
</h3>
<p><strong>Semptom:</strong> SSR daemon'ı sürekli yeniden başlatıyor ve Supervisor günlükleri JavaScript hataları gösteriyor.</p>
<p><strong>Yaygın nedenler:</strong></p>
<ul>
<li>Eksik Node.js modülleri. <code>npm ci</code> adımının SSR yapımından önce çalıştığını doğrulayın.</li>
<li>Uyumsuz Node.js sürümü. Sunucudaki Node.js sürümünün geliştirme ortamınızdaki ile eşleştiğini doğrulayın.</li>
<li>SSR bağlamında kullanılan yalnızca tarayıcıya özgü API'ler. <code>window</code>, <code>document</code> veya <code>localStorage</code>'yi referans alan kod, Node.js SSR ortamında çöker.</li>
</ul>
<p><strong>Yalnızca tarayıcıya özgü API'ler için çözüm:</strong></p>
<p>Tarayıcıya özgü kodu koruma altına alın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="c1">// Vue bileşenlerinde</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">onMounted</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">vue</span><span class="dl">'</span><span class="p">;</span>
<span class="nf">onMounted</span><span class="p">(()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// Bu sadece tarayıcıda çalışır, SSR sırasında değil</span>
<span class="nb">window</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">scroll</span><span class="dl">'</span><span class="p">,</span> <span class="nx">handleScroll</span><span class="p">);</span>
<span class="p">});</span>
</code></pre>
</div>
<p>React bileşenlerinde de aynı şekilde yapılabilir.</p>
<h3>
<a name="hydration-mismatches" href="#hydration-mismatches"></a>
Hidratasyon Uyuşmazlıkları
</h3>
<p><strong>Semptom:</strong> Hidratasyon uyumsuzlukları ile ilgili konsol uyarıları. Sunucu tarafından render edilen HTML, istemcinin render ettiği ile uyuşmuyor.</p>
<p><strong>Yaygın nedenler:</strong></p>
<ul>
<li>Sunucu ve istemci arasında farklılık gösteren tarih/saat formatları.</li>
<li>Rastgele içerikler (rastgele kimlikler, karıştırılmış listeler).</li>
<li>İlk renderda kullanılan tarayıcıya özgü veriler (ekran boyutu, kullanıcı ajanı gibi).</li>
</ul>
<p><strong>Çözüm:</strong> Bileşenlerinizin sunucu veya istemcide çalışıyor olmasına bakılmaksızın ilk render sırasında aynı çıktıyı vermesini garanti edin. Tarayıcıya bağımlı render işlemlerini yalnızca istemcide çalışan yaşam döngüsü kancalarına taşıyın.</p>
<h3>
<a name="slow-ssr-rendering" href="#slow-ssr-rendering"></a>
Yavaş SSR Render'ı
</h3>
<p><strong>Semptom:</strong> İlk sayfa yüklemeleri, SSR etkinleştirildiğinde, etkinleştirilmediğinden daha yavaş.</p>
<p><strong>Olası nedenler:</strong></p>
<ul>
<li>SSR süreci yetersiz kaynaklı (yeterli bellek veya CPU yok).</li>
<li>Render sırasında ağır hesaplama gerektiren karmaşık bileşenler.</li>
<li>SSR sırasında dış API çağrıları.</li>
</ul>
<p><strong>Çözüm:</strong> SSR render'nızı profil oluşturun ve darboğazları belirleyin. Daemon'ın kullanılabilir bellek miktarını artırın. Sunucuda render sırasında dış API çağrılarından kaçının; bunun yerine Inertia'nın ertelenen prop'larını veya tembel veri yüklemelerini kullanın.</p>
<h2>
<a name="performance-optimization-tips" href="#performance-optimization-tips"></a>
Performans Optimizasyonu İpuçları
</h2>
<p><strong>Kod bölerken:</strong> Inertia, sayfa bileşeni başına otomatik olarak kod böler. Her sayfa, yalnızca ihtiyaç duyduğu JavaScript'i yükler, bu da ilk paket boyutunu azaltır.</p>
<p><strong>Ön Yükleme:</strong> Kullanıcı tıkladıktan önce, bir sonraki sayfanın verilerini yüklemek için Inertia'nın bağlantı bileşenini önceliklendirin:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code>Users</code></pre>
</div>
<p><strong>Varlık optimizasyonu:</strong> Üretim derlemenizi optimize etmek için Vite’i yapılandırın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="k">export</span> <span class="k">default</span> <span class="nf">defineConfig</span><span class="p">({</span>
<span class="na">build</span><span class="p">:</span> <span class="p">{</span>
<span class="na">rollupOptions</span><span class="p">:</span> <span class="p">{</span>
<span class="na">output</span><span class="p">:</span> <span class="p>{</span>
<span class="na">manualChunks</span><span class="p">:</span> <span class="p>{</span>
<span class="na">vendor</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">vue</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">@inertiajs/vue3</span><span class="dl">'</span><span class="p">],</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="p">});</span>
</code></pre>
</div>
<p>Bu, satıcı kütüphanelerini kendi parçalarına ayırır ve bu parçalar daha az sıklıkla değişir, bu nedenle tarayıcılar tarafından daha uzun süre önbelleklenebilir.</p>
<h2>
<a name="conclusion" href="#conclusion"></a>
Sonuç
</h2>
<p>Inertia.js uygulamasının Deploynix'te dağıtımı, üç alana dikkat gerektirir: varlık yapı hattı, SSR süreç yönetimi ve varlık versiyonlaması. Deploynix'in dağıtım kancaları, derleme komutlarınız için doğru entegrasyon noktasını sağlar. Daemon yönetimi, SSR sürecinizi güvenilir bir şekilde çalıştırır. Ve sıfır kesinti ile dağıtım, kullanıcılarınızın geçiş sırasında hiçbir zaman bozuk sayfa görmemesini sağlar.</p>
<p>İşlemleri basit tutmak için SSR olmadan başlayın. SEO veya başlangıç yükleme performansı gerekli hale geldiğinde SSR ekleyin. Dağıtım kancalarınızı bir kez yapılandırın ve sonraki her dağıtım otomatik olarak derleme sürecini yönetir. Sonuç, sunucu tarafından render edilen bir sitenin performans özelliklerine sahip, modern, etkileşimli bir Laravel uygulamasıdır.</p>Kaynak: Orijinal Makale
