Vue.js Projelerinde Nuxt Olmadan Server-Side Rendering (SSR) Nasıl Uygulanır?
Merhaba! Fatih Soysal olarak, bugün sizlere Vue.js projelerinizde Nuxt.js kullanmadan Server-Side Rendering (SSR) nasıl uygulanacağını detaylı bir şekilde anlatacağım. Nuxt.js harika bir framework olsa da, bazen daha fazla kontrol ve esneklik için kendi SSR çözümünüzü kurmanız gerekebilir. Bu makalede, bu süreci adım adım ele alacağız. İleri seviye Vue.js bilginiz olduğunu varsayarak anlatacağım.
Neden Nuxt Olmadan SSR?
Nuxt.js, SSR için mükemmel bir çözüm sunar. Ancak, mevcut bir projeyi Nuxt’a taşımak veya Nuxt’ın sunduğu yapılandırmalarla sınırlı kalmak istemeyebilirsiniz. Bazı durumlarda, tam kontrol ve özelleştirme imkanı sunan kendi SSR çözümünüzü oluşturmak daha uygun olabilir. Özellikle büyük ve karmaşık projelerde bu avantaj sağlar. Bu nedenle, Vue.js’in sunduğu olanakları kullanarak kendi SSR sistemimizi oluşturacağız.
Gerekli Kütüphaneler
Öncelikle, SSR için gerekli kütüphaneleri projemize eklememiz gerekiyor. Bunlar arasında, Vue.js’in server-side render’ı için kullanılan vue-server-renderer öne çıkar. Ayrıca, HTTP isteklerini işlemek için express.js (veya benzer bir framework) kullanacağız. Paket yöneticinizi kullanarak aşağıdaki kütüphaneleri yükleyin:
npm install express vue-server-renderer
Server-Side Render Oluşturma
Şimdi, temel bir SSR sunucusu oluşturabiliriz. Aşağıdaki kod, bir Express.js sunucusu ve vue-server-renderer kullanarak Vue.js bileşenini sunucu tarafında render eder:
const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
// ... (renderer oluşturma ve bundle yükleme işlemleri) ...
const app = express();
app.get('*', async (req, res) => {
try {
const context = { url: req.url };
const html = await renderer.renderToString(context);
res.send(${html}