Введение в данные в Nuxt

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

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

После доставки HTML в браузере происходит гидратация: Vue подключается к уже нарисованной разметке и делает её интерактивной. Если в начале setup страницы вызвать обычный fetch, запрос может выполниться на сервере, а затем браузер повторит тот же запрос уже у себя. Получается два обращения к API и лишняя задержка после загрузки страницы.

Для загрузки данных в Nuxt есть функция useFetch. Она учитывает серверный рендеринг: выполняет запрос на сервере, сохраняет результат и передаёт его клиенту вместе с HTML, чтобы браузер не дублировал работу. Так данные для первого экрана приходят в одном ответе с разметкой, а не догружаются отдельным шагом после открытия вкладки.

В примерах раздела мы будем обращаться к открытому тестовому API JSONPlaceholder. Он отдаёт готовые JSON-списки и записи по простым адресам, поэтому достаточно указать URL в коде страницы, не поднимая свой сервер.