로그인 유지 구현시 CSR vs SSR

인프런 커뮤니티 질문&답변

BBB AAA

작성한 질문수

Next.js 시작하기(feat. 지도 서비스 개발)

해결된 질문

작성

471

매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식)

useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에

`초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다.

이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요?

초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.

seo next.js vercel csr ssg ssr

답변 1

박용주

지식공유자

안녕하세요 질문 감사합니다.

NextAuth라는 대표적인 Next.js 인증 라이브러리를 소개시켜드리는게 좋을 것 같습니다.

https://next-auth-example.vercel.app/client <- 이 링크는 next-auth의 데모 사이트이고 CSR 방식으로 유저정보 UI를 렌더링합니다. 들어가서 로그인하시면 화면 상단에 유저 정보가 뜨는데, layout shift가 발생하지 않도록 공간을 확보 + 어색한 깜빡임이 발생하지 않도록 CSS animation을 적용합니다.

이와 같이 스켈레톤 UI와 애니메이션(opacity 또는 slide)을 사용하는 것이 CSR에서 사용자 경험을 개선하는 대표적인 방법들입니다.

(+https://next-auth-example.vercel.app/server <- 참고로 이 링크는 SSR 방식으로 렌더링합니다.)

감사합니다 :)

BBB AAA

작성한 질문수

전체 Q&A

질문하기