phone_picture

Цель курса

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

Задачей максимум является создание за время курса open-source пакетов для SSR на Vue и React.

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

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

11 марта, 19:30 — урок 1

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

18 марта, 19:30 — урок 2

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

25 марта, 19:30 — урок 3

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

1 апреля, 19:30 — урок 4

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

8 апреля, 19:30 — урок 5

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

15 апреля, 19:30 — урок 6

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

22 апреля, 19:30 — урок 7

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

29 апреля, 19:30 — урок 8

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

Преподаватель курса

Дмитрий Лаврик

Профессиональный веб-разработчик

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

Опытный преподаватель

Начиная с 2011 года, под его руководством тысячи учеников прошли путь от новичков до успешных веб-программистов. Если вы ещё не знакомы с Дмитрием, рекомендуем заглянуть на его youtube-канал, где вы найдете много полезных видео и сможете узнать стиль преподавания Дмитрия.

Дмитрий Лаврик

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

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

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

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

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

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

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

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

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

Обратную связь от преподавателя

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

Доступ в закрытую группу

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

Обзор курса

Внимание! Для прохождения данного курса необходим хотя бы небольшой опыт в создании SPA на Vue или React, а также понимание базовых тем создания backend на NodeJS.

Если вы хотите подробнее ознакомиться с идеями курса,

посмотрите видео, расположенное рядом

Также в данном видео рассказывается о том, почему самописный SSR иногда может быть проще Nuxt / Next.

Запись на курс

Скидка на раннюю запись!

21 000 руб. 14 700 руб.

 
Способы оплаты

Часто задаваемые вопросы

Правильно ли смешивать Vue и React

Думаю, что да. Темы Server Side Rendering находятся между frontend и backend, минимум 50% теории и кода для Vue и React будут общими.

Почему желательны знания backend

Потому что SSR осуществляется в среде NodeJS в момент запроса пользователя к серверу. То есть часть кода придётся писать на Node.

Что за идея с open-source пакетами

Как показала практика, самописный SSR неудобно таскать из проекта в проект, вот и хочется сделать библиотеку. Подробный рассказ об этом есть в видео.

Отличается ли это от старых курсов Vue 2 / React 2

Безусловно. Там Server Side Rendering соседствовал с другими темами и всегда получался не доведённым до ума на 100%.

Чем не устраивают Nuxt / Next

Прекрасные инструменты. Но порой разработчика могут не устраивать их архитектурные принципы. К тому же, никто не отменял внедрения SSR в готовый проект, написанный на чистом Vue / React.

Будут ли ещё потоки этого курса

В ближайшее время не планируются. Если получится реализовать все задумки, то дальше этот материал будет только в записи.