개발자

next js에서 사용자 검증시 화면 안깜빡거림은 ssr만 가능한가요?

2023년 01월 25일조회 1,165

안녕하세요, 리액트 넥스트로 앱을 만드는 개발자 입니다. 사용자 검증을 csr(useEffect), ssr(getServerSideProps)둘 다 해보았습니다. 다만 csr의 경우 완전한 렌더링 이후 검증을 하기에 잠시나마 화면 깜빡임이 있습니다. ssr의 경우 서버에서 검증을 하기에 화면 깜빡임은 없지만 모든 화면에 ssr로직을 작성해야 합니다. 만약 화면 깜빡거림 없이 즉시 사용자 정보 UI를 화면에 나타내려면 SSR이나 getinitialProps를 사용하는 방법밖에 없나요?

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

답변 2

인기 답변

손정현님의 프로필 사진

안녕하세요! 우선 "완전한 렌더링 이후"의 기준이 뭔지 잘 모르겠어서 "서버사이드에서 내려주는 최초 html이 보여진 후, hydration 이전"라고 가정하고 답변 드리겠습니다. 말씀하신것처럼 CSR에서 외부 서버 요청을 하는 경우, 결과를 받아서 다시 그려줄때까지 시간차가 발생하는데요. 이때 작성된 코드에 따라서 다르지만 깜빡거림이 발생할 수 있습니다. 일반적인 경우라면 깜빡임 보다는 최초 html에서 없던 컴포넌트가 데이터 요청 결과를 받은 후 갑자기 그려지는 현상일 것 같아요. 최초 html에서 없던 컴포넌트가 갑자기 생겨나면 SEO에 안좋은 영향을 줄 수 있기도 하고, 사용자 경험이 좋지 않기 때문에 대부분 해당 위치에 컴포넌트와 동일한 크기의 스켈레톤 (로딩 상태 컴포넌트)를 보여주기도 합니다. (다만, 화면이 깜빡이는 것은 최초 html이 렌더된 뒤 DOM을 버리고 다시 DOM을 만들어서 그려주는 현상인것 같은데 꼭 이럴 필요가 있는지 확인해보시면 좋을 것 같네요) SSR의 경우는 클라이언트로 html을 내려주기 전에 필요한 정보를 요청한 뒤 취합해서 내려주기 때문에 화면 깜빡임이 없는 것 같네요. 질문으로 돌아가보자면, "화면 깜빡거림 없이 즉시 사용자 정보 UI를 화면에 나타내려면" 중 "화면 깜빡거림"을 "컴포넌트만 깜빡거림" 수준까지 격리를 할 수 있다면 스켈레톤을 보여주는 것도 방법인것 같아요. "화면 깜빡거림"이라면 SSR도 나쁘지 않을것 같습니다. 하지만, SSR의 경우 사용자 검증 로직이 돌때까지 클라이언트(사용자)가 흰색 화면을 보게될 시간이 더 길어지겠죠. "완전한 렌더링 이후" === "서버사이드에서 내려주는 최초 html이 보여진 후, hydration 이전"이라면 종현님이 답변해주신 useLayoutEffect를 사용한다고해도 동일하게 화면이 깜빡거릴 것 같습니다. 만약 "완전한 렌더링 이후"의 의미가 "hydration을 거친 후 리액트 렌더 사이클을 한번 거친 html"이라면 useLayoutEffect를 사용해주시면 화면 깜빡거림이 사라질 것 같긴합니다. 간단한 예시를 code sandbox로 만들어보았습니다. https://codesandbox.io/p/sandbox/loving-water-67oc1z?file=%2Fpages%2Findex.tsx 해당 샌드박스의 프리뷰 주소를 새로운 브라우저 탭에서 크롬 데브 툴과 함께 3G 속도로 확인해보시면 될 것 같습니다 :)

profile picture

익명

작성자

2023년 01월 26일

네, 저도 완전한 렌더링이 아닌 특정 데이터가 추가 되거나 삭제될때 레이아웃 이동이 일어나기에 말씀드렸습니다. 제가 말한 깜빡거림의 요점은 전체 제 랜더링이 아닌, 데이터가 추가될때 특정 데이터가 레이아웃의 변경을 일으킬때 였습니다. 말씀주신것처럼 스피너를 사용하는것도 한 방법이라 생각됩니다. 자세한 답변 감사합니다.

인기 답변

종현님의 프로필 사진

안녕하세요! 저도 현재 비슷한 경험을 하고 있어서 혹시 같이 의견을 나누면 도움이 되지 않을까 해서 답변을 달아봅니다. csr의 경우, useEffect를 사용해서 렌더링 이후에 검증을 하기 때문에 잠시나마 화면 깜빡임이 있다고 문제상황을 이야기 해주셨는데요! 그럼 useLayoutEffect를 사용해 랜더링 이전에 동기로 사용자 검증을 한다면, 렌더링 이후에 화면 깜빡임 없이 사용자 정보를 화면에 나타낼 수 있을 것 같습니다! 시도 해보시고 의견 남겨주시면 제 공부에도 도움이 될 것 같습니다~ https://beta.reactjs.org/reference/react/useLayoutEffect

profile picture

익명

작성자

2023년 01월 26일

감사합니다. useLayoutEffect는 들어보기는 했는데 참고하겠습니다.

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

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

또는

이미 회원이신가요?

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

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

새로운 질문 올리기

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