✈️Проблема традиционного подхода
Многие статьи рекомендуют создавать полноценный React SPA и использовать Django только как REST API. Однако такой подход имеет ряд недостатков, особенно для небольших проектов:
💬Дублирование кода (маршрутизация, аутентификация, авторизация)
💬Необходимость создания отдельных страниц ошибок
💬Дублирование состояний и моделей данных

Хотя для некоторых проектов это может быть приемлемым решением, для моего небольшого приложения такой подход кажется излишним.

➡️Альтернативное решение: React как шаблонизатор

Идея заключается в том, чтобы использовать React не как полноценный фронтенд-фреймворк, а как шаблонизатор для Django. Это позволит нам сохранить преимущества обоих инструментов.

➡️Точки монтирования React
React имеет удобное свойство: он монтируется не просто в body DOM или случайное место, а именно в указанный вами элемент. Мы можем использовать это для реализации маршрутизации, используя одну точку монтирования для каждой страницы:
ReactDOM.render(
<h1>Страница 1!</h1>,
document.getElementById('page-1')
);

ReactDOM.render(
<h1>Страница 2!</h1>,
document.getElementById('page-2')
);

➡️Маршрутизация на стороне Django
На стороне Django нам нужно только отрендерить <div> с соответствующим идентификатором:
{% extends "base.html" %}
{% load static %}

{% block content %}
<div id="` element_id `"></div>
<script src="{% static 'index.js' %}"></script>
{% endblock %}

➡️Оптимизация размера пакета
Чтобы не загружать JavaScript для неиспользуемых страниц, мы можем использовать встроенную функцию React - Code Splitting:
let Page1 = React.lazy(() => import('./page1'))
let Page2 = React.lazy(() => import('./page2'))

ReactDOM.render(
<Suspense fallback={<></>}>
<Page1/>
</Suspense>,
document.getElementById('page-1')
);

➡️Передача контекстных данных
Для передачи данных из Django в React мы можем использовать встроенный в Django тег json_script:
{% extends "base.html" %}
{% load static %}

{% block content %}
<div id="` element_id `"></div>
{{ page_context | json_script:'page-context' }}
<script src="{% static 'index.js' %}"></script>
{% endblock %}

➡️На стороне React мы можем получить эти данные с помощью пользовательского хука:
export let usePageContext = <T = any>() => {
let [pageContext, setPageContext] = useState<T | undefined>(undefined)
useEffect(() => {
let pageContext = document.getElementById('page-context').textContent
setPageContext(JSON.parse(pageContext))
}, [])
return pageContext as T
}

const TodosIndexPage = memo(() => {
let pageContext = usePageContext<{ todos: Todo[] }>()
let todos = pageContext?.todos
return <>
<h1>React todos page</h1>
<ul>
{todos?.map(todo => <li key={todo.id}>{todo.title}</li>)}
</ul>
</>
})

💡Заключение
Этот подход позволяет использовать React как шаблонизатор для Django, сохраняя при этом простоту разработки и избегая дублирования кода. Основные шаги для реализации:
💬Создание отдельных точек монтирования для React
💬Настройка разделения кода для оптимизации производительности
💬Реализация маршрутизации на стороне Django
💬Передача контекста страницы из Django в React
💬Получение и использование контекста страницы на стороне React

🐍Pythoner