1. useFetch

데이터 통신과 관련한 거의 모든 내용은 "Nuxt-개요 > 데이터 가져오기" 에 담겨있다.

이번 장에서 간단하게 실습한 후 위 내용을 참고하면 이해에 더 도움이 될 것이다.

 

useFetch 컴포저블은 SSR 을 지원하는 컴포넌트이다. 서버 측, 클라어언트 측 모두에서 사용할 수 있으며, Nuxt 에서 제공하는 내장 컴포저블이다. 이를 통하면 개발자의 개입없이 네트워크 중복 호출을 피할 수 있다.

 

데이터 호출과 관련해서 Nuxt 에서 제공하는 컴포저블 및 함수에는, useFetch 이외에도 useLazyFetch, useAsyncData, useLazyAsyncData, $fetcch 가 있다. useFetch 컴포저블은 setup 함수에서 데이터를 가져올 때 사용할 수 있는 가장 간단한 방법이다.

 

간단한 사용 예를 살펴보자

 

/pages/todos.vue

<script setup lang="ts">
const { data, pending, error, refresh } = await useFetch('https://jsonplaceholder.typicode.com/todos', { method:'get'})
</script>

<template>
<div>
  <table class="min-w-full table-auto bg-blue-950">
    <thead>
    <tr>
      <th class="px-4 py-2">ID</th>
      <th class="px-4 py-2">Title</th>
      <th class="px-4 py-2">Completed</th>
    </tr>
    </thead>
    <tbody>
    <!-- Loop through todosData to populate the table rows -->
    <tr v-for="todo in data">
      <td class="border px-4 py-2">{{ todo.id }}</td>
      <td class="border px-4 py-2">{{ todo.title }}</td>
      <td class="border px-4 py-2">
        <!-- Use a checkmark if completed, otherwise a cross -->
        <span :class="{ 'text-green-500': todo.completed, 'text-red-500': !todo.completed }">
                            {{ todo.completed ? '✔' : '❌' }}
                        </span>
      </td>
    </tr>
    </tbody>
  </table>
</div>
</template>

<style scoped>

</style>

 

http://localhost:3000/todos 에 접속해보면 아래와 같이 나올 것이다.

브라우저에서 마우스 우클릭 후 소스보기를 해보자. 

위 그림과 같이 서버사이드에서 HTML 이 렌더링 된걸 확인할 수 있다.

 

SEO 가 중요하지 않은 경우이거나, 서버사이드 렌더링을 피해야 할 경우가 있다. 이럴때는 server 옵션을 false 로 주면 된다. 소스 보기를 하면 TABLE > TR > TD 엘리먼트가 사라진걸 확인 할 수 있다.

 

브라우저 개발자 도구를 통해 클라이언트에서 todos 를 호출하는 것을 확인 할 수 있다.

 

위에서 살펴본 것처럼 useFetch 를 사용하면 서버측 렌더링과 클라이언트 렌더링 모두 자유롭게 지원할 수 있다. 사용하기도 간편해서 웬만한 데이터 통신에선 이 것 하나면 충분하다. 그러나, 간혹 좀 더 섬세한 제어가 필요할 때가 있다. 이는 이어지는 장에서 계속 알아보자.