Django에서 SSR vs CSR을 구현하는 방법 | Nuuthang

Loading Services...

Django에서 SSR vs CSR을 구현하는 방법 | Nuuthang

🛠 Django에서 SSR vs CSR을 구현하는 방법

Django는 기본적으로 SSR(Server-Side Rendering) 방식으로 동작하는 웹 프레임워크입니다. 하지만 CSR(Client-Side Rendering) 방식이 필요한 경우에는 Django의 API 서버 역할을 활용하여 프론트엔드를 분리할 수도 있습니다.

✅ 1. Django에서 SSR을 사용하는 방법

Django의 기본 방식은 템플릿 엔진(Django Template Language, DTL) 을 이용하여 서버에서 HTML을 렌더링하는 SSR 방식입니다.

📌 SSR 구현 방법

Django 템플릿 엔진 활용

views.py에서 데이터를 가져와 HTML을 렌더링 후 응답
장점: 간단하게 SEO 최적화 가능, 초기 로딩 속도가 빠름

템플릿을 사용한 SSR 예제

from django.shortcuts import render
from .models import Product

def product_list(request):
    products = Product.objects.all()
    return render(request, 'products/list.html', {'products': products})
html
복사편집
<!-- products/list.html -->
<h1>상품 목록</h1>
<ul>
    {% for product in products %}
        <li>{{ product.name }} - {{ product.price }}원</li>
    {% endfor %}
</ul>

render() 함수를 사용하여 서버에서 HTML을 완성한 후 클라이언트로 전달

템플릿을 캐싱하면 속도 향상 가능

Django cache framework 를 활용하여 템플릿을 캐싱 가능

from django.views.decorators.cache import cache_page

@cache_page(60 * 15)  # 15분 캐싱
def product_list(request):
    products = Product.objects.all()
    return render(request, 'products/list.html', {'products': products})

✅ 2. Django + React/Vue를 활용한 CSR

Django는 백엔드 API 역할을 하고, 프론트엔드는 React 또는 Vue를 사용하여 클라이언트에서 데이터를 받아 CSR 방식으로 렌더링할 수도 있습니다.

📌 CSR 구현 방법

Django에서 Django REST Framework(DRF) 를 이용하여 API를 제공
프론트엔드(React, Vue)에서 API 데이터를 가져와 렌더링
SEO가 필요한 경우, Next.js/Nuxt.js 같은 SSR 지원 프레임워크와 결합

🚀 Django REST Framework(DRF) 설정

Django에서 API 서버를 만들고 CSR 프론트엔드가 데이터를 요청하도록 함

(1) Django에서 API 만들기

# views.py
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import Product
from .serializers import ProductSerializer

@api_view(['GET'])
def product_list(request):
    products = Product.objects.all()
    serializer = ProductSerializer(products, many=True)
    return Response(serializer.data)

# urls.py
from django.urls import path
from .views import product_list

urlpatterns = [
    path('api/products/', product_list, name='product-list'),
]

# serializers.py
from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = '__all__'

(2) React/Vue에서 API 요청

React 예제:

import { useEffect, useState } from "react";

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8000/api/products/")
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <div>
      <h1>상품 목록</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name} - {product.price}원</li>
        ))}
      </ul>
    </div>
  );
}
export default ProductList;

Vue 예제:

<template>
  <div>
    <h1>상품 목록</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}원
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    fetch("http://localhost:8000/api/products/")
      .then((response) => response.json())
      .then((data) => (this.products = data));
  },
};
</script>

✅ 3. Django에서 SSR + CSR 하이브리드 방식

Django 템플릿을 이용해 SSR 기본 페이지를 제공
React/Vue를 추가하여 CSR 방식으로 일부 UI 업데이트
SEO가 중요한 경우 Next.js/Nuxt.js와 Django API 서버를 연결하여 SSR 적용

📌 SSR + CSR 조합이 필요한 경우

블로그, 뉴스 사이트: 초기 페이지는 SSR, 댓글 시스템은 CSR
eCommerce(쇼핑몰): 상품 목록은 SSR, 장바구니는 CSR
관리자 페이지: 로그인 전 SSR, 로그인 후 CSR(SPA)

✅ 결론: Django에서 어떻게 선택해야 할까?

💡 SEO & 빠른 로딩 필요:

➡ Django 템플릿(SSR) 사용

💡 SPA & 대화형 웹앱 필요:

➡ Django + React/Vue (CSR)

💡 둘 다 필요 (SEO & SPA):

➡ Next.js/Nuxt.js + Django API (하이브리드)