client only

Open Source

React ClientOnly 컴포넌트 만들기 (feat. useMount)

📌 목차 서론 ClientOnly 컴포넌트는 뭘까? Next 공식 문서에 나와 있는 ClientOnly 컴포넌트 Next 공식 문서에 나와 있는 ClientOnly 컴포넌트의 문제점 Nuxt 같은 ClientOnly 만들기 코드 자세하게 뜯어보기 결론 📌 서론 SSR을 사용하면 필연적으로 ClientOnly 컴포넌트를 사용해야 하는 순간이 있어요. Browser에서만 있는 정보로 rendering을 해야 하거나 의도적으로 서버에서 그려지지 않게 하는 순간 말이에요. 특히 저는 A, B 테스팅을 할 때 ClientOnly의 도움을 많이 받고 있어요. 구글 에널릭틱스의 A, B 테스팅에서 돔을 조작하게 되는데 이때 ClientOnly의 기능이 없다면 서버에서 내려주는 Dom과 Hydration 이후의 돔이 ..

Vue Study

Vue2 ClientOnly 컴포넌트 제작기

📌 목차 서론 Vue SSR의 기본적인 설명 코드 설명 결론 참고 자료 📌 서론 안녕하세요. 이번에 라이엇 프로젝트가 vue를 커스터마이징하여 ssr을 구현하여 client only의 컴포넌트가 없었습니다. 따라서 필요에 따라 컴포넌트 전체의 랜더링 시점을 결정하는 Nuxt에서의 컴포넌트를 만들게 되었습니다. 그에 따라 이글에서는 사용방법 및 구현 방식을 설명하고자 합니다. 💡 Nuxt에서 client-only 컴포넌트란? ClientOnly 컴포넌트는 자식요소들을 client-side에서 랜더링 시킵니다. 📌 Vue SSR의 기본적인 설명 일단 해당 컴포넌트에 대해서 조금 더 깊게 이해를 하자면 먼저 customized vue ssr부분을 먼저 이해를 해야합니다. 보통 SSR일때는 server에서 데이..

eddie0329
'client only' 태그의 글 목록