로그인 유지 구현시 CSR vs SSR
매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식)
useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에
`초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다.
이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요?
초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.
답변 1
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 방식으로 렌더링합니다.)
감사합니다 :)
API 라우터를 사용해야 하는 경우에 대해
1
150
1
키보드 어떤 거 사용하시나요
1
352
1
next.js 멀티플 런타임 관련해서 질문 올립니다..
1
358
2
아주 기초적인 질문입니다.
1
322
1
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
1
1170
2
수업을 듣다가 SSR에 관하여..
1
551
2
interface 와 type
1
376
1
엘리맨트들의 자식관계가 어떻게 이렇게 되나 궁금합니다.
1
384
1
onLoad함수 (script태그의 onLoad X)
1
426
1
dynamic에 대한 질문
1
447
1
SSR vs SSG
1
476
2
NoSSR 관련한 질문입니다:)
1
376
1
a tag 질문 !
1
327
2
8분 20초 배포 관련
1
324
2
안녕하세요! 구글 서치 콘솔에 등록하는 도중 다음 오류가 뜹니다
0
2679
2
emotion styles 파일이 빌드시 경고로 뜹니다.
1
438
1
naver map 이 출력되지 않습니다.
1
481
1
페이지에 site맵 존재시 next Link는 csr 처럼 싹가져오게 되나요?
1
264
2
Failed to load resource: the server responded with a status of 404 ()
1
1034
2
VSCode 익스텐션 궁금합니다.
1
357
1
상태관리 질문 있습니다!
1
450
1
swr에 대한 질문입니다. (용어 관련)
1
374
1
swr 질문입니다!
1
338
1
안녕하세요. span 태그의 부모에 display: flex 를 적용하는데 왜 적용되는지 아무리 생각해도 이해가 되지 않아 질문드립니다.
1
681
2