Обслуживание приложения React из Django: несколько методов, объясненных примерами кода - Fcodenotes

Объединение мощи React, популярной библиотеки JavaScript для создания пользовательских интерфейсов, с Django, веб-инфраструктурой высокого уровня Python, может привести к созданию надежных и масштабируемых веб-приложений. В этой статье мы рассмотрим различные методы обслуживания приложения React от Django, что позволит вам использовать сильные стороны обеих технологий. Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять процесс реализации.

Метод 1: рендеринг на стороне сервера (SSR)
Рендеринг на стороне сервера включает в себя рендеринг компонентов React на сервере и отправку предварительно обработанного HTML клиенту. Этот метод полезен для целей SEO и производительности начальной загрузки страницы. Вот пример настройки SSR с помощью Django:

Установите необходимые зависимости:
```
npm install react react-dom react-router-dom express
```

Создайте представление Django, отображающее компоненты React:

from django.shortcuts import render
from django.views import View
from django.conf import settings
import subprocess
class ReactView(View):
def get(self, request):
    # Execute React build command
    subprocess.run(["npm", "run", "build"], cwd=settings.REACT_APP_DIR)
    # Get the generated HTML file
    with open(settings.REACT_APP_DIR / "build" / "index.html") as file:
        html = file.read()
    return render(request, "react_template.html", {"html": html})

Определите шаблон Django для внедрения React HTML:

<!-- react_template.html -->
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root">{{ html | safe }}</div>
<script src="{% static 'js/bundle.js' %}"></script>
</body>
</html>

Метод 2: рендеринг на стороне клиента (CSR) с интеграцией API Django.
Рендеринг на стороне клиента включает загрузку приложения React на стороне клиента и взаимодействие с API Django для получения данных. Этот метод предлагает более интерактивный пользовательский интерфейс. Вот пример реализации CSR с интеграцией API Django:

Настройте API Django REST Framework (DRF) для обслуживания данных:

# serializers.py
from rest_framework import serializers
from .models import MyModel
class MyModelSerializer(serializers.ModelSerializer):
class Meta:
    model = MyModel
    fields = "__all__"
# views.py
from rest_framework import viewsets
from .serializers import MyModelSerializer
from .models import MyModel
class MyModelViewSet(viewsets.ModelViewSet):
queryset = MyModel.objects.all()
serializer_class = MyModelSerializer

Создайте компонент React для получения данных из API Django:

import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
    fetch('/api/mymodels/')
        .then(response => response.json())
        .then(data => setData(data));
}, []);
return (
    <div>
        {data.map(item => (
            <div key={item.id}>{item.name}</div>
        ))}
    </div>
);
}

В этой статье мы рассмотрели два метода обслуживания приложения React из Django. Серверный рендеринг (SSR) подходит для SEO и начальной загрузки страницы, а клиентский рендеринг (CSR) с интеграцией Django API обеспечивает более интерактивный пользовательский интерфейс. Объединив сильные стороны React и Django, вы сможете создавать мощные и многофункциональные веб-приложения.