Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

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

Bu rehberde ne öğreneceksiniz?​

Bu rehberde Nuxt.js ve Django kullanarak universal (SSR) bir web uygulaması geliştireceksiniz.
Amaç, SEO uyumlu ve performanslı modern bir mimari kurmaktır.

Nuxt.js arayüzü yönetir.
Django ise API ve veri katmanını sağlar.

🧠 Teknik Özet​

Bu rehber Nuxt.js ve Django ile universal uygulama geliştirmeyi anlatır.
Problem: SPA uygulamalarda SEO ve ilk yükleme süresi sorunları.
Çözüm: Sunucu tarafı render (SSR) ve API tabanlı mimari.

Universal Uygulama Nedir?​

Universal uygulama, kodun hem sunucuda hem tarayıcıda çalışmasıdır.
İlk HTML sunucuda üretilir.
Sonraki etkileşimler istemci tarafında devam eder.

Bu yaklaşım SEO ve performansı iyileştirir.

Ön Gereksinimler​

  • Node.js kurulu olmalı
  • Python 3 kurulu olmalı
  • Django ve Vue.js temelleri bilinmeli

1️⃣ Backend Kurulumu (Django)​

Önce proje dizinini oluşturun.

mkdir recipes_app
cd recipes_app
  • Bu komut proje klasörünü hazırlar.
  1. Pipenv kurun ve sanal ortam başlatın.
pip install pipenv
pipenv shell
  • Bu adım Python bağımlılıklarını izole eder.

Gerekli paketleri yükleyin.

pipenv install django django-rest-framework django-cors-headers
  • Bu paketler API geliştirmek için gereklidir.

2️⃣ Django Projesini Oluşturma​

  1. Yeni bir Django projesi başlatın.
django-admin startproject api
cd api
  • Core uygulamasını oluşturun.
python manage.py startapp core
  • Bu uygulama tarif (recipe) işlemlerini yönetir.

3️⃣ Ayarları Güncelleme​

  1. settings.py dosyasında gerekli uygulamaları ekleyin.
INSTALLED_APPS = [
  ...
  'rest_framework',
  'corsheaders',
  'core',
]
  • Bu ayar Django REST ve CORS desteği sağlar.
  1. CORS izinlerini tanımlayın.
CORS_ORIGIN_WHITELIST = (
  'http://localhost:3000',
)
  • Bu ayar frontend erişimini mümkün kılar.

4️⃣ Recipe Modelini Tanımlama​

class Recipe(models.Model):
    name = models.CharField(max_length=120)
    ingredients = models.CharField(max_length=400)
    picture = models.FileField()
    difficulty = models.CharField(max_length=10)
    prep_time = models.PositiveIntegerField()
    prep_guide = models.TextField()
  • Bu model tarif verilerini temsil eder.

5️⃣ Serializer ve ViewSet Oluşturma​

class RecipeSerializer(serializers.ModelSerializer):
    class Meta:
        model = Recipe
        fields = "__all__"
  • Serializer modeli JSON formatına çevirir.
class RecipeViewSet(viewsets.ModelViewSet):
    queryset = Recipe.objects.all()
    serializer_class = RecipeSerializer
ViewSet CRUD işlemlerini otomatik sağlar.

6️⃣ API URL Yapılandırması​

router.register(r'recipes', RecipeViewSet)
  • Bu yapı REST uç noktalarını üretir.

7️⃣ Migration ve Sunucu Çalıştırma​

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
  • Bu adımlar veritabanını hazırlar.

8️⃣ Frontend Kurulumu (Nuxt.js)​

  1. API dizininden çıkın ve Nuxt projesi oluşturun.
npx create-nuxt-app client
cd client
  • Kurulum sırasında Universal (SSR) seçin.

9️⃣ Axios Yapılandırması​

axios: {
  baseURL: "http://localhost:8000/api"
}
  • Bu ayar Django API’ye bağlanır.

1️⃣0️⃣ asyncData ile Veri Çekme​


async asyncData({ $axios }) {
  const recipes = await $axios.$get("/recipes/");
  return { recipes };
}
  • Bu fonksiyon veri yüklemeden önce çalışır.

1️⃣1️⃣ CRUD İşlemleri​

1. Listeleme: /recipes/

2. Ekleme: POST /recipes/

3. Güncelleme: PATCH /recipes/{id}/

4. Silme: DELETE /recipes/{id}/

  • Bu işlemler REST standardına uygundur.

1️⃣2️⃣ Sayfa Geçişleri ve Animasyon​

.page-enter-active,
.page-leave-active {
  transition: opacity .3s ease;
}
  • Bu stil sayfa geçişlerini yumuşatır.

❓ Sıkça Sorulan Sorular (SSS)​

1. Neden SSR kullanıyoruz? SEO ve ilk yükleme süresi için.

2. Django neden backend seçildi? Güçlü ORM ve REST desteği sunduğu için.

3. Nuxt.js SPA yerine neden tercih edildi? Universal render desteği sağladığı için.

4. Bu yapı ölçeklenebilir mi? Evet. Frontend ve backend ayrıdır.

🎯 Sonuç​

Bu rehberde Nuxt.js ve Django ile universal bir uygulama geliştirdiniz. SEO uyumlu, performanslı ve modern bir mimari kurdunuz.

Bu yapıyı Rabisu Bulut altyapısında kolayca yayına alabilirsiniz. 🚀 İyi geliştirmeler!