Основная концепция работы Nuxt 3

На собеседованиях на vue.js frontend-developer спрашивают основную концепцию работы Nuxt 3.

Основной посыл является во взаимодействии северной и клиентской сторон приложения. Давайте разберем простой процесс работы Nuxt 3 приложения в универсальном моде Серверная сторона (SSR):

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

Клиентская сторона (CSR):

• Когда HTML-страница загружается в браузере, JavaScript-код Nuxt 3 (Vue.js) инициализируется.
• Nuxt 3 извлекает данные из HTML-кода (из специального скрипта) и использует их для гидрации (hydration) приложения.
• Гидрация означает, что Vue.js использует эти данные для инициализации состояния компонентов, чтобы избежать повторного запроса данных и обеспечить плавный переход от статического HTML к интерактивному приложению.

Как работает на реальном примере?

В Nuxt 3 есть встроенные композиции useAsyncData и useFetch, которые упрощают загрузку данных на сервере и их гидрацию на клиенте.

`// pages/index.vue

const { data: posts } = await useAsyncData('posts', () => { return $fetch('/api/posts') })

• {{ post.title }}

Преимущества работы такой гидрации данных? SEO-дружественность - Поисковые системы видят полностью сгенерированный HTML-код, что улучшает индексацию страниц.

Быстрая загрузка - Пользователь видит контент сразу после загрузки HTML, даже если JavaScript еще не загрузился.

Интерактивность - После гидрации приложение становится полностью интерактивным, как SPA.

Универсальность- Один и тот же код может выполняться как на сервере, так и на клиенте. Но это касается в целом преимущество работы всего приложения, так как можно писать на js/ts. Однако, не стоит забывать про особенность Nuxt Context, отдельный пост`