Прошло несколько лет с тех пор, как я полюбил свой личный сайт. Когда вы программируете профессионально, иногда в конце дня или вечера у вас почти не остается времени, чтобы посвятить себя личным проектам. В последний раз, когда я переделывал свой сайт, я использовал Vue.js и Storyblok. Проведя 5 лет с Angular.js, пришло время попробовать что-то еще. Я помню, как подумал, насколько больше мне нравится Vue, мне казалось гораздо более естественным программировать в среде, которая изящно сочетает HTML-код шаблона с кодом JS. Затем, когда я закончил первый проход, я устроился на новую работу и начал изучать React + Typescript, и у меня не было времени на свой сайт.

Спустя три года я начинаю эффективно справляться со своими повседневными задачами, и у меня появляется время для собственных проектов. Я решил, что пришло время украсить мой сайт и добавить немного контента. Я начал просматривать свой код Vue и понял, что не записал большую его часть в память, и подумал, что будет проще перепроектировать мой сайт в React и использовать некоторые более современные инструменты и лучшие практики, которые я получил. Через выходные мой новый сайт был развернут на Heroku без особых хлопот, и я был счастлив.

Затем я начал добавлять новый контент, который планировал, и хотел измерить любой трафик. И вот тут я начал спускаться в кроличью нору. С точки зрения эффективности SEO я бы поставил ванильному приложению create-react примерно D+. Я думаю, что это, вероятно, верно для многих веб-сайтов в стиле SPA с тяжелым JS, когда веб-краулер Google приходит на стук, дома никого нет. Конечно, вы можете создать карту сайта и отправить страницы в Google Search Console, но если ваш сайт извлекает контент из API и асинхронно отображает его в браузере, ваши страницы практически невидимы для поисковых роботов, пока они не попасть в очередь рендеринга, что занимает значительно больше времени для обработки, учитывая объем веб-контента.

Другие проблемы, такие как заголовки страниц и метатеги, не учитываются в проекте create-react-app. Вам потребуется разработать собственный метод для их обработки, если вы хотите, чтобы они были уникальными и SEO-эффективными. дружелюбно. Описаны методы, в которых вы динамически заполняете document.title после загрузки вашего контента, но у меня есть сомнения, что веб-краулер будет читать обновленный тег вместо того, что было при начальной загрузке страницы.

Пока я читал о решениях для устранения этих проблем, я вспомнил, что читал о Next.js и смутно вспомнил, что он предлагает несколько уникальных способов развертывания сайта на основе React, одним из вариантов является развертывание полностью статический HTML-сайт. Это вызвало у меня пик интереса, потому что я знал, что статичный сайт со всем его содержимым, готовым к первоначальной раскраске, будет гораздо более оптимизированным для SEO.

Я не слишком много думал о своих следующих шагах, они просто как бы упали мне на колени. Я начал с раздела начать обучение. Это руководство помогло мне создать новый проект Next.js, и через несколько минут я что-то запустил в своей среде разработки. Здесь не было слишком много незнакомого, если вы пришли из React.

Встроенная маршрутизация

Главное, что меня зацепило, это то, что Next.js имеет встроенную маршрутизацию. И то, как работает маршрутизация, кардинально отличается от того, к чему вы, вероятно, привыкли. Вместо определения маршрутов в файле маршруты создаются автоматически на основе вашей файловой иерархии. По сути, все, что вы добавляете в папку pages в приложении Next.js, маршрут будет создан автоматически. В моем примере ниже у меня есть сообщения, проекты и службы, которые соответствуют моей основной навигации. У него даже есть очень простой способ создания динамических маршрутов, скажем, вы хотите /posts/:id, вы просто создадите файл в папке posts и назовете его [id].jsx. Это довольно круто.

Встроенный головной компонент

Когда я увидел, что у них есть встроенный компонент ‹Head /›, мне стало казаться, что Next.js был создан с учетом SEO. Компонент Head позволяет указать теги <head />, которые должны отображаться на ваших страницах. Вы можете использовать компонент на страницах, и если вам требуется собственный заголовок, который исходит от вашего API, вы можете передать его в свой компонент head, используя новое соглашение Next.js под названием getStaticProps, которое позволяет вам делать классные вещи, такие как передача на сервер. на основе данных или данных API, которые должны быть доступны до отображения вашей страницы.

Встроенный компонент изображения

На моем старом сайте я потратил немного усилий на отложенную загрузку изображений, чтобы улучшить производительность страницы. Поскольку я использую довольно большие изображения для своего раздела портфолио, я хотел убедиться, что эти страницы будут удобны для использования людьми на мобильных устройствах. Для этого я использовал пользовательскую библиотеку React под названием react-lazy-load-image-component. Это сработало очень хорошо, но это было задним числом, и я действительно рад видеть платформу для создания сайтов, которая относится к этому как к первоклассному гражданину. Компоненты Next.js Image автоматически обрабатывают ленивую загрузку. Они даже имеют встроенное свойство placeholder, которое может добавить эффект размытия во время загрузки изображения в высоком разрешении. Это также требует, чтобы вы определили высоту и ширину, что обеспечивает минимальное изменение макета, когда ваше изображение заканчивает загрузку. Другие адаптивные функции встроены, например, изменение размера изображения по запросу, даже для изображений, хранящихся на удаленных серверах. Это довольно удивительно.

Typescript и Eslint Build-in

Это функции, которые обычно требуют немного возни с новыми/существующими проектами, чтобы сделать их правильными. Тем не менее, Next.js уже имеет их в своем ядре. Вы можете начать новый проект со встроенной поддержкой TS, просто набрав в консоли npx create-next-app@latest --ts или, если у вас есть существующий проект, введите touch tsconfig.json, и Next.js автоматически настроит машинописный текст для работы внутри вашего проекта.

Гибкая выборка данных

С помощью Next.js вы можете развернуть сайт, который обслуживает страницы во время запроса или обслуживает предварительно обработанные страницы во время сборки, и все это в одном приложении. Это дает вам большую гибкость и оптимизирует производительность сайта.

Проверка в реальных условиях

Говоря о производительности, вот снимок производительности моих сайтов после редизайна Next.js, сделанный с помощью анализатора производительности Chrome Lighthouse.

Это значительное улучшение по сравнению с моей предыдущей версией create-react-app, которая набрала примерно 80 % производительности до внесения изменений. В конце концов мне удалось поднять его до 90, но это было после добавления react-lazy-load-image-component и других модов.

Я все же попал в небольшую загвоздку. После развертывания моего нового сайта на Heroku и решения некоторых проблем с DNS я протестировал свой новый сайт и начал замечать, что изображения загружаются медленнее, чем то, что я видел в своей среде разработки. Хуже того, я видел, как мое приложение вылетало при попытке получить эти изображения. Я пробовал много изменений, включая передачу переменной конфигурации PORT, но продолжал видеть сбой моего приложения, что было неприемлемо.

Хотя я не смог решить свою проблему на Heroku, я смог ее исправить и значительно сократить время загрузки, разместив свой новый сайт на Vercel, создателях Next.js. . На самом деле я был приятно удивлен их опытом адаптации, который развернул мой новый сайт за считанные минуты, и, в отличие от Heroku, они предлагают бесплатный SSL с бесплатными учетными записями. Vercel специализируется на хостинге приложений Next.js, и, скорее всего, вы увидите повышение производительности, если решите попробовать их.

В целом я очень доволен тем, что предлагает Next.js. Тем, кто знаком с React, не составит труда попробовать. Я думаю, что труднее всего понять концепцию функций getStaticProps и getStaticPaths, но как только вы поймете, как они работают, вы начнете понимать, что делает Next.js будущим веб-кодирования.

Если вам понравился этот пост, перейдите на chromaloop.com/posts для получения дополнительной информации.