Генерация nuxt проекта для статических сайтов с SSR

Размещение проекта на статическом хостинге

Ещё один способ разместить наш проект на продакшн-сервере — это использовать генерацию статических файлов. Этот метод называется Static Hosting, и он подходит для статичных хостингов, где нет возможности развернуть окружение Node.js.

Поддержка SSR

Обратите внимание, что данный метод также поддерживает рендеринг с помощью SSR (server-side rendering), чтобы сайт был доступен для поисковых систем. Однако в этом способе можно сгенерировать проект так, чтобы не было поддержки SSR, и он будет работать немного быстрее.

Команда для генерации

Для того чтобы сгенерировать проект таким образом, есть специальная команда generate, которую мы с вами и выполним. Если мы посмотрим наш package.json, там есть такая команда, которую сейчас выполним:

npm run generate

Сгенерированные файлы

Обратите внимание, что у нас в проекте теперь появилась папка с HTML-файлами, по которым мы можем обращаться к нашему проекту. Если открыть файл index.html в браузере, мы увидим главную страницу. Если перейти в папку parent/test/index.html, то соответственно увидим тестовую страницу.

Таким образом, роуты работают в скомпилированном виде. Генерация происходит не как отдельная серверная служба, а как статические HTML-файлы. То есть, у нас уже готовая HTML-разметка со скриптами, которая представляет собой итоговый проект.

Загрузка на хостинг

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

Автоматическая HTML-разметка

Обратите внимание на систему роутинга: например, файл parent/test/index.html. В сгенерированной разметке у нас уже есть готовая HTML-структура, которая подставляется автоматически при генерации контента страницы. По сути, это замена server-side rendering, и поисковые системы уже видят разметку для индексации.

Преимущества метода

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