개발/Next.js

SSR에서 로그인 유무 확인하기 (Feat. Next.js)

서비스를 개발하다 보면, 사용자의 로그인 유무에 따라 다른 화면을 보여줘야 하는 경우가 있다. 예를 들면, 로그인하지 않은 사용자에게는 로그인 버튼을 보여주고, 반대로 로그인한 사용자에게는 프로필이나 로그아웃 버튼을 보여주는 식이다. 이번 시간에는 SSR에서 로그인 유무를 확인하는 방법을 공유하고자 한다. 일러두기 해당 글에서는 원활한 소통을 위해 SSR을 Frontend의 Server, CSR을 Fronted의 Client의 의미로 사용할 것이다. 개발환경 Typescript React Next.js JWT axios @tanstack/react-query nookies 기존 CSR에서 처리하는 방법 SSR에서 처리하는 방법을 알아보기 전에, 기존 CSR에서 어떻게 했는지 소개하겠다. 전통적인 방법 일..