Пост✈️Проблема традиционного подхода

✈️Проблема традиционного подхода Многие статьи рекомендуют создавать полноценный 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