Используя React 19 с Vite и Next.js

• Обсуждение создания приложений React с использованием Vanilla Vuet.  

• Пример формы с обработчиком событий для отправки.  

• Локальное состояние и его недостатки.  

• Введение в функции React 19 и использование эффектов использования.  

• Пример изменения компонента для работы с действиями.  

• Преимущества использования действий для улучшения UX.  

• Демонстрация функции сохранения элементов.  

• Проблемы с задержкой и пользовательским опытом.  

• Переход к использованию useEffect для извлечения данных.  

• Создание API для взаимодействия с базой данных.  

• Пример использования Vercel для локального развертывания API.  

• Взаимодействие с базой данных через API и обновление состояния.  

• Использование функции добавления элемента и передача данных формы.  

• Применение нового хука use optimistic для отображения пользовательского интерфейса до завершения действия.  

• Пример использования optimistic для отображения отправки элемента без ожидания завершения сетевого запроса.  

• Оптимистичный подход позволяет показывать обновления пользовательского интерфейса до завершения сетевого запроса.  

• React 19 предоставляет хук use optimistic для более эффективной работы с сервером.  

• Возможность выполнения работы с пользовательским интерфейсом, ожидая завершения сетевых операций.  

• Переход к использованию одного приложения для серверной и клиентской частей.  

• Установка и настройка Next.js для рендеринга на сервере.  

• Создание макета и страницы для приложения.  

• Настройка маршрутизации на основе файловой системы.  

• Использование серверного компонента для извлечения данных и влияния на исходный HTML-код.  

• Рефакторинг кода для улучшения UX и использования серверных фреймворков.  

• Извлечение данных на сервере и передача их клиенту.  

• Использование Next.js для рендеринга данных на сервере и их передачи клиенту.  

• Удаление ненужных файлов и настройка маршрутизации для улучшения производительности.  

• Создание нового файла для асинхронной функции.  

• Использование Typescript для улучшения кода.  

• Удаление ненужных папок и файлов для упрощения структуры проекта.  

• Получение данных из базы данных и их передача клиенту.  

• Использование JSON для передачи данных.  

• Завершение основных этапов работы с данными и сохранение изменений.  

• Экспортируем функцию для списка дел.  

• Обновляем вызов действия "добавить элемент" до "сохранить элемент".  

• Используем серверную среду для записи действий.  

• Возможность выполнения серверных действий с помощью модели программирования.  

• Создание API для выполнения вызовов.  

• Использование директивы use server для серверных действий.  

• Использование use optimistic для клиентских компонентов.  

• Разделение серверных и клиентских компонентов.  

• Импорт конечных точек только для сервера.  

• Создание файла для подключения к базе данных.  

• Использование функции "только сервер" для выполнения кода только на сервере.  

• Установка правильных версий зависимостей.  

• Перенос клиентских действий на серверные.  

• Удаление ненужных конфигураций и зависимостей.  

• Проверка работы приложения после переноса.  

• Проверка работы списка дел и клиентских компонентов.  

• Обновление данных при мутации.  

• Использование функции повторной проверки пути для обновления кэша.  

• Использование одного канала для обновления базы данных и пользовательского интерфейса.  

• Применение модели программирования с действиями и оптимистичным использованием.  

• Понимание смысла создания фреймворка с полным стеком.