Server Side Rendering (Дмитрий Лаврик)

Цель курса:

• Полностью разобраться с темой Server Side Rendering для SPA:
  • освоить ключевые идеи
  • привыкнуть к правилам игры на frontend и backend
  • реализовать удобную заготовку для SSR без Nuxt, Next и т.п.
• Задачей максимум является создание за время курса open-source пакетов для SSR на Vue и React.

Что вы получите:

8 онлайн уроков

• По средам с 19:30 МСК. Продолжительность каждого занятия около двух часов. На уроках разбираются домашние работы учеников и новый материал.

Видеозаписи всех уроков

• Если вы по какой-то причине не смогли посетить урок, не переживайте, спустя пару часов после окончания занятия он доступен в записи в хорошем качестве

Материалы и исходники

• Все примеры, которые мы рассматриваем на уроках, вы получаете в архиве. Таким образом, даже не написав ни строчки кода, вы получаете набор готовых решений, сделанных на уроке.

Домашние задания

• После каждого урока выдаётся домашнее задание, которое нужно сделать для закрепления пройденного материала. Плохие оценки не ставим – только конструктивные комментарии

Программа курса:

Vue и React совмещены в одном курсе, так как более половины тем, связанных с SSR, для них являются общими. Мы реализуем полноценный и удобный SSR для каждого из фреймворков.

Урок 1

• Теория Server Side Rendering
• Серверная и клиентская точки входа
• Жизненный цикл приложения
• Архитектурные подставы SSR
• Борьба с синглтонами на уровне ES-модулей
• Реализация простейшего SSR

Урок 2

• Создание SSR dev-сервера с Vite
• Статические ресурсы и внешний шаблон
• Создание контейнера зависимостей
• Знакомство с AsyncLocalStorage
• Изоморфный DI на клиенте и сервере
• Роутинг в SSR режиме

Урок 3

• Получение данных от API
• Создание hook / composable useAsyncData
• Жёсткая типизация
• Ожидание асинхронных данных
• Suspense + await во Vue
• Suspense + use в React

Урок 4

• Создание компонента Async Helper
• Нюансы гидратации SPA
• Асинхронные данные и проблемы гидратации
• Проброс кэша через HTML
• Генерация кэширующего ключа
• Инвалидация кэша

Урок 5

• Функции API и паттерн репозиторий
• Ключ выборки функции как метка кэша
• Феерическая типизация с Dot Key
• SSR и авторизация пользователей
• Правильное взаимодействие router и store
• Игнорирование auth / guest страниц

Урок 6

• Обработка ошибок при SSR
• Генерация SEO тегов
• Работа с глобальными данными
• Проброс состояния хранилища
• Улучшение производительности SSR
• Механики серверного кэша

Урок 7

• Создание репозитория универсальных помощников
• Публикация на npm и github
• Доработка чистовика системы под Vue
• Вынесение Vue-кода в отдельный репозиторий
• Применение библиотеки в проекте

Урок 8

• Доработка чистовика системы под React
• Решение проблемы промигивания Suspense
• Фейковый Response для renderToPipeableStream
• Вынесение React-кода в отдельный репозиторий
• Применение библиотеки в проекте

Автор курса Дмитрий Лаврик:

• Профессиональный веб-разработчик.
• Опыт работы в сфере разработки сайтов более 15 лет.
• Ориентируется во всех вопросах создания сайтов, от вёрстки до backend-а.