Техническая информация о веб-приложении
Данное приложение сделано на фреймворке Next.js, основанном на библиотеке React. Этот фреймворк значительно упрощает задачу по генерации веб-страниц на сервере. При таком подходе клиентский браузер получает готовую страницу, которую сразу можно начать отрисовывать. (При альтернативном подходе, когда страницы генерируются на клиенте, браузер получает заготовку страницы, которую сначала надо заполнить текстовым содержимым. А для того, чтобы можно было заполнить страницу содержимым, необходимо получить и распарсить соответствующий JavaScript-код.)
Текстовые данные для серверной генерации страниц приложения берутся из профиля фрилансера Lazytech на сайте Хабр Фриланс.
Верстка страниц адаптивная («отзывчивая»). Изображения, показываемые на страницах, хранятся на стороннем сайте. Поскольку ширина и высота картинок в общем случае неизвестны и могут быть произвольными, пришлось принять меры по предотвращению перетекания содержимого и подергивания страницы при их загрузке и отрисовке. С этой целью сервер приложения сначала запрашивает со стороннего сайта параметры всех изображений, а затем генерирует страницу с учетом полученных размеров.
Отдельные страницы (например, данная страница) создаются на сервере не при каждом запросе, а лишь однократно («статическая генерация»), что позволяет снизить нагрузку на сервер.
Первоначальный вариант проекта был реализован на фреймворке Next.js «из коробки», то есть как на сервере, так и на клиенте использовалась библиотека React. Однако эта библиотека достаточно «тяжелая» для столь простого веб-приложения, поэтому в данном варианте проекта на клиенте вместо нее используется ее более «легкий» аналог Preact (для серверного рендеринга, как и раньше, используется React). Новый вариант особенно хорошо подходит для «слабых» клиентских устройств, поскольку клиентский браузер загружает и парсит меньше JavaScript-кода (см. два скриншота ниже).
Перевести клиентскую часть приложения с React на Preact оказалось очень просто. Сначала я установил свежую версию Preact (которая, в отличие от более ранних версий, содержит в себе модуль preact-compat, так что мне не понадобилось отдельно его устанавливать). Далее я внес изменения в файл next.config.js, опираясь на статьи Next.js: Replace React with Preact и 10 Next.js Tips You Might Not Know. И всё, приложение запустилось без ошибок с первой попытки.