Основная концепция работы 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') })

#Posts
  • {{ post.title }}

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

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

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

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

Основная концепция работы Nuxt 3
На собеседованиях на vue.js frontend-developer спрашивают основную концепцию работы Nuxt 3 | Сетка — новая социальная сеть от hh.ru Основная концепция работы Nuxt 3
На собеседованиях на vue.js frontend-developer спрашивают основную концепцию работы Nuxt 3 | Сетка — новая социальная сеть от hh.ru
repost

23

input message

напишите коммент

еще контент в этом сообществе

еще контент в этом соообществе

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь