Feature/#298: Middleware로 서버측 리다이렉션 적용 구현#191
Conversation
…ntSideHandler 컴포넌트 호출 추가
…h -> router.replace로 변경
✅ Deploy Preview for we-write ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
hoxey2Front
left a comment
hoxey2Front
left a comment
There was a problem hiding this comment.
고생하셨습니다~! 저도 많이 배워가는 코드인거 같아요!
There was a problem hiding this comment.
현재 구조에서는 컴포넌트로 만드셨는데 이렇게 만드신 이유가 따로 있으신가요? 궁금합니다
찾아보니 util 함수로 만들어서 사용페이지에서 useEffect로 사용하는 방법도 있더라구요~!
There was a problem hiding this comment.
ClientSideHandler를 컴포넌트로 만든 이유는 서버 컴포넌트에서도 해당 로직을 사용하기 위해서입니다
로직만 보면 jsx는 반환하지 않고 useEffect만 포함되므로 컴포넌트보단 커스텀 훅처럼 사용되고 있지만
커스텀 훅은 서버 컴포넌트에서 호출할 수 없다는 문제점이 있습니다.
항상 클라이언트 컴포넌트에서만 호출하도록 하면 useEffect + 유틸리티 함수의 조합을 사용할 수도 있겠지만
해당 로직은 라우트 최상단 page.tsx에서 일관적으로 호출되도록 하는 것이 일관성, 유지보수성 측면에서 이점을
가질 것 같아서 현재와 같은 구조를 채택하게 되었습니다.
SwimmingRiver
left a comment
SwimmingRiver
left a comment
There was a problem hiding this comment.
필요한 작업이라고 생각했는데 잘 구현하신거 같아요! 고생하셨습니다.
노션에 먼저 컨텐츠가 잠시 보였다가 페이지가 바뀌는 깜빡임(Flash of Unauthenticated Content) 현상이 발생했습니다 라고 말씀하신 부분은 어떤 페이지일까요?
ssr 페이지에서 컴포넌트를 그리기전에 바로 리다이렉트를 시키는 구상으로 설계를 했었어서 반영이 안된 부분이 있었는 지 궁금하네요
| request: NextRequest; | ||
| } | ||
|
|
||
| const COOKIE_LIFE_TIME_SECONDS = 5; |
There was a problem hiding this comment.
에러체크를 위해서 짧은 시간 유지하는 쿠키로 이해했는데,만료시간을 5초로 한 이유가 있을까요?
There was a problem hiding this comment.
해당 쿠키는 페이지 전환 즉시 RedirectErrorToastHandler에서 리다이렉트 에러가 발생했는지 여부만을 확인하기 위함이라서 짧은 시간만 유지하기 위함이 맞습니다. 만료시간이 5초인데 특별한 이유가 있는 것은 아니고 이벤트 발생이 되지 않으면 빠른 시간안에 삭제되기 위함을 위해 설정한 시간입니다.
|
@SwimmingRiver 눈에 직접 체감되는 깜빡임 현상은 이전에 리다이렉트가 이루어지는 방식이 한번 변경되면서 현재의 최신 브랜치 기준으로 체감은 되지 않고 있는데 SSR 환경에서도 Middleware없이 리다이렉트를 적용하면 서버컴포넌트가 렌더링되는 과정에서 부분 렌더링이 나타날 가능성은 존재한다는 글을 확인했습니다. (말씀해주신대로 실제 개발환경 및 배포환경 테스트에서 현재진행형으로 깜빡임이 발생하는것은 아닌게 맞습니다!) 그리고 인증 페이지와 다르게 mypage의 경우는 클라이언트 컴포넌트인 |
3 participants
변경 사항
기존에 각 컴포넌트에서 잘못된 접근에 대한 리다이렉트를 처리하던 방식에서 미들웨어를 통한 리다이렉트 방식으로 변경하였습니다.
Middleware.ts파일 구현 : 공식 문서와 자료들을 참고하며 미들웨어를 구현했습니다. 기존에 전역에 생성되어 있던 파일을 삭제하고,src/아래에 새롭게 생성하였습니다. middleware.js - Next.jsredirect_error쿠키 세팅을 병행하는redirectWithError공통 유틸리티 함수를 구현하였습니다.redirect_error쿠키의 존재 여부를 감지하고, 존재할 경우 토스트로 잘못된 접근이 발생했음을 알리는RedirectErrorToastHandler컴포넌트를 추가했습니다.js-cookie라이브러리를 설치하였습니다. 단, 이부분의 경우 반드시js-cookie가 필요한 케이스는 아니고 개발의 편의성에서 이점을 가지지만 번들 크기의 증가, 서버에선 사용할 수 없는 한계 등이 공존하므로 라이브러리 사용에 대한 의견을 제공해주셔도 감사하겠습니다.router.push->router.replace로 변경하였고, 로그아웃 시에/auths/signin페이지로 이동할 경우 발생하는 미들웨어 감지 문제를 해결하기 위해서/social페이지로 이동되도록 변경하였습니다.새롭게 배우면서 적용한 코드가 많은 만큼 개발 과정을 일부분 노션 문서로 정리해두었습니다.
해당 문서를 읽어보시면 PR 내용을 더 이해하기 쉬울 것 같습니다!
노션 - Middleware로 서버 측 리다이렉션 적용