얼마전 전 직장 동료를 통해 next.js 의 parallel route(병렬 라우팅)에 대해 접했다.
일반적으로 알고 있는 next.js 라우팅 방식에서 더 나아가 새로운 방식을 제안한 듯 했다.
듣고보니 우리 프로젝트에도 도입해볼 이유가 있어보여 공식 문서와 여러 게시글을 참고하여 시작해보았다.
아직 개념이 추상적이라 기껏해야 공식 문서 퍼오는 꼴이라 내용에 대해 기술하지는 않을 것이다.
오로지 나의 무지함에 길을 헤맸던 일기정도다.
team/[teamId] 경로에는 크게 팀에 관련된 5개의 페이지가 존재한다.
그리고 모든페이지에 sidenav 가 포함된다.
team/[teamId]/@sidenav/page.tsx
sidenav 안에 들어가는 page.tsx 에는 sideNav 만 return 한다.
그리고 layout.tsx 에서 sidenav 를 props 로 받아오면 @sidenav 의 page.tsx 를 가져올 수 있다.
이때 sidenav 를 props 로 넣어서 가져오는 형태를 slot 이라고 한다.
sidenav 가 정상적으로 출력된다.
하지만 사용자가 주소창의 url 을 바꾸어서 /team/[teamId]/dashboard 를 /team/[teamId]/ 로 변경할 경우 자동으로 dashboard 로 이동해 주어야 한다.
/team/[teamId]/page.tsx
redirect() 를 사용하여 서버사이드에서 dashboard 로 이동하도록 했다.
router.replace 도 동일한 동작을 하지만 클라이언트사이드훅이기 때문에 페이지가 렌더링되고 깜빡임이 존재하게 된다.
그런데 page.tsx 의 redirect 가 동작하지 않았다.
그래서 console.log 를 찍어보았다.
브라우저 콘솔탭에 [Server] 라는 태그와 함께 로그가 출력됐다.
그런데 왜 redirect 는 작동하지 않는 것인가.
안되면 다 안돼야 하는거 아닌가?
클라이언트 컴포넌트의 평가와 렌더링
클라이언트에서는 브라우저의 js 엔진(v8)이 코드 평가를 수행하고, react는 가상 dom을 생성하고 브라우저 렌더링 엔진(블링크, 게코 등)이 실제 dom으로 변환하여 화면에 표시한다.
함수가 호출되고 (평가) 그 결과가 가상 dom에 반영된다.(렌더링)
이 과정에서 거의 동시에 평가와 렌더링이 진행된다.
아래는 프론트엔드에서 흔히 보는 조건부 렌더링 코드이다.
// condition = false
{condition && <Component/>}클라이언트 컴포넌트는 이 경우 코드 평가조차 하지않는다.
console.log()는 평가 단계에서 실행되는 코드다.
그렇기 때문에 console.log 를 찍어도 아무일도 없고 렌더링도 되지 않는 것이 우리에겐 익숙하다.
서버 컴포넌트의 평가와 렌더링
서버 컴포넌트에도 코드 평가 과정과 렌더링하는 과정이 존재한다.
서버에서는 node.js 의 js 엔진이 서버에서 수행한다.
서버 컴포넌트는 서버에서 모든 관련 컴포넌트를 평가한 후, 최종적으로 필요한 것들만 클라이언트로 전송한다.
렌더링은 react 서버 컴포넌트 시스템이 서버에서 수행을 하고 그 결과인 html 코드를 클라이언트로 전송한다.
console.log 의 경우 평가 단계에서 실행되지만 redirect 는 컴포넌트가 최종 렌더트리에 포함될 때에만 적용이된다.
결론은
클라이언트 컴포넌트 : 컴포넌트가 렌더링되지 않으면 코드평가 자체가 없기때문에 console.log 는 출력되지 않음
서버 컴포넌트 : 렌더링과 별개로 코드평가를 진행하기 때문에 Server 단에서 console.log가 발생함.
layout.tsx 에 children 을 props 로 안넣어줘서 page.tsx 가 렌더링자체가 안되는 게 당연한 건데
console.log 가 찍혀서 뇌정지가 와버린것임
children 을 추가하고 content 의 유무에 따라 page.tsx 의 redirect 가 동작하도록..
구현하고 정상적으로 redirect 되는 것을 확인
