<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
<script>
console.log("OK");
</script>
위와 같은 소스 코드가 존재한다고 가정할 때 이 코드는 분명히 웹 브라우저단에서 렌더링되는 코드이기 때문에 웹 브라우저에서는 반드시 실행된다고 볼 수 있다.
실제 NuxtJS 서버를 개방한 뒤 실행하면 아래와 같이 출력되는 것을 확인할 수 있다.
OK
runtime-core.esm-bundler.js?v=f1734152:7089 <Suspense> is an experimental feature and its API will likely change.
devtools.client.js?v=f1734152:52 ✨ Nuxt DevTools Press Shift + Alt + D to open DevTools
즉 OK 는 브라우저 단에서 실행되는 것은 확실한데, 서버에서도 가끔 출력되는 것을 확인할 수 있다.
C:\Users\WhitmemHome\Desktop\Work2\project_test>npm run dev
> dev
> nuxt dev
Nuxt 3.17.5 with Nitro 2.11.12 nuxi 오후 5:04:35
오후 5:04:35
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ DevTools: press Shift + Alt + D in the browser (v2.5.0) 오후 5:04:37
√ Vite client built in 130ms 오후 5:04:40
√ Vite server built in 788ms 오후 5:04:41
√ Nuxt Nitro server built in 1907ms nitro 오후 5:04:43
i Vite client warmed up in 5ms 오후 5:04:43
i Vite server warmed up in 1229ms 오후 5:04:44
OK
NuxtJS 는 상황에 따라 서버 측에서도 렌더링하고 클라이언트 측에서도 렌더링하기 때문에 서버 측에서도 해당 코드가 실행될 수 있다는 점에 유의해야 한다.
즉 서버에서 애초 클라이언트 화면에 렌더링되어야 할 사항들을 미리 서버에서 가상 렌더러에 렌더링을 한다.[
즉 같은 코드에 대해서 서버에서도 추가적으로 실행하고, 브라우저에 전달되어 브라우저 단에서 실행될 수 있음에 유의해야 한다.
즉 NuxtJS 에서는 이러한 렌더링 차이를 구별할 수 있도록 bool 상태를 제공하는데 그것이 바로 process.server process.client이다.
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtWelcome />
</div>
</template>
<script>
console.log("[SERVER] " + process.server);
console.log("[CLIENT] " + process.client);
console.log("OK");
</script>
이 코드를 적용한뒤 NuxtJS 서버를 실행해본다.
[SERVER] true
[CLIENT] false
OK
접속할 때 쯤, 서버측에서는 위 처럼 콘솔이 출력되는 것을 볼 수 있고,
[SERVER] false
app.vue:10 [CLIENT] true
app.vue:11 OK
browser.mjs?v=f1734152:48 ssr [SERVER] true
at <anonymous> (C:\Users\WhitmemHome\Desktop\Work2\project_test\node_modules\nuxt\dist\core\runtime\nitro\plugins\dev-server-logs.js)
at Object.log (C:\Users\WhitmemHome\Desktop\Work2\project_test\node_modules\nuxt\dist\core\runtime\nitro\plugins\dev-server-logs.js)
at C:\Users\WhitmemHome\Desktop\Work2\project_test\app.vue
at process.processTicksAndRejections (node:internal/process/task_queues)
at async ViteNodeRunner.runModule (/node_modules/vite-node/dist/client.mjs)
브라우저 측 콘솔 출력에서는 위와 같이 출력되는 것을 볼 수 있다. 즉 서버에서 실행되는 코드에 대해서는 process.server 가 true로, 클라이언트에서 실행되는 코드에 대해서는 process.client 가 true로 디버깅되는 것을 확인할 수 있다.
NuxtJS 에서 동적인 데이터를 가져올 때, 위 상태 변수를 활용해서 목적지 서버의 아이피를 지정할 수 있다. 서버 측에서는 localhost 로, 클라이언트 측에서는 외부 주소로 접근하는 식으로 요청할 수 있다.