next.js를 선택한 이유?
브라우저 렌더링에서도 여러가지 방식이있다. Next.js는 SSR, CSR, SSG의 장점만 고려하여 페이지를 자유롭게 라우팅하고 렌더링할 수 있도록 API를 제공한다. 즉, SSR과 SSG에서 HTML의 작은 용량과 보안, CSR에서 빠른 페이지 이동 속도와 깜빡임 없음에 대한 UX 이 장점들을 모두 사용할 수 있도록 개발되었다. 각각의 특징들을 간단하게 정리해보았다.
SSR
서버사이드 렌더링에서는 서버가 화면을 그리는 주체가된다. 완성된 HTML이 서버에서 만들어진 뒤 브라우저에 전송되고, 브라우저는 해당 HTML을 바로 렌더링할 수 있다. 따라서 서버에서 바로 완성된 HTML을 내려 주기때문에 초기 용량이 작고 보안에 유리하다는 장점이있다.
하지만 페이지마다 또는 새로고침 될때마다 새로운 HTML을 그려줘야하기때문에 페이지가 라우팅될때 화면 깜빡임이 있을 수 있고 사용자가 많을 때는 서버 부하의 위험이있다. 장점으로는 완성된 HTML로 인해 크롤링을 하기 좋은 환경이기때문에 SEO에 좋다.
CSR
CRA로 만든 리액트 앱이 CSR방식으로 렌더링한다. HTML Doc을 누르면 텅 빈 파일을 확인 할 수 있다. 이 HTML파일에는 root를 id로 가지는 div만 존재한다. 나머지 dom은 모두 자바스크립트로 그린다. 처음에는 빈 html파일만 받고 자바스크립트를 다운로드하여 리액트, 즉 자바스크립트를 실행한다. 그리고 자바스크립트로 인해 dom이 렌더링된다. CSR은 초기에 작은 html만 받고 나머지는 자바스크립트로 동적으로 그리기때문에 SSR과 다르게 화면 깜빡임이 없고 대신 초기용량이 크다. 그리고 서버에서 렌더링 되는 것이 아니라 자바스크립트로 돔을 그리는 것이기때문에 해당 자바스크립트 파일을 캐시가능하다. 하지만 서버 데이터가 필요할 경우 계속해서 서버와 통신해야 되기때문에 상대적으로 보안에 취약하고 크롤링 방식에 따라 SSR에비해 SEO에 제약이있다는 단점이 있다.
SSG
pre-rendering이라는 개념을 차용하는데 static한 HTML을 build time에 미리 만들어두는 것이다. SSR은 request time, 즉 사이트에 접속할때마다 HTML을 만든다. SSG는 미리 정적인 HTML을 만들어 두기 때문에 서버에 부하가 없고 HTML 자체를 캐시할 수 있다. 완성 된 HTML이기 때문에 SEO에도 좋다. 따라서 내용이 동적으로 변하지않는 정적인 사이트에 이용한다.
*인프런 박용주님의 next.js강의에서 큰 도움을 얻었습니다.
Next.js의 특징
1. pre-rendering
CRA로 만들어진 사이트와 next.js로 만들어진 사이트의 자바스크립트를 disable하면?
CRA는 HTML이 빈 파일이고 자바스크립트를 다운로드 받을 수 없으므로 빈 화면만 보이게된다. 반대로 Next.js로 만든 사이트에서는 자바스크립트는 없지만 이미 완성된 HTML이기 때문에 사이트를 큰 문제없이 사용할 수 있다.
2. ISR(revalidate)
3. next/link