Выкатил новый экскурсионный сайт
minsk-piter.ru
Проект длинной полгода... Пожалуй, один из самых длинных моих проектов, которые я разрабатывал своими ручками.
Стек:
- Hugo, генератор сайтов
- Webpack
- indexedDB
- PWA
Ключевой аспект и краеугольный камень разработки - скорость. Сайт должен был стать и стал в результате super fast, умопомрачительно быстрым. За счет чего?
- Hugo позволяет нам отдавать статику. Никакой серверный код не выполняется, nginx молниеносно отдает страницу.
- PWA - Power Web Application и его мега-кэширующий service Worker. Если сервер упал или у пользователя неожиданно закончился интернет, он все равно сможет открыть страницу (если до этого он ее когда-либо уже загружал, конечно).
- indexedDb, браузерная база данных. Я работал с ней с помощью библиотеки Dexie.js (ее главный минус, отсутствие гибкой фильтрации в момент обращения к таблице. Приходилось делать, условно SELECT *, а потом уже js-ом фильтровать данные)
- http2/push
- preload шрифтов
- loading=«lazy» и lazysizes.js
Чем плох Hugo:
- отсутствие web GUI. неопытному пользователю будет вновинку вносить изменения в текстовом редакторе, а потом с помощью cmd деплоить сайт на сервер. не то, чтобы это сложно, просто необычно.
- Hugo не умеет генерировать страницы из какого-нибудь API. Скажем, у вас на бэкенде может быть любой движок, а Hugo сделал бы вам статический сайт, но нет, так не работает. Поэтому он в этом смысле проигрывает Gatsby
- Чтобы выйти на новый уровень скорости - изоморфное приложение, придется написать просто огромную кучу js, которую станет страшно поддерживать
Чем хорош Hugo:
- скорость наполнения сайта
- скорость работы сайта
- полный контроль над layout в отличие от Gatsby, где вы врядли до конца поймете или узнаете окончательный размер страницы
В итоге, я бы лучше выбрал Gatsby: он умеет генерировать статические страницы из API, которое можно сделать любым, в том числе сколь угодно дружелюбным к пользователю. И он работает без перезагрузки страницы, то есть не надо дергать каждый раз сервер, чтобы отрендерить страницу. Вместо этого он дергает кусочки json и рисует layout.