nextjs14버전이 출시된지 조금 지났다. 예전과 같이 강의를 참고해가며 공부를 함과 동시에 그에대한 기록을 남겨보고자 첫 글을 작성한다
1. 가장 눈에 띄는 변화
page폴더에 관리하던 페이지(url)들이 app폴더로 옮겨지게 되었다.
위 폴더 구조를 집중해서 봐야한다.
page폴더 => app폴더로 대체되었다고 생각하면 쉽다.index.tsx => page.tsx
next12버전에서는 이런식으로 폴더안에 파일이름으로 url을 만들 수 있었다.
위 그림에서 보면 /profile/edit이런식으로 만들어졌다.
하지만 next14버전에서는 이런 url을 만드려면 profile폴더안에 edit폴더안에 page.tsx파일을 만들어야 가능하다.
개인적으로 이런 변화가 별로 마음에 들지 않았다. page.tsx라는 파일은 직관적으로 어떤 url인지 감이 오지 않고, 폴더를 많이 만드는 과정이 꽤 귀찮기 때문이다.
2. Hydration
NextJS14버전에서는 모든 페이지들이 ssr로 동작을 하게 되었다.
기존에 getserversideprops, getstaticprops이런 동작들이 사용이 되지 않고 모두 ssr로 일단 동작을 한다.
동작 과정
- 사용자가 특정 페이지로 접속한다.
- 그렇게 되면 우선 NextJS는 서버상으로 특정 페이지를 서버에서 단순 non-interactive한 html로 rendering한다.
- 그 이후 사용자에게 뿌려주게 된다. => 브라우저에서 이 페이지에서 <페이지 소스보기> 를 하게 되면 모든 값들이 전부 html에 나타난다.(ssr동작 때문) => 이 과정에서 사용자는 따로 react동작을 위한 js파일들을 다운로드 받지 않아도 된다.(서버에서 전부 처리해주기 때문)
하지만 3번과정에서 문제가 발생한다.
react동작을 위한 js코드들을 다운받지 않게 되면서 사용자는 조금 더 빠르게 페이지를 볼 수 있는 장점이있다.
하지만 이렇게 되면 우리가 react에서 흔히 사용할 수 있는 useState, useEffect와 같은 react hook들과 버튼을 클릭했을 때 특정 동작을 수행하게 하는 onClick과 같은 동작들은 실행이 되지 않는다는 것이다.
이를 해결하는 것이 "use client" 코드를 해당 파일에 추가시켜주는 것이다.
위에서 설명한 것과 같은 기능들은 이 코드를 사용하면 해당 파일을 react component로 변경한다. 즉 non-interactive에서 interactive하게 바뀌게 된다.
결론 : backend에서 render되고 frontend에서 hydrate 되는 것
📍hydration 요약
3줄요약 모든 페이지들은 SSR로 동작을 우선 할 것이다. "use client" 코드를 작성한 파일은 hydrate(interactive)될 것이다. 위 과정들을 통해 사용자에게 더 적은 js파일만 다운받게 하여 UX를 증가시킨다.