Фронтенд Курилка
02.03
Основная концепция работы 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, отдельный пост`
еще контент в этом сообществе
еще контент в этом соообществе
Фронтенд Курилка
02.03
войдите, чтобы увидеть
и подписаться на интересных профи