Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다.
과거의 웹사이트들은 대부분 SSR로 동작 되어 왔기 때문에, 페이지가 여러 개로 구성된 Multi Page Form 방식을 사용했었습니다. 하지만 스마트폰이 등장하게 되면서, 예전 웹들은 모바일에 최적화가 되어있지 않았기 때문에 사용에 불편함이 커지게 되었습니다. 그래서 사용자들은 모바일 앱과 같은 형태의 웹페이지가 필요하게 되었는데요.
React도 SSR을 고려하여 설계되었기 때문에 자체적으로도 구현이 가능하긴 하지만, 개발환경을 만들기 위해서는 생각보다 복잡합니다. 그래서 이러한 문제를 해결한 Next가 나왔고, 사용법도 꽤 간편합니다.
CSR, SSR 각각의 장단점
CSR은 ?
처음에 모든 JS 파일을 다운받아 오기 때문에 1. 첫 로딩 속도가 오래 걸립니다.
그러나 데이터 요청이 있을 때만 서버에 요청하므로, 2. 페이지 전환이 빠르고 서버에 부담이 적습니다.
맨 처음 HTML 파일이 비어 있어, 구글을 제외한 다른 네이버 등 검색엔진은 3. 데이터를 수집할 수 없다는 문제점도 있습니다.
SSR은 ?
요청하는 화면의 내용을 그 때 그 때 다운 받기 때문에 1. 첫 로딩 속도는 빠릅니다.
이후 사용자 상호작용에 따라 뷰가 변경될 때마다 서버와 응답을 하기 때문에 2. 서버에 부담이 가고 새고고침 때문에 UX 측면에서도 불편함이 느껴질 수 있습니다.
단 HTML에 대한 정보가 처음부터 포함되어 있어 3. 데이터를 수집할 수 있다는 장점이 있습니다.
Next.js 작동 원리: SSR + CSR
1. 서버에 페이지 접속을 요청하면 SSR 방식으로 HTML을 렌더링 합니다. (SSR).
- 그리고 브라우저에서 js를 다운로드하고 리액트를 실행합니다.
(→ 초기 로딩 성능도 개선하고, 이미 콘텐츠가 다 포함된 상태라 SEO도 가능)
- 그리고 나서 사용자가 상호작용하면서 다른 페이지로 이동할 때는, SSR이 아닌 CSR 방식으로 브라우저에서 처리합니다.
(→ CSR의 장점도 유지)
