<script seutp>
import {onMounted} from 'vue'
onMounted(()=>{
console.log("OK Mount");
});
</script>
이 콜백 함수에 어떤 함수를 실행할 건지 넘겨주면 되는데, 주의할 점은 setup() 공간 내에서 onMounted 를 호출해야 한다는 점이다.
script setup 으로 선언을 하면 작성한 스크립트 코드가 즉시 서버 또는 클라이언트에서 실행되지 않고, setup() 함수로 묶여 하나의 콜백 함수 형태로 시스템에 전달된다. 시스템에서는 내부 라이프 사이클에 따라 초기화 과정인 setup() 이 실행될 시점쯤 해당 함수를 실행한다.
즉 <script setup> 을 붙인 범위는 setup() 으로 내보내는 것과 동일하다.
위 코드 처럼 구성하면 onMounted 는 클라이언트 브라우저에서 렌더링할 때만 실행된다. 보통 여기는 브라우저 클라이언트 측에서 생성된 Dom 에 어떤 값을 연결하거나 할당할 때 만 사용한다.
import {onServerPrefetch} from 'vue';
onServerPrefetch(()=>{
console.log("ServerPrefetch");
});
onServerPrefetch 는 서버단에서만 실행되어야 할 어떤 콜백 함수를 등록하고 사용할 수 있다.
<script setup>
console.log("[SERVER] " + process.server);
console.log("[CLIENT] " + process.client);
console.log("OK");
import {onMounted} from 'vue';
onMounted(()=>{
console.log("OK Mount");
});
import {onServerPrefetch} from 'vue';
onServerPrefetch(()=>{
console.log("ServerPrefetch");
});
</script>
위와 같이 사용하면 서버는 아래와 같이 출력되는 것을 확인할 수 있다.
√ Vite server hmr 6 files in 65.762ms
[SERVER] true
[CLIENT] false
OK
ServerPrefetch
[SERVER] true
[CLIENT] false
OK
ServerPrefetch
다만 브라우저에서 접속했을 때 SSR 이라는 태그가 붙어 같이 출력되는 것을 볼 수 있는데,
(ssr) ServerPrefetch
at <anonymous> (C:\Users\Whitmem Home\Desktop\Work2\project_ test\node_ modules\nuxt\dist\core\runtime\nitro\ plugins\dev-server-logs.js)...
이는 브라우저에서 실행된 결과가 아니라 서버에서 실행된 결과를 디버깅 플러그인에 의해 던져주는 것으로 서버에서 실행된 출력 결과임에 유의해야 한다.
이외 useAsyncData() 라는 것이 있는데 이는 Hydration 이 적용되는 것으로, 서버에서 처리를 했으면 클라이언트에서 처리를 하지 않는 함수 처리라고 보면된다. 일반 콜백 형식은 아니고 보통 데이터를 가져올 때 사용하는 함수로 비동기 내용을 넣어 호출해주면 된다.
await useAsyncData("test1", ()=>{ return promise 리턴 });
또는 async 비동기 함수를 애초 처음부터 넣어서 할당할 수 있다.
await useAsyncData("test1", async ()=>{ return "data"});
이럴 경우 서버에서 해당 처리가 완료된 경우 클라이언트에서는 중복 처리하지 않는다. 아무래도 중복 처리를 확인하기 위해서 임의 key 값을 받는다. 이 값은 데이터가 다른 요청의 키 값과 중복돼서는 안된다. 여기서는 test1 로 했는데 실제 게시글을 가져오고 코멘트를 가져오는 처리라면 board, comment 와 같은 형식으로 구별지어야 할 것이다.
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
<script setup>
const {data} = await useAsyncData("test1", ()=>{
const promiseResult = new Promise((resolve, error)=>{
console.log("호출 과정이 실행됩니다.");
resolve("데이터");
});
return promiseResult;
});
console.log(data.value);
</script>
useAsyncData 가 반환하는 data는 promise 의 최종 결과를 바로 내뱉지 않고 자체 내부 ref 값을 반환하기 때문에 스크립트에서 가져와 사용하기 위해서는 .value 로 실제 데이터를 가져와야 한다.
아무튼 위와 같이 값을 가져온 경우,
(ssr) 호출 과정이 실행됩니다.
at <anonymous> (C:\Users\Whitmem Home\Desktop\Work2\project _test\node_modules\nuxt\dist\core\ runtime\nitro\plugins\dev-server-logs.js)...
browser.mjs?v=f1734152:48 (ssr) 데이터
at <anonymous> (C:\Users\Whitmem Home\Desktop\Work2\project _test\node_modules\nuxt\dist\core\ runtime\nitro\plugins\dev-server-logs.js)...
SSR 렌더링인 서버 측 SSR 요청은 클라이언트 브라우저에서 중복 실행되지 않는 것을 확인할 수 있다. 클라이언트 브라우저에서는 SSR 결과가 콘솔 창에 출력되는 것이므로, 실제로는 서버에서 실행된 것이다. 즉 실제 게시글 데이터를 가져올 때는 서버, 클라이언트 브라우저에서 중복 실행되면 내부 백엔드 서버에 부하가 될 수 있으므로, 한번만 실행하는 것이다.