nuxt mounted 2번씩 호출 될때 (mounted twice when render)

오늘 개발하다가 발견한 특별한 상황

백앤드 개발자 분이 첫 페이지 로딩이 느린 것  같다는 말을 보니까

mounted 될 때 호출하는 function이 두 번씩 되는 것을 발견했다.

 

검색해보니 나와 같이 비슷한 상황이 나오는 사람들이 있는 듯했다.

원인은 찾지 못하고 급하게 처리하는 방식을 찾아서 공유해보려고 한다.

 

---

📌Nuxt mounted가 두 번씩 호출되는 원인

nuxt 레이아웃

문제는 nuxt 레이아웃에서 무슨 원인인지 모르겠는데

레이아웃에 import 한 컴포넌트들이 모두 2개씩 들어가 있다.🤔

 

 

위 내용을 확인한 건 크롬 확장 프로그램인 vue.js devtools이다.

만약 이용하고 아래 프로그램을 크롬에 추가해보자.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ko 

Vue.js devtools

 

 

 

🤘해결 방법

구글링 해본 결과 <client-only>로 컴포넌트를 감싸주면 해당 오류가 해결된다는 글을 보고 바로 적용해보았다.

nuxt layout client-only이용 후

<template>
    <div id="wrap">
        <client-only>
             <nuxt/>
        </client-only>
    </div>
</template>

위의 코드처럼 <nuxt/> 위에 <client-only>로 덮어주면,

두 번씩 <nuxt/>가 랜더링되어서 mounted가 두번 호출되는 오류는 해결이 된다.

 

<client-only>의 역할은?

해당 컴포넌트 안에 들어있는 자식 요소들은 클라이언트 사이드 랜더링 시 코드가 진행되게 해주는 역할을 한다.