이전에 React Server Component란 개념을 학습하다가, 도중 의문이 들었던 점에 대해서 포스팅을 합니다.
배경
여러 아티클들을 찾아보면서 대체적으로 Pre-Rendering의 개념을 아래와 같이 정의할 수 있었습니다.
미리 HTML 파일을 만들어 놓는다. 이때 HTML은 최소한으로 필요한 자바스크립트 코드와 결합되어있다. 이후
hydration이라는 프로세스를 거쳐, 페이지가 인터렉티브해진다.
기본적으로 Next.js는 모든 페이지를 프리렌더링 한다고 합니다.
즉 JavaScript와 연관이 없는 태그들은 모두 HTML코드로 미리 만들어 두는 것입니다.
SSG는 빌드시점에 프리렌더링과 비슷하게 모두 HTML코드로 만들어두는 것입니다.
들었던 의문점
- HTML파일을 미리 만들어 둔다는 점에서
Pre-rendering과SSG차이가 무엇인지 - HTML 파일을 미리 만들어 둔다는게 각각의 페이지를 만들어준다는 것인지?
HTML 파일을 미리 만들어 둔다는 것에 의문점이 든 이유가 아래와 같습니다.
첫 페이지 로드 이후에는 HTML 파일이 아니라 사진과 같이 RSC 컴포넌트가 직렬화된 JSON 객체와 JS bundle이 전달되는 것으로 확인할 수 있었기 때문입니다.
즉, 페이지마다 각각의 HTML파일이 아니라, 객체로 전달받는 것으로 볼 수 있었습니다.
그렇다면 왜 HTML파일을 전달받는다고 이야기를 하는 것인지에 대한 의문점이 들었습니다..
또한 Next.js는 전통적인 SSR방식이 아닌 (SSR + CSR) 방식으로 작동하는 것으로 이해하고 있었기 때문입니다.
해결점
Next.js는 기준점을 첫 페이지 로드와, 이후로 나눌 수 있습니다.
왜냐하면 전역 상태를 공유해야하기 때문입니다.
- 첫 페이지 로드
- 클라이언트가 첫 페이지를 요청했다면, 서버는 HTML 파일을 전달
- 이후 다른 경로로 이동한다면 JSON 객체와 JS bundle을 클라이언트에게 전달하면서 클라이언트 쪽에서
hydrate
사진과 같이 첫 페이지 로드 후, SPA처럼 JSON 객체, JS bundle 전달받으며 자연스럽게 페이지 이동을 합니다.
첫 페이지 로드 이후에 매번 새로운 HTML 파일을 받는 것이 아닙니다.
- 직접적으로 경로 요청 or 새로고침
- SSR로 렌더링하는 페이지라면 요청에 따라 HTML 파일을 생성해 전달
- SSG로 렌더링해야하는 페이지라면 미리 빌드해두었던 HTML 파일을 전달
- 새로고침, 직접 경로 요청 이후에 다른 페이지 이동한다면
hydrate하는 방식으로 페이지 이동
실제로 Next.js를 사용해 배포된 웹 페이지를 기반으로 실습을 해보았습니다.
SSG를 사용하는 경로에서 새로 고침을 하면 미리 빌드된 HTML 파일을 불러옵니다.
SSR도 마찬가지입니다. (HTML 파일은 요청 시에 만들어 전달됩니다.)
결론
모든 첫 페이지(정말 첫페이지, 새로고침, 경로직접요청) 에 대해서만 HTML파일을 전달해주고 이후에는 CSR 방식으로 RSC는 직렬화된 JSON 객체로 스트리밍하여 전달합니다. 이후 RCC는 Js bundle을 불러오며 화면을 재조정하는 것입니다.
모든 첫페이지는 HTML을 가져오고 이후 경로 이동하는 모든 페이지는 CSR방식으로 작동합니다.
