useNavermaps() 에러 질문합니다.

[GyeongChan-Jang]

useNavermaps() 호출시 이런 에러가 나는데 어떻게 해결할 수 있을까요?!
map도 콘솔찍어보니 에러는 안나지만 undefined입니다..!

[GyeongChan-Jang]

Next를 쓰고 있어서 SSR 방식이라 에러가 났네요.
CSR로 변경해서 적용하긴 했는데 SSR은 지원 계획도 있으신가요?!

[zeakd]

@GyeongChan-Jang 안녕하세요!

"네이버 지도 API"는 이미지를 불러오고 client에서 실행해야하기 때문에 본질적으로 SSR 이 불가능합니다. 그래서 NaverMap, useNavermaps 등은 SSR에서 처리할 수 있는 역할이 없습니다.

Serverside에서 터지지는 않도록 서버에서 throw 하는 대신 ErrorBoundary 혹은 window를 체크하여 조용히 아무일도 하지않도록 처리를 생각해 볼 수 있지만 이 경우 library 내에서 코드 일관성이 너무 떨어지게 되고, clientside 에서만 동작해야하는 코드를 serverside 에서도 적용하므로서 잘못된 코드스타일을 작성하게 되거나 잘못된 부분을 찾기 어려워진다고 생각됩니다.

그래서 Serverside에서 조용히 죽는대신 잘못 작성된 코드가 올바르게 에러를 보여주도록 처리하고 있습니다. 위 보여주신 예시에서도 useNavermaps() 는 window.naver.maps 를 가져오는 행동이기 때문에 오히려 서버에서 실행되면 안되는 부분이고, 이런 코드가 SSR 가능한 다른 라이브러리의 컴포넌트등과 섞이게 된다면 일관성이 떨어지고 디버깅에도 어려움이 생기게 됩니다.

naver maps 에서 유일하게 SSR 환경에서의 동작을 신경써야하는 부분은 Container 인데요. Container는 client side 에서 새로 그려지는 것이 아니라 SSR 에서 그려질 때 그만큼의 html 영역을 차지하게 처리되어 UI화면이 hydration 단계에서 덜걱거리지 않도록 합니다. 또한 Container 의 children들은 SSR 에서 안전하게 처리되며, clientside 환경에서 처리해주는 역할도 하고 있습니다. 위 주신 address 부분은 Container 내부에서 렌더된다면 올바르게 처리되게 될 거에요.

이렇게 clientside, serverside 역할을 명확히 나누는 것이 앞으로 RSC나 next13 app directory 에서의 방향성에도 도움이 될 것이라고 보고있습니다.

[GyeongChan-Jang]

상세한 답변 감사합니다!
많이 고민해보겠습니다.