클라이언트 , 서버 컴포넌트의 사용 범위
안녕하세요 정환님. 완강하고 혼자 google oAuth 와 jwt를 이용해서 로그인을 구현하는 와중에 아무리 찾아봐도 도저히 개념이 잡히지 않는 부분이 있어서 질문 드립니다.
nextjs에서는 대부분의 컴포넌트들을 서버컴포넌트로 쓰는것을 권장하고, 상호작용을 위해 hydration이 필요한 컴포넌트들을 클라이언트 컴포넌트로 사용하라고 강의에서 배웠고 그렇게 구현을 하고 있습니다.
nextjs의 로그인을 찾아보면 jwt로 access토큰과 refresh 토큰을 이용해서 구현을 하는 글들이 많이 있는데, access토큰은 로컬 스토리지나 state에 담고, refresh 토큰은 httpOnly 쿠키에 담으라고 합니다.
구현을 하다보니 컴포넌트에서 데이터를 페칭을 할때 서버에 access 토큰을 헤더에 담아 보내기 위해서는 로컬 스토리지나 state를 사용하기위해 무조건 클라이언트 컴포넌트를 사용해야 하는데 , 원래 이래야 하는 건가요? 이렇게 되면 데이터 페칭이 필요한 컴포넌트들을 무조건 클라이언트 컴포넌트가 되어버립니다.
아니면 서버 컴포넌트를 사용하고 페칭이 필요할때는 쿠키에 있는 refresh 토큰으로 매번 검증을 해야하는것인지..
강의에 많이 벗어난 내용 같긴 한데 이렇게 사용하는게 맞는건인지 .. 개념이 잘 잡히지 않아 질문드립니다.
강의는 정말 잘 들었습니다. 새해 복 많이 받으세요.
답변 1
0
안녕하세요 이정환입니다.
일단 Access Token이나 Refresh Token 모두 보통은 로컬스토리지보다는 쿠키에 담는걸로 알고 있어요로컬스토리지는 사용자가 임의로 데이터를 수정할수도 있고, 또 허용되지 않은 스크립트에 의해 토큰이 탈취되는 문제가 발생할 수도 있기 때문에 보통은 쿠키를 이용하는걸로 알고 있습니다. 저도 대개 쿠키를 이용해 인증 처리를 구현하고 있구요 😃
쿠키를 이용하시면 요런식으로 구현하실 수 있어요
브라우저가 Next.js 서버에게 로그인 요청
로그인 성공시, Next.js 서버는 Access Token과 Refresh Token을 1번 요청에 대한 응답으로 보내줌
이때 body로 응답하는것이 아닌 Response Header에 set-cookie 필드를 통해 응답함
이렇게 될 경우 브라우저의 쿠키 저장소에 서버에서 응답한 토큰이 자동으로 저장 됨
이후의 요청부터는 이 쿠키에 포함된 토큰이 동봉되어 보내짐
이제 브라우저는 이후의 Next.js 서버에게 어떤 요청을 보내든, 2번 과정에서 응답받은 토큰이 쿠키에 포함되어 전송 됨 (자동으로 됨)
Next.js 서버는 이제 매번 요청에 동봉된 쿠키 값을 검사하여(Request 헤더에 있음) access token을 사용함
외부 백엔드 서버에 요청해야 하는 경우 쿠키의 토큰을 사용하면 됨
내부적으로 라우트 가드(로그인 해야만 접근 가능한 페이지)를 구현해야 할 경우 토큰의 유효성을 확인하면 됨
풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문
0
23
2
next.js 프로젝트
0
28
1
Next.js + Tanstack Query BFF 구조 질문
0
29
2
Next.js 사전렌더링 이해하기 부분
0
34
2
모달 관련 질문
0
42
3
렌더링 관련 질문
0
80
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
64
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
65
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
75
2
npx prisma db push 시 에러가 뜹니다.
0
94
3
vercel 배포를 실패하였습니다.
0
101
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
57
2
getServerSideProps 함수와 SSR의 관계
0
78
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
61
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
117
2
일반적인 nextjs project architecture에 대하여..
0
90
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
74
2
배포 시 오류 발생
0
90
2
백엔드 서버 오류납니다.
0
83
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
93
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
107
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
63
2
빨간줄 설정
0
77
2
익스텐션 질문
0
61
1