Next.js를 사용하기 위해 알아야 할 점 (CSR & SSR)
CSR과 SSR에 대해서 공부하고 기록합니다.
프론트엔드 개발자가 되고자 한다면, 현재 Next.js가 각광받고 있다는 것을 알 수 있습니다.
프로젝트 인원 모집 페이지를 보면, 프론트엔드에서 Next.js를 사용하지 못하면 참여할 수 있는 프로젝트가 많지 않다는 것을 알게 됩니다.
앞으로 취업 후에도 회사에서 Next.js를 사용할 가능성이 크기 때문에, 미리 공부해 두는 것이 좋습니다.
그래서 최근에 인터넷 강의를 시청하며 Next.js에 대해 공부하고 있습니다.
Next.js에 대한 강의를 시청하면서, 기존 리액트 예를 들어 CRA(Create React App)를 사용한 웹페이지와 Next.js를 사용한 웹페이지를 비교하는 영상이 있었습니다.
이는 CSR과 SSR의 차이점을 보여주는 강의였습니다.
평소에도 CSR과 SSR의 차이에 대해 물으면 형식적으로 답할 수 있을 정도의 수준이었지만, 실제로 Next.js를 사용해 보고 차이점을 눈으로 확인하면서 그 차이를 명확하게 느낄 수 있었습니다.
이제 React에서 CSR을 사용했다면, Next.js로 넘어가기 위해서는 SSR에 대해 이해하고 넘어가는 것이 필요합니다.
CSR과 SSR?
CSR을 먼저 알아봅시다
리액트를 배우기 시작하면 처음에는 HTML, CSS, JS를 배운 후, 이 세 가지를 합쳐 웹페이지를 만드는 데 익숙해집니다.
하지만 리액트에서는 <div id="root"></div>만 있는 HTML 페이지가 기본으로 제공됩니다.
여기서부터 CSR과 SSR의 차이를 이해할 수 있습니다.
생각해봅시다.
- 만약 우리가 CRA 또는 Vite를 사용하여 리액트 웹페이지를 만들었다고 가정합니다.
- 사용자가 우리의 웹페이지에 방문하였습니다.
이 과정에서 사용자는 리액트 웹페이지에 접근하면서 <div id="root"></div>만 포함된 HTML을 받게 됩니다. 서버는 HTML과 함께 자바스크립트 파일도 전달합니다.
자바스크립트 파일을 받은 후에야 우리가 리액트로 코딩한 JSX 구문이 <div id="root"></div> 안에 렌더링되며, 페이지가 완성됩니다.
좀 더 이해하기 쉽게 해보겠습니다.
- 만약 우리가 CRA 또는 Vite를 사용하여 리액트 웹페이지를 만들었다고 가정합니다.
- 자바스크립트를 사용하지 않는 사용자가 우리의 웹페이지에 방문하였습니다.
이런 경우 사용자는 HTML만 받게 되며, 자바스크립트를 비활성화한 상태에서는 리액트 앱이 작동하지 않기 때문에 빈 화면을 보게 될 것입니다.
CSR, Client Side Rendering은 클라이언트 측에서 모든 렌더링을 처리하는 방식입니다.
SSR을 알아봅시다
같은 조건을 Next.js로 바꾸어 생각해보겠습니다.
- 우리가 Next.js를 사용하여 리액트 웹페이지를 만들었다고 가정합니다.
- 자바스크립트를 사용하지 않는 사용자가 우리의 웹페이지에 방문하였습니다.
이 경우, 사용자는 CSR과 달리 HTML 콘텐츠를 바로 볼 수 있습니다.
Next.js는 SSR, Server Side Rendering을 사용하여 서버에서 HTML을 생성하고 클라이언트에 전달하기 때문입니다.
SSR은 서버에서 렌더링된 HTML을 클라이언트에게 전달하며, 자바스크립트를 비활성화한 상태에서도 기본적인 콘텐츠를 확인할 수 있습니다.
이 때문에 사용자는 페이지 로딩이 완료되기 전에도 콘텐츠를 볼 수 있어 사용자 경험이 향상됩니다.
Next.js의 CSR과 SSR 혼합 사용
Next.js의 강력한 점은 CSR과 SSR을 혼합하여 사용할 수 있다는 점입니다. 예를 들어, 일부 페이지는 SSR로 처리하고, 일부는 CSR로 처리할 수 있습니다. 또한, 정적 페이지 생성(SSG)과 ISR(Incremental Static Regeneration) 같은 기능도 제공되어, 각 페이지에 최적화된 렌더링 방법을 선택할 수 있습니다.
자바스크립트를 사용하지 않는 사용자가 어디 있는가!? 그냥 CSR을 써도 되는 거 아니야?
물론 CSR도 훌륭한 선택입니다. 그러나 현재 트렌드는 SSR로 넘어가는 추세입니다.
SSR은 SEO(검색 엔진 최적화)에도 유리하며, 사용자가 페이지를 더 빨리 볼 수 있어 사용자 경험이 향상됩니다.
특히 인터넷 환경이 좋지 않은 지역에서 CSR은 자바스크립트 파일을 모두 다운로드할 때까지 빈 화면을 보여줄 수 있으므로, SSR이 더 나은 선택이 될 수 있습니다.
SEO와 SSR
SSR은 SEO에 매우 유리합니다. 검색 엔진 크롤러는 SSR로 제공된 페이지의 전체 HTML을 쉽게 읽을 수 있어, 콘텐츠 인덱싱이 더욱 효과적으로 이루어집니다.
반면, CSR은 크롤러가 자바스크립트를 실행해야 페이지의 내용을 확인할 수 있기 때문에 SEO 측면에서 불리할 수 있습니다.
결론
Next.js를 통해 SSR의 이점을 이해하고 활용하는 것이 중요합니다. CSR은 간단하고 빠르게 개발할 수 있지만, SSR은 더 나은 사용자 경험과 SEO 성능을 제공합니다. Next.js는 CSR, SSR, SSG, ISR 등 다양한 렌더링 옵션을 제공하므로, 각 프로젝트의 요구에 맞는 최적의 방식을 선택할 수 있습니다.
이 글은 Next.js를 공부하면서 CSR과 SSR에 대해 공부한 점을 기록한 것입니다. 앞으로 더 많은 프로젝트에서 Next.js를 활용하며 이 점들을 실무에 적용해 보길 바랍니다.
