Vue2 ClientOnly 컴포넌트 제작기

📌 목차

• 서론
• Vue SSR의 기본적인 설명
• 코드 설명
• 결론
• 참고 자료

📌 서론

 

안녕하세요.

이번에 라이엇 프로젝트가 vue를 커스터마이징하여 ssr을 구현하여 client only의 컴포넌트가 없었습니다.

따라서 필요에 따라 컴포넌트 전체의 랜더링 시점을 결정하는 Nuxt에서의 <client-only /> 컴포넌트를 만들게 되었습니다.

그에 따라 이글에서는 사용방법 및 구현 방식을 설명하고자 합니다.

💡 Nuxt에서 client-only 컴포넌트란?
ClientOnly 컴포넌트는 자식요소들을 client-side에서 랜더링 시킵니다.

📌 Vue SSR의 기본적인 설명

 

일단 해당 컴포넌트에 대해서 조금 더 깊게 이해를 하자면 먼저 customized vue ssr부분을 먼저 이해를 해야합니다.

 

 

보통 SSR일때는 server에서 데이터를 조합하여 만든 static한 HTML 파일이 하나가 떨어지게 됩니다. 그리고 Client side에 왔을땐 Client Bundle로 이제 javscript code 삽입 (hydrate)을 하게 됩니다.

 

Server Side → Static HTML → Client Side → HTML에 script 코드 삽입 (hydrate) → 이후 모든 동작은 CSR로 동작

 

그래서 어떤 side이냐에 따라 컴포넌트의 생명주기는 이렇게 됩니다.

 

	Server Side	Client Side
beforeCreate	V
create	V
beforeMount		V
mount		V

 

📌 코드 설명

 

이제 한번 전체 코드를 살펴 볼까요? 일단 전체 코드는 이렇게 짜여있습니다.

 

export default {
  name: 'ClientOnly',
  functional: true,
  render(h, { parent, slots }) {
    const { default: defaultSlots = [] } = slots();
    
    if (parent._isMounted) {
      return defaultSlots;
    }
    
    parent.$once('hook:mounted', () => {
      parent.$forceUpdate();
    });
    return defaultSlots.length > 0 ? defaultSlots.map(() => h(false)) : h(false);
  },
};

 

그럼 한줄 한줄씩 살펴보겠습니다.

 

render(h, { parent, slots }) {
    // ⭐️ 먼저 slots에 해당하는 것들을 배열로 선언해줍니다.
    // ex>
    // <client-only>
    //   <Comp1/>
    //   <Comp2/>   
    // </client-only>
    // defaultSlots = [Comp1, Comp2]
    const { default: defaultSlots = [] } = slots();
  },
};

render(h, { parent, slots }) {
    // ⭐️ 위에서 본것처럼 mounted가 호출이 된다면,
    // 이미 client side 이기 때문에 그냥 children을 render 합니다.
    if (parent._isMounted) {
      return defaultSlots;
    }
  },
};

render(h, { parent, slots }) {
    // ⭐️ 만약 위 if (parent._isMounted)에서 걸러지지 않았다면 지금은 server side 입니다.
    // 그래서 parent가 mounted된 시점(client-side)시점에 재랜더링을 해줍니다.
    parent.$once('hook:mounted', () => {
      parent.$forceUpdate();
    });
  },

  render(h, { parent, slots }) {
    // ⭐️ 위 if (parent._isMounted)에서 걸러지지 않았으니 
    // slot으로 들어온 아이들의 render를 막아줍니다.
    return defaultSlots.length > 0 ? defaultSlots.map(() => h(false)) : h(false);
  },
};

이렇게 해주어서 server-side의 rendering을 막을 수 있습니다. 그리고 사용방법은 간단합니다.

<!-- Comp1은 csr -->
<client-only>
  <Comp1 />
</client-only>
<!-- Comp2는 ssr -->
<Comp2 />

📌 결론

 

이렇게 한번 nuxt에서의 client-only 컴포넌트를 구현해보았습니다. 물론 nuxt에서는 placeholder의 기능까지 있지만 레벨업 프로덕트 내에서는 해당 기능이 필요하지 않을것 같아 따로 구현을 해놓지는 않았습니다. 그럼 재밌고 즐겁게 client-only를 사용해주시기를 바라면서 글을 마칩니다.

 

그럼 긴글 읽어주셔서 감사합니다 ! 🙇🏻‍♂️

 

📌 참고 자료

• Vue ssr 공식 문서
• Nuxt 공식 문서