Nuxt.js ve Django ile Evrensel (Universal) Uygulama Geliştirme Rehberi

Nuxt.js ve Django ile Evrensel (Universal) Uygulama Geliştirme Rehberi

Giriş: Evrensel Uygulamaların Gücü

Günümüz web uygulamaları, kullanıcı deneyimi, performans ve arama motoru optimizasyonu (SEO) gibi faktörler açısından beklentileri oldukça yükseltmiştir. Geleneksel tek sayfa uygulamaları (SPA’lar) zengin kullanıcı deneyimi sunarken, başlangıç yükleme süreleri ve SEO konusunda bazı zorluklarla karşılaşabilirler. Bu zorlukları aşmak için ortaya çıkan “Evrensel Uygulamalar” (Universal Applications) veya diğer adıyla “İzomorfik Uygulamalar”, hem istemci tarafında (Client-Side Rendering – CSR) hem de sunucu tarafında (Server-Side Rendering – SSR) çalışabilen, bu iki dünyanın en iyi özelliklerini bir araya getiren bir yaklaşımdır.

Evrensel uygulamalar, ilk sayfa yüklemesinde içeriği sunucu tarafında oluşturarak tarayıcıya gönderir. Bu sayede, kullanıcı daha hızlı bir ilk yükleme deneyimi yaşar ve arama motoru botları içeriği kolayca indeksleyebilir. Sayfa yüklendikten sonra ise uygulama, tam bir SPA gibi davranarak istemci tarafında dinamik etkileşimler sunmaya devam eder. Bu hibrit yaklaşım, performans, SEO ve geliştirici deneyimi açısından önemli avantajlar sağlar.

Bu makalede, modern web geliştirmenin iki güçlü aracı olan Nuxt.js ve Django’yu kullanarak nasıl evrensel bir uygulama geliştirebileceğimizi ayrıntılı bir şekilde inceleyeceğiz. Nuxt.js, Vue.js tabanlı, sezgisel ve güçlü bir evrensel uygulama çatısı olarak ön plana çıkarken; Django, Python ekosisteminin sağlam, güvenli ve ölçeklenebilir bir web çatısı olarak arka uç (backend) API ihtiyaçlarımızı karşılayacaktır. Bu iki teknolojinin birleşimi, hem geliştirme verimliliği hem de nihai ürün kalitesi açısından mükemmel bir sinerji yaratır.

Evrensel Uygulama Mimarisi ve Bileşenleri

Bir evrensel uygulama geliştirirken, frontend ve backend arasındaki ayrımı ve her bir bileşenin rolünü iyi anlamak kritik öneme sahiptir.

Frontend: Nuxt.js ve Evrensel Renderlama

Nuxt.js, Vue.js ekosisteminde evrensel uygulamalar oluşturmak için tasarlanmış, açık kaynaklı ve sezgisel bir framework’tür. Temel olarak, Nuxt.js bize üç ana renderlama stratejisi sunar:

* Client-Side Rendering (CSR): Geleneksel SPA yaklaşımıdır. Tarayıcıya boş bir HTML dosyası ve JavaScript paketi gönderilir. JavaScript yüklendikten sonra içeriği tarayıcıda oluşturur ve gösterir. Dinamik etkileşimler için harikadır ancak ilk yükleme süresi ve SEO için zorluklar yaratabilir.
* Server-Side Rendering (SSR): Her istekte sunucu, Vue.js uygulamasını HTML dizgisine dönüştürür ve tarayıcıya gönderir. Tarayıcı bu HTML’i hemen gösterir. JavaScript daha sonra yüklenir ve “hidrasyon” (hydration) adı verilen bir süreçle mevcut DOM yapısını devralarak etkileşimli hale getirir. Bu, hızlı ilk yükleme ve mükemmel SEO sağlar. Nuxt.js’in varsayılan çalışma modudur.
* Static Site Generation (SSG): Uygulama, geliştirme aşamasında veya dağıtımdan önce tüm sayfalarını statik HTML dosyaları olarak oluşturur. Bu dosyalar bir CDN üzerinden sunulabilir ve sunucu tarafında renderlama maliyeti olmadan SSR’ın tüm avantajlarını sunar. Nuxt.js nuxt generate komutu ile bunu destekler.
* Hibrit (Universal): Nuxt.js’in asıl gücü, SSR ve CSR’ı birleştirerek her iki tarafın avantajlarından yararlanmasıdır. İlk yüklemede SSR, sonraki navigasyonlarda ise SPA gibi çalışır.

Nuxt.js, bu renderlama stratejilerini yönetmekle kalmaz, aynı zamanda dosya tabanlı yönlendirme (file-system routing), durum yönetimi (Vuex), meta etiket yönetimi, kod bölme (code splitting) ve otomatik kod transpilasyonu gibi birçok özelliği de hazır olarak sunar. Bu sayede geliştiriciler, altyapı detaylarıyla uğraşmak yerine doğrudan uygulama mantığına odaklanabilirler.

Backend: Django ve REST API

Evrensel bir uygulamanın backend’i, frontend’e veri sağlayan bir API görevi görür. Django, Python tabanlı, “pil dahil” felsefesiyle bilinen, yüksek seviyeli bir web çatısıdır. Güçlü ORM’i, yönetici paneli, kimlik doğrulama sistemi ve güvenlik özellikleriyle hızlı ve güvenli API’ler geliştirmek için ideal bir platformdur.

Bu mimaride Django’nun rolü şunlardır:
* Veri Yönetimi: Veritabanı ile etkileşimi yönetir (PostgreSQL, MySQL, SQLite vb.).
* API Uç Noktaları: Nuxt.js uygulamasının veri çekmek, göndermek, güncellemek ve silmek için kullanacağı RESTful API uç noktalarını sağlar.
* İş Mantığı: Uygulamanın temel iş mantığını ve kurallarını içerir.
* Kimlik Doğrulama ve Yetkilendirme: Kullanıcıların kimliğini doğrular ve hangi kaynaklara erişebileceklerini belirler.

Django tek başına bir “evrensel” uygulama çatısı değildir; geleneksel olarak sunucu tarafında HTML render eden bir yapıya sahiptir. Ancak, Django REST Framework (DRF) gibi güçlü eklentilerle birleştiğinde, modern, ayrık (decoupled) bir frontend ile çalışacak RESTful API’ler oluşturmak için mükemmel bir seçim haline gelir.

Nuxt.js ile Frontend Geliştirme

Nuxt.js projesini başlatmak ve temel bileşenlerini anlamak, evrensel uygulamanın frontend tarafını oluşturmanın ilk adımıdır.

Nuxt.js Kurulumu ve Proje Yapısı

Yeni bir Nuxt.js projesi oluşturmak oldukça basittir:

npx create-nuxt-app 

Bu komut, size bazı sorular soracaktır (paket yöneticisi, UI framework, server-side framework, linter vb.). Seçimlerinizi yaptıktan sonra, Nuxt.js otomatik olarak bir proje yapısı oluşturur:

* pages/: Uygulamanızın sayfalarını ve yönlendirmesini tanımlar (dosya tabanlı yönlendirme).
* components/: Yeniden kullanılabilir Vue bileşenlerini içerir.
* layouts/: Uygulamanızın genel görünümünü ve düzenini tanımlar.
* store/: Vuex durum yönetimi modüllerini içerir.
* static/: Doğrudan sunulan statik dosyalar (resimler, fontlar vb.).
* assets/: Webpack tarafından işlenen statik dosyalar (stil dosyaları, resimler).
* plugins/: Vue.js uygulamasına eklemek istediğiniz eklentileri içerir (örn. Axios, kimlik doğrulama).
* middleware/: Yönlendirme sırasında çalışacak ara yazılımları içerir.
* nuxt.config.js: Nuxt.js uygulamasının ana yapılandırma dosyası.

Veri Çekme (Data Fetching) Mekanizmaları

Evrensel uygulamalarda veri çekme, hem sunucu hem de istemci tarafında gerçekleşebileceği için özel bir önem taşır. Nuxt.js, bu konuda çeşitli yöntemler sunar:

* asyncData(context): Bir sayfa bileşeninin (page component) verisini sunucu tarafında (veya istemci tarafında ilk navigasyonda) çeker. Çekilen veri, bileşenin data özelliğine eklenir. SEO için kritik olan ilk renderlama sırasında verinin HTML’e gömülmesini sağlar.
* fetch(context): Nuxt 2.12+ ile gelen bu hook, hem sunucu hem de istemci tarafında veri çekmek için kullanılabilir. Çekilen veri doğrudan bileşenin data özelliğine değil, Vuex store’a veya bileşenin kendi durumuna atanır. asyncData‘dan farklı olarak, bileşenin data‘sını birleştirmez; bu nedenle genellikle Vuex ile birlikte kullanılır. Sayfa yüklendikten sonra da tekrar çalıştırılabilir.
* $axios Modülü: Nuxt.js’in resmi Axios modülü, API isteklerini kolaylaştırmak ve hem sunucu hem de istemci tarafında tutarlı bir şekilde kullanmak için tasarlanmıştır. nuxt.config.js içinde yapılandırılabilir ve tüm bileşenlerde $axios olarak erişilebilir.

// pages/posts/_id.vue örneği
export default {
  async asyncData({ $axios, params }) {
    const post = await $axios.$get(/api/posts/${params.id});
    return { post };
  },
  data() {
    return {
      post: null
    }
  }
}

SEO Optimizasyonu ve Meta Etiket Yönetimi

Evrensel uygulamaların en büyük avantajlarından biri SEO performansıdır. Nuxt.js, her sayfa için dinamik meta etiketleri ve başlıklar tanımlamanıza olanak tanır.

// pages/posts/_id.vue örneği
export default {
  // ... asyncData veya fetch metodu ile post verisi çekildi
  head() {
    return {
      title: this.post.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.post.excerpt
        },
        // Open Graph, Twitter Card meta etiketleri de eklenebilir
      ]
    };
  }
}

Bu head() metodu, sunucu tarafında render edildiğinde HTML etiketine otomatik olarak eklenir ve arama motorları tarafından indekslenebilir.

State Yönetimi (Vuex)

Nuxt.js, Vuex’i entegre bir şekilde sunar. store/ dizini altında oluşturulan her .js dosyası, otomatik olarak bir Vuex modülü haline gelir. Bu, uygulamanın genel durumunu yönetmek için merkezi ve öngörülebilir bir yol sağlar. Özellikle fetch hook’u ile çekilen verilerin Vuex store’a kaydedilmesi yaygın bir yaklaşımdır.

API Entegrasyonu

Nuxt.js’in @nuxtjs/axios modülü, backend API ile iletişim kurmak için en iyi yoldur. Kurulumu nuxt.config.js dosyasına eklemekle başlar:

// nuxt.config.js
export default {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // API'nizin temel URL'sini belirtin
    baseURL: process.env.API_URL || 'http://localhost:8000/api'
  },
  // ... diğer yapılandırmalar
}

baseURL‘i ortam değişkenlerinden almak, farklı ortamlar (geliştirme, üretim) için esneklik sağlar.

Django ile Backend Geliştirme

Django, sağlam ve güvenli bir API backend’i oluşturmak için mükemmel bir temel sağlar. Django REST Framework (DRF) ile bu yetenekler daha da artırılır.

Django Nedir? Neden API için uygun?

Django, Python ile yazılmış, hızlı geliştirme ve temiz, pragmatik bir tasarım sunan yüksek seviyeli bir web çatısıdır. “Piller dahil” felsefesi, birçok yaygın web geliştirme görevini (ORM, kimlik doğrulama, yönetici paneli, URL yönlendirme vb.) hazır çözümlerle gelmesini sağlar. Bu özellikler, özellikle büyük ve karmaşık API’ler oluştururken geliştirme sürecini hızlandırır ve güvenliği artırır.

Django REST Framework (DRF) Nedir?

Django REST Framework, Django üzerinde güçlü ve esnek Web API’leri oluşturmak için kullanılan bir araç takımıdır. DRF, serileştiriciler (serializers), görünüm kümeleri (viewsets), kimlik doğrulama ve yetkilendirme sınıfları, API tarayıcısı gibi birçok kullanışlı özellik sunar. Bu sayede, veri modelinizi API’ye dönüştürmek, istekleri işlemek ve yanıtları biçimlendirmek oldukça kolaylaşır.

DRF Kurulumu ve Temel Yapılandırma

Yeni bir Django projesi oluşturduktan sonra DRF’yi kurun:

pip install djangorestframework django-cors-headers

settings.py dosyanıza ekleyin:

# settings.py
INSTALLED_APPS = [
    # ... diğer Django uygulamaları
    'rest_framework',
    'corsheaders', # CORS için
    'your_app_name', # Kendi uygulamanız
]

REST Framework ayarları
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
        'rest_framework.authentication.SessionAuthentication', # Geliştirme için isteğe bağlı
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticatedOrReadOnly', # Varsayılan olarak okuma izni, yazma için yetkilendirme
    ],
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10
}

CORS ayarları
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000", # Nuxt.js uygulamanızın çalıştığı adres
    # "https://your-nuxt-domain.com", # Üretim ortamı için
]
CORS_ALLOW_CREDENTIALS = True # Eğer kimlik doğrulama tokenları kullanıyorsanız

Model, Serializer, Viewset ve URL Yapıları

DRF’nin temel yapı taşları şunlardır:

1. Model: Django’nun ORM’i ile veritabanı şemanızı tanımlarsınız.

# your_app_name/models.py
    from django.db import models

    class Post(models.Model):
        title = models.CharField(max_length=200)
        content = models.TextField()
        created_at = models.DateTimeField(auto_now_add=True)
        updated_at = models.DateTimeField(auto_now=True)
        author = models.ForeignKey('auth.User', on_delete=models.CASCADE)

        def __str__(self):
            return self.title

2. Serializer: Python nesnelerini JSON/XML gibi formatlara dönüştürmek ve tersine çevirmek için kullanılır.

# your_app_name/serializers.py
    from rest_framework import serializers
    from .models import Post

    class PostSerializer(serializers.ModelSerializer):
        author_username = serializers.ReadOnlyField(source='author.username')

        class Meta:
            model = Post
            fields = ['id', 'title', 'content', 'created_at', 'updated_at', 'author', 'author_username']
            read_only_fields = ['author'] # Oluşturma sırasında author'ı otomatik atayabiliriz

3. Viewset: CRUD (Oluşturma, Okuma, Güncelleme, Silme) işlemlerini tek bir sınıf altında birleştirir.

# your_app_name/views.py
    from rest_framework import viewsets, permissions
    from .models import Post
    from .serializers import PostSerializer

    class PostViewSet(viewsets.ModelViewSet):
        queryset = Post.objects.all().order_by('-created_at')
        serializer_class = PostSerializer
        permission_classes = [permissions.IsAuthenticatedOrReadOnly] # Sadece yetkili kullanıcılar düzenleyebilir

        def perform_create(self, serializer):
            serializer.save(author=self.request.user) # Yeni gönderiyi oluşturan kullanıcıyı atar

4. URL Yapıları: Viewset’leri URL’lere bağlamak için DRF’nin router’ını kullanın.

# project_name/urls.py
    from django.contrib import admin
    from django.urls import path, include
    from rest_framework.routers import DefaultRouter
    from your_app_name.views import PostViewSet

    router = DefaultRouter()
    router.register(r'posts', PostViewSet)

    urlpatterns = [
        path('admin/', admin.site.urls),
        path('api/', include(router.urls)),
        path('api-auth/', include('rest_framework.urls', namespace='rest_framework')), # DRF login/logout için
    ]

Kimlik Doğrulama ve Yetkilendirme (JWT)

SPA ve evrensel uygulamalarda, oturum tabanlı kimlik doğrulama yerine genellikle Token tabanlı (özellikle JWT – JSON Web Tokens) kimlik doğrulama tercih edilir. DRF için djangorestframework-simplejwt paketi bu konuda popüler bir çözümdür.

pip install djangorestframework-simplejwt

settings.py dosyanıza ekleyin:

# settings.py
...
INSTALLED_APPS = [
    # ...
    'rest_framework_simplejwt',
]

...
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework_simplejwt.authentication.JWTAuthentication',
        # ...
    ],
    # ...
}

from datetime import timedelta

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
    'ROTATE_REFRESH_TOKENS': True,
    'BLACKLIST_AFTER_ROTATION': True,
    'ALGORITHM': 'HS256',
    'SIGNING_KEY': SECRET_KEY, # Django SECRET_KEY'inizi kullanın
    'VERIFYING_KEY': None,
    'AUDIENCE': None,
    'ISSUER': None,
    'AUTH_HEADER_TYPES': ('Bearer',),
    'USER_ID_FIELD': 'id',
    'USER_ID_CLAIM': 'user_id',
    'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
    'TOKEN_TYPE_CLAIM': 'token_type',
    'JTI_CLAIM': 'jti',
    'SLIDING_TOKEN_REFRESH_EXP_CLAIM': 'refresh_exp',
    'SLIDING_TOKEN_LIFETIME': timedelta(minutes=5),
    'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=1),
}

project_name/urls.py içine JWT uç noktalarını ekleyin:

# project_name/urls.py
from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
    TokenVerifyView,
)

urlpatterns = [
    # ...
    path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('api/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
    path('api/token/verify/', TokenVerifyView.as_view(), name='token_verify'),
]

Bu uç noktalar aracılığıyla kullanıcılar kullanıcı adı/şifre ile access ve refresh token’ları alabilirler. access token, yetkilendirilmiş API istekleri için kullanılırken, refresh token, access token süresi dolduğunda yenisini almak için kullanılır.

CORS Ayarları

Frontend (Nuxt.js) ve backend (Django) farklı domainlerde veya portlarda çalıştığında tarayıcılar “Cross-Origin Resource Sharing” (CORS) politikaları nedeniyle istekleri engelleyebilir. django-cors-headers paketi bu sorunu çözmek için kullanılır. settings.py içinde CORS_ALLOWED_ORIGINS veya CORS_ALLOW_ALL_ORIGINS = True (geliştirme ortamı için) ayarını yaparak izin verilen kaynakları belirtmelisiniz.

# settings.py
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # CORS middleware'ı diğer middleware'lardan önce olmalı
    # ... diğer middleware'lar
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
    # Üretim ortamı için Nuxt uygulamanızın domainini ekleyin
    # "https://www.yourdomain.com",
]

Ya da tüm origin'lere izin vermek için (sadece geliştirme ortamında önerilir!)
CORS_ALLOW_ALL_ORIGINS = True

Nuxt.js ve Django Entegrasyonu

Frontend ve backend’in birbirleriyle nasıl iletişim kurduğunu anlamak, evrensel uygulamanın kalbidir.

Frontend’den Backend API’ye İstek Gönderme

Nuxt.js uygulamasında, asyncData veya fetch hook’ları içinde $axios modülünü kullanarak Django API’sine istekler gönderebiliriz.

// Nuxt.js component/page
export default {
  async asyncData({ $axios }) {
    try {
      const posts = await $axios.$get('/api/posts/');
      return { posts };
    } catch (error) {
      console.error('Gönderiler çekilemedi:', error);
      return { posts: [] };
    }
  },
  data() {
    return {
      posts: []
    };
  },
  methods: {
    async createPost(newPost) {
      try {
        const response = await this.$axios.$post('/api/posts/', newPost);
        this.posts.push(response); // Yeni gönderiyi listeye ekle
      } catch (error) {
        console.error('Gönderi oluşturulamadı:', error);
      }
    }
  }
}

Kimlik Doğrulama ile İstekler: Kullanıcı girişi yaptıktan sonra alınan JWT access token’ı, $axios‘un varsayılan başlıklarına eklenmelidir. Bu genellikle bir Nuxt.js eklentisi (plugins/axios.js) veya Vuex aksiyonları aracılığıyla yapılır.

// plugins/axios.js
export default function ({ $axios, store }) {
  $axios.onRequest(config => {
    if (store.state.auth.token) { // Vuex store'da token varsa
      config.headers.common['Authorization'] = Bearer ${store.state.auth.token};
    }
    return config;
  });

  $axios.onResponseError(error => {
    // Token süresi dolarsa refresh token ile yenileme veya kullanıcıyı çıkış yapmaya yönlendirme
    if (error.response.status === 401 && error.response.data.code === 'token_not_valid') {
      // Refresh token ile yeni access token almaya çalış
      // Başarısız olursa kullanıcıyı çıkış yapmaya yönlendir
    }
    return Promise.reject(error);
  });
}

Bu eklentiyi nuxt.config.js içinde kaydetmeyi unutmayın:

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/axios.js'
  ],
  // ...
}

Ortak Veri Akışı ve Durum Yönetimi

Nuxt.js’in Vuex entegrasyonu, kullanıcı kimlik doğrulama durumu, global ayarlar veya sık kullanılan veriler gibi paylaşılan verileri yönetmek için idealdir. Örneğin, kullanıcı giriş yaptığında, JWT token’ları ve kullanıcı bilgileri Vuex store’a kaydedilir. Bu sayede, uygulamanın herhangi bir bileşeni bu bilgilere kolayca erişebilir.

Güvenlik Konuları

* JWT Güvenliği: access token’lar kısa ömürlü olmalı ve refresh token’lar daha uzun ömürlü olabilir ancak güvenli bir şekilde saklanmalıdır (örn. HTTP-only çerezler). Nuxt.js tarafında access token’ı localStorage‘da saklamak yaygın olsa da, XSS saldırılarına karşı savunmasız olabilir. Daha güvenli bir yaklaşım, access token’ı Vuex store’da tutmak ve sayfalar arası geçişlerde yeniden almaktır, ancak bu da kullanıcı deneyimini etkileyebilir. En güvenli yöntem, refresh token’ı HTTP-only çerezlerde saklamak ve access token’ı sadece bellekte tutmaktır.
* CSRF Koruması: DRF, oturum tabanlı kimlik doğrulama kullanıldığında CSRF korumasını otomatik olarak sağlar. JWT kullanıldığında, token’ın kendisi bir CSRF token’ı gibi davrandığı için ayrı bir CSRF korumasına genellikle gerek kalmaz, ancak yine de frontend’den gelen isteklerin kaynak kontrolü (CORS) önemlidir.
* XSS ve SQL Enjeksiyonu: Django ORM ve templating sistemi, SQL enjeksiyonu ve XSS saldırılarına karşı yerleşik korumalar sunar. DRF’nin serileştiricileri de veri doğrulama yaparak bu tür zafiyetleri azaltır. Yine de, frontend’den gelen kullanıcı girdilerini her zaman sanitize etmek ve doğrulamak önemlidir.

Dağıtım (Deployment)

Evrensel bir uygulamanın dağıtımı, hem frontend (Nuxt.js) hem de backend (Django) bileşenlerinin ayrı ayrı ancak koordineli bir şekilde çalışmasını gerektirir.

Nuxt.js Uygulamasının Dağıtımı

Nuxt.js uygulaması npm run build komutu ile üretim için optimize edilir. Bu komut, uygulamanın JavaScript, CSS ve diğer varlıklarını oluşturur. Dağıtım stratejisi, seçtiğiniz renderlama moduna (SSR, SSG) göre değişir:

* SSR (Node.js Sunucusu): Nuxt.js, kendi Node.js sunucusunu kullanarak SSR yapabilir. Bu sunucu genellikle PM2 gibi bir süreç yöneticisi ile çalıştırılır ve Nginx gibi bir ters proxy önüne konulur. Nginx, gelen istekleri Nuxt.js sunucusuna yönlendirir ve statik dosyaları doğrudan sunar.

server {
        listen 80;
        server_name yourdomain.com;

        location /_nuxt/ {
            alias /path/to/your/nuxt-app/.nuxt/dist/client/;
            expires 1y;
            add_header Cache-Control "public";
        }

        location / {
            proxy_pass http://localhost:3000; # Nuxt.js uygulamanızın çalıştığı port
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }

* SSG (Statik Barındırma): Eğer uygulamanız SSG modunda çalışıyorsa (nuxt generate), tüm sayfalar statik HTML, CSS ve JS dosyaları olarak oluşturulur. Bu dosyalar, Netlify, Vercel, AWS S3/CloudFront veya herhangi bir statik dosya barındırma hizmetinde barındırılabilir. Bu, en uygun maliyetli ve en hızlı dağıtım yöntemlerinden biridir.

Django Uygulamasının Dağıtımı

Django uygulaması için tipik bir üretim dağıtımı aşağıdaki bileşenleri içerir:

* Web Sunucusu (Nginx): Gelen HTTP isteklerini karşılar, statik dosyaları (Django’nun collectstatic ile topladığı) ve medya dosyalarını sunar. Django uygulamasının kendisi için gelen istekleri bir WSGI sunucusuna (Gunicorn veya uWSGI) yönlendirir.
* WSGI Sunucusu (Gunicorn/uWSGI): Python web uygulamalarını çalıştırmak için bir arayüzdür. Django uygulamanızı çalıştırır ve Nginx’ten gelen istekleri işler.
* Veritabanı (PostgreSQL): Üretim ortamında SQLite yerine PostgreSQL gibi sağlam bir veritabanı kullanmak önerilir.
* Süreç Yöneticisi (Supervisor/Systemd): Gunicorn/uWSGI sürecini izler ve çökmesi durumunda otomatik olarak yeniden başlatır.

# Nginx yapılandırması (Django için)
server {
    listen 80;
    server_name api.yourdomain.com; # API için ayrı bir subdomain

    location /static/ {
        alias /path/to/your/django-app/static/; # collectstatic ile toplanan statik dosyalar
    }

    location /media/ {
        alias /path/to/your/django-app/media/; # Kullanıcı tarafından yüklenen medya dosyaları
    }

    location / {
        proxy_pass http://unix:/path/to/your/django-app/gunicorn.sock; # Gunicorn socket dosyası
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Ortak Dağıtım Stratejileri

* Docker ve Kubernetes: Her iki uygulamayı da (Nuxt.js ve Django) Docker kapsayıcılarına paketlemek, dağıtım ve ölçeklenebilirlik açısından büyük avantajlar sunar. Kubernetes gibi bir konteyner orkestrasyon aracı, bu kapsayıcıları yönetmek ve ölçeklendirmek için kullanılabilir. Bu, geliştirme ortamı ile üretim ortamı arasında tutarlılık sağlar.
* Bulut Platformları: AWS, Google Cloud, Azure gibi bulut sağlayıcıları, hem Nuxt.js (örn. AWS Amplify, Vercel) hem de Django (örn. AWS EC2, Google App Engine, Heroku) uygulamalarını barındırmak ve yönetmek için çeşitli hizmetler sunar.

Örnek Uygulama Senaryosu: Basit Bir Blog

Bu rehberdeki adımları kullanarak basit bir blog uygulaması geliştirebiliriz:

1. Django Backend:
* Post modeli (başlık, içerik, yazar, yayınlanma tarihi) ve Comment modeli oluşturulur.
* PostSerializer ve CommentSerializer tanımlanır.
* PostViewSet ve CommentViewSet (yorumlar için Post ile ilişkili) oluşturulur.
* JWT tabanlı kimlik doğrulama ayarlanır, kullanıcıların giriş yapması ve gönderi/yorum oluşturması sağlanır.
* CORS ayarları yapılır.

2. Nuxt.js Frontend:
* Ana sayfa (pages/index.vue): Tüm blog gönderilerini listeler. asyncData ile gönderileri çeker.
* Gönderi detayı sayfası (pages/posts/_id.vue): Belirli bir gönderinin içeriğini ve yorumlarını gösterir. asyncData ile gönderi ve yorumları çeker.
* Gönderi oluşturma/düzenleme sayfası (pages/posts/create.vue): Yetkili kullanıcıların yeni gönderi oluşturmasına veya mevcut gönderileri düzenlemesine olanak tanır.
* Giriş/Kayıt sayfaları (pages/auth/login.vue, pages/auth/register.vue): Kullanıcıların Django API ile etkileşim kurarak giriş yapmasını ve kaydolmasını sağlar.
* Vuex store: Kullanıcı kimlik doğrulama durumunu ve JWT token’larını saklar.
* Axios eklentisi: Tüm API isteklerine yetkilendirme başlığını otomatik olarak ekler.
* Meta etiketleri: Her gönderi detayı sayfası için dinamik başlık ve açıklama ayarlanır.

Bu yapı, kullanıcıların hızlıca blog yazılarını görmesini (SSR sayesinde), dinamik olarak yorum yapmasını veya yeni yazı oluşturmasını (CSR etkileşimleri) sağlar.

Sonuç ve Gelecek Perspektifleri

Nuxt.js ve Django ile evrensel bir uygulama geliştirmek, modern web uygulamalarının performans, SEO ve kullanıcı deneyimi beklentilerini karşılamak için güçlü ve esnek bir yaklaşımdır. Nuxt.js’in evrensel renderlama yetenekleri, SEO dostu ve hızlı yüklenen frontend’ler oluştururken, Django’nun sağlam ve ölçeklenebilir API backend’i, güvenli ve verimli veri yönetimi sağlar.

Bu mimari, geliştiricilere hem frontend hem de backend tarafında en iyi araçları kullanma özgürlüğü sunar. Nuxt.js’in dosya tabanlı yönlendirme, Vuex entegrasyonu ve modül sistemi gibi özellikleri, geliştirme sürecini hızlandırırken, Django’nun ORM’i, yönetici paneli ve DRF’nin API oluşturma kolaylığı, backend geliştirme yükünü azaltır.

Gelecekte, bu tür hibrit uygulamaların popülaritesi artmaya devam edecektir. Özellikle Web Vitals gibi performans metriklerinin önem kazanmasıyla birlikte, SSR ve SSG gibi teknikler kritik hale gelmektedir. Nuxt.js ve Django ikilisi, bu gereksinimleri karşılamak ve aynı zamanda geliştirici verimliliğinden ödün vermemek isteyen ekipler için mükemmel bir seçim olmaya devam edecektir.

Bu rehber, Nuxt.js ve Django ile evrensel uygulama geliştirme yolculuğunuzda size sağlam bir başlangıç noktası sunmayı amaçlamaktadır. Her iki teknolojinin de zengin ekosistemlerini ve topluluklarını keşfederek bilginizi derinleştirmeye devam etmeniz, daha karmaşık ve özellikli uygulamalar geliştirmenize olanak tanıyacaktır. Başarılı ve performanslı web uygulamaları inşa etme yolunda iyi şanslar!