개발자

Nuxt header asyncdata 질문

2024년 01월 29일조회 62

Nuxt에서 header에 들어갈 메뉴를 ssr로 하고 싶어서 asyncdata에서 구현하려고 했더니 Header가 layout 이라서 안되더군요 Header에서 메뉴 리스트 서버에서 가져올 때 시점을 ssr로 해야 되나요? csr으로 해야 되나요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

인기 답변

백승훈님의 프로필 사진

SSR로 한다는 것은 Header 내부 정보가 비동기통신 후 데이터를 가져와야 확정된다는 말씀일까요 🤔 데이터의 정보가 많고 랜더링에 시간이 오래걸린다던지 등 꼭 서버에서 해야할 지에 대한 고민이 우선일 것 같습니다. 단순 해더의 list 정보 (배열 한두줄)정도 받는다면 굳이 SSR보단 CSR이 적절할 것 같습니다. SSR이 무조건 좋은게 아닌 장단점이 있으며 특히 첫 로딩시 화면을 그려주는 해더 푸터 등을 SSR로 적용하게 될경우 CSS 프래임워크등과 충돌도 고려해야 합니다. 해당 해더가 한번 그려진 후 지속적으로 사용 및 활용된다면 이 경우에도 CSR이 더 적절할 것 같습니다. SEO가 중요한가? => 중요하다면 SSR을 고려해야 합니다. (최신 리액트등은 이부분이 어느정도 반영되어 있으며 따로 SEO에 적절한 커스터마이징이 가능하기에 해당부분이 따로 컨트롤 가능하다면 필수는 아닙니다.) 페이지 로드 속도가 중요한가? => 빠른 초기 로딩이 중요하다면 SSR이 더 적합할 수 있습니다. (단 이부분은 디자인이 인터렉티브하거나 경우에 따라 CSR이 더 빠를 수 있습니다) 동적인 상호작용이 많은가? => 많다면 CSR이 더 나을 수 있습니다. 서버 부하를 어떻게 관리할 것인가? => 서버 부하를 최소화하고 싶다면 CSR을 고려해야 합니다.

ㅇㅅㅇ님의 프로필 사진

ㅇㅅㅇ

작성자

12024년 02월 01일

CSR로 처리 했습니다. 어떤 부분들을 SSR로 처리해야 하는지 생각해 볼 수 있는 계기가 되었습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!