Как можно организовать выполнение функции в скрипте setup в NUXT3?

Question

Лавр

nuxtjs , vue

Как можно организовать выполнение функции в скрипте setup в NUXT3?

Почему использование `useFetch` встроенно в скрипт приводит к немедленному выполнению на сервере и корректному рендерингу, в то время как обертка этого вызова в функцию не поддерживает SSR и вызывает задержку?

14 августа 2024 г. 11:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

В NUXT3 можно организовать выполнение функции в скрипте setup путем создания скрипта с использованием хука `useFetch`. 

Например, такой скрипт в компоненте страницы может выглядеть следующим образом:

```vue
<template>
  <div>
    <p>Post title: {{ post.title }}</p>
    <p>Post body: {{ post.body }}</p>
  </div>
</template>

<script setup>
import { useFetch } from "@nuxt/http"

const { data: post } = useFetch(async () => {
  const response = await this.$http.$get('https://jsonplaceholder.typicode.com/posts/1')
  return response
})
</script>
```

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

Если обернуть вызов `useFetch` в функцию, то это может привести к тому, что запрос будет выполнен только на клиентской стороне после загрузки страницы, что может вызвать задержку и нежелательное поведение при рендеринге сервером (SSR). 

Поэтому рекомендуется использовать хук `useFetch` непосредственно в скрипте setup для организации выполнения функции, чтобы обеспечить корректное исполнение на сервере и быстрый рендеринг.