Ученик пишет: «На странице курса не появляется блок «Похожие курсы» — просто пусто». Вы открываете страницу — блок и правда пуст. Но чтобы понять, где искать причину, сперва нужно выяснить: этот блок должен был прийти уже готовым от сервера, или его должен был дорисовать код в браузере уже ПОСЛЕ загрузки страницы? Ответ полностью меняет, куда смотреть дальше.
Чему научишься за этот урок:
— объяснить, как браузер строит страницу из полученных данных;
— различать содержимое, которое пришло готовым с сервера, и то, что дорисовал код в браузере;
— по симптому дефекта предположить, на какой из этих двух сторон искать причину.
Как браузер строит страницу
Вспомните главу про устройство ПО: браузер — это тонкий клиент, который запрашивает у сервера страницу и показывает то, что получил. Разберём этот процесс на конкретных шагах:
- Браузер запрашивает у сервера HTML-документ — структуру страницы (вспомните урок про HTML/CSS/JS).
- Сервер отдаёт HTML. Пока запрос выполняется, браузер видит в этом HTML ссылки на дополнительные файлы: стили CSS, код JavaScript, картинки — и запрашивает их отдельно.
- Браузер собирает всё вместе: применяет CSS к структуре HTML, получается видимая страница с оформлением.
- Если на странице есть JavaScript, он запускается уже ПОСЛЕ того, как страница в целом собрана, — и может изменить содержимое: подгрузить дополнительные данные с сервера отдельным запросом, показать или скрыть блоки, отреагировать на клики.
1. Запрос HTML --> 2. HTML пришёл, в нём ссылки на CSS/JS/картинки
|
v
3. Браузер догружает CSS, JS, картинки отдельными запросами
|
v
4. Страница собрана и показана (HTML + CSS)
|
v
5. JS запускается ПОСЛЕ показа -- может дорисовать/изменить содержимое
Серверный рендеринг vs клиентский рендеринг
Серверный рендеринг — содержимое уже готово в самом HTML, который прислал сервер. Такой контент виден сразу, как только страница загрузилась, даже если JavaScript ещё не успел запуститься или вообще не сработал.
Клиентский рендеринг — содержимое строит или изменяет код JavaScript уже в браузере, обычно отдельным запросом к серверу за данными после того, как основная страница уже показана. Если этот JS-запрос не выполнился (ошибка сети, ошибка в коде), пользователь увидит пустое место — при этом сама страница вокруг загрузилась нормально.
Практический вывод: если пустует ВСЯ страница — вероятнее проблема на сервере или в сети до получения HTML. Если пустует ОДИН конкретный блок, а остальная страница в порядке, — вероятнее это клиентский рендеринг, и стоит проверить отдельный запрос JS за данными (вкладка Network в DevTools, которую вы уже изучали).
Пример на полигоне
Возвращаясь к пустому блоку «Похожие курсы»: сама страница курса (заголовок, описание, кнопка «Записаться») пришла от сервера сразу и отображается нормально. Блок «Похожие курсы» на этой странице устроен так: JavaScript после загрузки страницы отдельно запрашивает у сервера список похожих курсов и дорисовывает блок. Раз остальная страница в порядке, а пустует только этот блок — подозрение падает именно на клиентский рендеринг: нужно открыть DevTools, вкладку Network, и посмотреть, что случилось с этим отдельным запросом.
Итог:
— страница собирается из HTML, CSS, JS и запросов за дополнительными данными, а не появляется целиком одним куском;
— содержимое бывает серверным (готово сразу в HTML) или клиентским (дорисовывается JS-кодом после показа страницы);
— если пустует один блок на фоне рабочей страницы — вероятнее клиентский рендеринг, и смотреть нужно в вкладку Network, а не только на экран.
Контрольный вопрос. Что браузер запрашивает у сервера в первую очередь при открытии страницы?
Подсказка: Вспомни первый шаг из последовательности урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Когда запускается JavaScript-код страницы относительно момента, когда страница уже собрана и показана?
Подсказка: Вспомни порядок шагов в ASCII-схеме урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что означает «серверный рендеринг» содержимого?
Подсказка: Ключевое слово — «уже готово», а не «дорисовывается потом».
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие из утверждений про клиентский рендеринг верны (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Сбой одного отдельного клиентского запроса не обязан ломать всю остальную уже загруженную страницу.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как называется способ показа содержимого, при котором JavaScript дорисовывает его в браузере уже ПОСЛЕ показа основной страницы? Ответь двумя словами: «… рендеринг».
Подсказка: Противоположность серверному рендерингу.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. В какой вкладке DevTools (уже изученной в прошлой главе) удобнее всего проверить, что произошло с отдельным запросом JavaScript за дополнительными данными? Ответь одним словом.
Подсказка: Это вкладка, которая показывает все запросы, отправленные браузером серверу.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На странице курса пропала ВСЯ страница целиком — вместо неё браузер показывает белый экран с ошибкой соединения, HTML вообще не пришёл. Как двумя словами описать, на каком этапе взаимодействия браузера и сервера возникла эта проблема? Ответь двумя словами.
Подсказка: Если пропала абсолютно вся страница, а не один блок, — вспомни практический вывод из урока про то, где вероятнее искать причину.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. На нашем полигоне страница каталога курсов показывает заголовок, поиск и фильтры нормально, но список самих курсов остаётся пустым — при этом остальная часть страницы полностью рабочая. Список курсов на этой странице устроен так же, как «Похожие курсы» из примера урока — отдельным JS-запросом после показа страницы. Какую вкладку DevTools стоит открыть в первую очередь, чтобы разобраться, что случилось с этим запросом? Ответь одним словосочетанием.
Подсказка: Пустует один конкретный блок на фоне рабочей остальной страницы — это тот же паттерн, что и в примере урока.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Ученик сообщает: «Открываю страницу оплаты курса — сначала всё видно нормально (тариф, цена), но кнопка «Оплатить картой» появляется с задержкой в 2 секунды, будто её дорисовывают позже остального». Объясни в 2-3 предложениях, почему такая задержка именно ОДНОГО элемента (а не всей страницы) — это правдоподобный симптом клиентского, а не серверного рендеринга, и что бы ты проверил в DevTools, чтобы подтвердить это предположение.
Критерий приёмки: объяснено, что если бы кнопка пришла в HTML вместе с остальной страницей (серверный рендеринг), задержки быть не должно — она появилась бы одновременно с ценой; задержка именно у одного элемента указывает на отдельный клиентский запрос/скрипт, который выполняется позже. Названа конкретная проверка: открыть вкладку Network и посмотреть, есть ли отдельный запрос, связанный с этой кнопкой, и сколько он длится.
Подсказка: Подумай, почему один элемент появляется позже остальных, если бы всё пришло одним HTML-документом сразу.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Задание. У ученика в браузере отключён JavaScript (редкая, но реальная ситуация). Страница курса на полигоне показывает заголовок, описание и цену — это всё пришло в HTML от сервера. Но блок «Похожие курсы» (в уроке он был примером блока, который JavaScript дорисовывает уже после загрузки страницы) не появляется вообще. Что именно перестаёт работать в этой ситуации и поэтому не даёт блоку появиться? Ответь одним словосочетанием.
Подсказка: Заголовок и цена не зависят от JavaScript, потому что пришли готовыми в HTML. А чем именно строился блок «Похожие курсы» по описанию из этого же урока?
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что произойдёт, если содержимое пришло серверным рендерингом, а JavaScript на странице по какой-то причине не выполнился?
Подсказка: Серверный рендеринг не зависит от того, выполнился JavaScript или нет — вспомни определение из урока.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Что дальше
Мы разобрали, как браузер собирает страницу и откуда берётся её содержимое. Дальше — предметно про то, как эта страница выглядит на разных экранах: вёрстку и адаптивность, где дефекты видны глазами, а не только в DevTools.
