Я работал над 10converters.com Как моя практика реагирования в прошлом месяце. После некоторых исследований я обнаружил, что следующее приложение Static HTML является лучшим способом для проекта. Надеюсь, что обмен может помочь кому -то здесь.
Static HTML – лучший способ для небольших сайтов, таких как блоги и онлайн -инструменты. Преимущества без сервера включает в себя:
- Легко развернуть, статические функции HTML + облачные функции (при необходимости)
- Поставщики облака управляет масштабированием
- Получить глобальный CDN хостингового поставщика
- SEO дружелюбный
Но также я нашел некоторые проблемы с этим, я упомяну об этом позже.
Я запустил этот проект с компонентов простого реагирования + материала. Вскоре я обнаружил, что поисковым системам не нравится этот чистый реагирование, потому что большинство поисковых ботов не могут справиться с Javascripts.
Затем я превратился в статический HTML, попробовал несколько решений, таких как React-Snap, React-Snapshot. Никто из них не мог правильно отображать каждую страницу, пока я не нашел следующее.js.
Next.js не ограничивается SSR (серверная срена) , это также может «экспортировать» весь сайт в статический HTML, и он отлично подходит для всех моих страниц.
Что вам нужно сделать, это просто написать ваше приложение, следующее.
next export
Тогда вы получаете все, что хотите. Я предполагаю, что вы уже кое -что знаете о следующем.js. Теперь давайте погрузимся только в ту часть статического экспорта HTML.
Next.js Используйте GetInitialProps () для генерации данных обезвоживания. Я покажу вам, что это не обязательно для статических приложений HTML.
В режиме SSR getInitialProps () будет вызвана в случае:
- На стороне сервера, если приложение еще не загружено браузером (новый запрос на ваше приложение)
- На стороне клиента, если приложение уже загружено, и перемещаться на новую страницу через компонент Next/Link
В статическом HTML -режиме GetInitialProps () будет вызвана в случае:
- В то время как «Next Export» выполняется, это также рендеринг на стороне сервера, но не во время выполнения, а во время транспортировки.
- На стороне клиента, если приложение уже загружено, и перемещаться на новую страницу через компонент Next/Link
Для SSR GetInitialProps () работает идеально, но не в статическом режиме HTML.
Причина в статическом режиме HTML, GetInitialProps () вызывается во время транспортировки, а затем данные об обезвоживании генерируются перед развертыванием.
Если ваша страница зависит от параметров URL или зависит от чего -то, что связано с вещами в реальном времени, таких как TimeStamp, свойства пользователя, GetInitialProps () не поможет.
Это может быть выполнено на стороне клиента, но только если приложение уже загружено и перемещается на новую страницу через следующую/ссылку.
Никогда не забывайте, что у нас есть статические приложения HTML для лучшего опыта поискового бота, а не для лучшего опыта пользователя.
Ссылки являются важной особенностью веб -сайта, только тег может быть распознан ботами.
Например, если вы хотите поместить кнопку, которая перейдет на другую страницу, делайте это:
Убедитесь, что замените по умолчанию тег как тег.
Даже для ботов, которые могут обрабатывать JavaScript, они не будут «нажимать» на вашей странице, они просто делают рендеринг. Если ваша ссылка не является тегом и зависит от, например, API истории JavaScript, боты их не узнают.
Для ссылок в моем Калькулятор класса Страница Приведенная ниже ссылки только по ссылке Material-UI:
import Link from '@material-ui/core/Link';
Final Grade Calculator
Next/Link обычно реализуется API истории Push, как мы упоминали выше, поисковым системам это не нравится.
Использование @Material-UI/CORE/COMPUNT COMPONETS потерял некоторые преимущества приложения для одной страницы. Для следующей/ссылки соответствующие страницы будут упакованы вместе, но если это @material-ui/core/core/core, используемая в приложении Next.js, связанные страницы (источники JavaScript) не будут упакованы вместе.
CON с использованием @material-ui/core/link-все ресурсы должны быть перезагружены каждый раз, когда пользователь перемещается на новую страницу. Pro – это размер одной страницы меньше.
Поскольку этот калькулятор класса является небольшим онлайн -инструментом, я предполагаю, что люди не будут перемещаться на другие страницы. Вот почему я просто использовал ссылку из материала-UI.
Если вы находитесь в других случаях, попробуйте найти другие лучшие решения.
Next.js имеет/page/_error.js для обработки страницы ошибки. Он работает в серверной стороне хорошо. _error.js может получить код состояния HTTP через getInitialProps ().
В статическом режиме HTML, как мы говорили выше в GetInitialProps (), _error.js не знает, что такое точная ошибка, это 404 или что -то еще. Но, к счастью, поскольку приложение является статическим HTML, единственная возможная ошибка – 404.
Так что всегда рендеринг 404 в _error.js в порядке.
Если какая -то часть вашего приложения действительно зависит от запросов пользователей времени выполнения, например, параметр URL. Используйте NOSSR для страницы или для компонентов на странице.
Доступно много компонентов NOSSR, я использую материал-UI, поэтому я использую компонент NOSSR, поставляется с материалом-UI.
Даже это очень базовая практика, я хотел бы поделиться всем путешествием не только о программировании, но и о развертывании и многих других.
Наслаждаться.
Оригинал: “https://dev.to/bayardlouis470/grade-calculator-next-js-static-html-app-4pnb”