Рубрики
Без рубрики

Что такое статическое поколение сайта? Как Next.js использует SSG для динамических веб-приложений

Статические сайты такие же старые, как сама веб. Но рост JavaScript открыл дверь, чтобы сделать эти статические сайты более динамичными. Пока что может включать в себя создание HTML-файла вручную, как мы можем использовать статическое поколение для создания приложений с современными инструментами? Что такое статично

Автор оригинала: FreeCodeCamp Community Member.

Статические сайты такие же старые, как сама веб. Но рост JavaScript открыл дверь, чтобы сделать эти статические сайты более динамичными.

Пока что может включать в себя создание HTML-файла вручную, как мы можем использовать статическое поколение для создания приложений с современными инструментами?

  • Что такое статическое поколение?
  • Что происходит во время статического поколения?
  • Как Next.js использует статическое поколение?
  • Статически создание приложения с Next.js

Что такое статическое поколение?

Статическое поколение описывает процесс компиляции и рендеринга веб-сайта или приложения по времени сборки. Вывод – это куча статических файлов, включая сам файл HTML и активы, такие как JavaScript и CSS.

Если вы не слышали о статическом генерировании, но эта концепция звучит знакомо, вы, возможно, слышали об этом более дольше на имя статического поколения сайта или его аббревиатуру SSG.

Что происходит во время статического поколения?

На основе веб-приложений на основе JavaScript, поскольку мы традиционно знаем их, работают, используя библиотеки, такие как React или Scripts, во время выполнения в браузере.

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

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

Как Next.js использует статическое поколение?

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

Next.js предоставляет Немного разных API для получения данных в том числе GetStaticProps и getserversideprops , который, в зависимости от того, как они используются, определяет, как Next.js построит ваше приложение.

Если вы используете только GetStaticProps Чтобы получить данные, Next.js приведет к тому времени, что данные в сборке, оставляя вас полностью статичной страницей.

Если вы используете getserversideprops Next.js узнает, что приложение требует сервера для рендеринга этих страниц.

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

Хотя он не делает это по умолчанию, Next.js также предоставляет возможность экспортировать приложение в статические файлы в отдельный каталог после создания приложения.

Во-первых, вы бы запускали Следующая сборка Команда для создания приложения, то вы будете работать Следующий экспорт Что по умолчанию делает приложение доступным в качестве статических файлов в OUT каталог.

Как статически генерировать приложение с помощью Next.js

Чтобы получить представление о том, как это работает, мы можем быстро создать новое приложение Next.js.

Единственные требования для этого в том, что у вас есть Узел Установлено с NPM и возможность использовать терминал для запуска команд.

Как создать приложение Next.js

Начало работы так же просто, как запуск одной строки в терминале.

Откройте каталог, который вы хотите создать свой проект и запустить:

npx create-next-app my-static-nextjs-app

После завершения установки вы можете перейти к новому каталогу проекта:

cd my-static-nextjs-app

После того, как там начните свой сервер разработки:

npm run dev

И как только сервер будет готов, вы можете открыть http://localhost: 3000 В вашем браузере, где теперь вы можете увидеть ваше новое приложение Next.js!

Как построить приложение Next.js

Теперь, когда мы имеем доступное приложение, давайте попробуем построить его.

В том же каталоге запустите команду:

npm run build

Если вы посмотрите на выход внутри терминала, мы видим несколько важных вещей.

Во-первых, Next.js позволяет нам знать, что он проходит через процесс сборки, включая оптимизацию приложения для производительности, составление приложений и сбора данных.

Далее мы видим, что Next.js показывает нам расстройство того, как она построила каждую страницу.

Начальный шаблон Next.js по умолчанию включает несколько статических страниц и пример маршрута API.

Используя легенду внизу, мы видим, что все страницы и активы стали статически сгенерированы с меткой одного маршрута по требованию сервера, который будет нашим маршрутом API.

Примечание. Для целей этого прохождения мы можем игнорировать маршрут API, но Next.js вместе с Vercel предоставляет возможность строить функции лямбда как часть API next.js.

Как построить статический приложение Next.js

С нашей Build.js Build мы знаем, что мы просто построили некоторые статические страницы, но у нас могут быть проблемы с нахождением. Если мы посмотрим на папки и файлы в нашем проекте, это не сразу понятно, где эти файлы.

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

Технически этот каталог включает в себя все наше приложение, но это не то, что мы можем легко развернуть до статического хостинга.

Next.js также предоставляет возможность экспортировать приложение. Это займет приложение, которое мы создали и создали набор статических файлов, которые мы можем использовать для развертывания нашего приложения.

Внутри Package.json Файл, обновите построить Скрипт, чтобы включить Следующий экспорт :

"build": "next build && next export",

После обновления снова запустите команду сборки в каталоге проекта:

npm run build

И теперь мы видим, что не только построили приложение, как мы сделали на нашем последнем шаге, Next.js позволяет нам знать, что мы также экспортируем приложение, которое мы встроенные в статические файлы.

Если мы заглянем внутрь нашей папки проекта, теперь мы должны увидеть новый каталог под названием OUT Отказ

Если мы заглянем внутрь этой папки, теперь мы можем увидеть все наше приложение статически скомпилировано, включая index.html Файл, а также все CSS и JS, необходимые для использования приложения!

Где мы можем пойти отсюда?

Мы узнали, что мы можем использовать Next.js и концепцию статического поколения в статически составить приложение.

Инструменты, такие как Next.js, могут сделать это, составив наш код, похоже на то, что мы могли бы увидеть в браузере, так что к тому времени, когда наше приложение попадает в браузер, все готово к работе.

С помощью простой команды мы также можем построить и компилировать наше приложение, а также экспортировать его в статические файлы. Мы можем развернуть эти статические файлы на любую статическую службу хранения, такими как Vercel или AWS S3. Это дает нам простой способ ремедели динамические веб-приложения, которые быстро и дешевые.

Узнайте больше о том, как Next.js использует разные API, чтобы обеспечить как статический, так и динамический опыт Посещение документов Next.js Отказ