Next.js에서의 CSR/SSR 질문

Question

안녕하세요!

Next.js에 대해서 공부중에 있는데, 렌더링관련해서 궁금한 점이 있어서 질문드립니다.

Next.js를 사용하면 React와는 달리 SSR을 지원한다고 하는데요, 실제로 Next.js로 만들어진 사이트에 접속해보면 특정 페이지에서 새로고침 시에는 페이지 전체를 서버에서 보내주는 형태(SSR)이고, 브라우저단에서 페이지 이동 시에는 서버로부터 JSON 데이터만 가져오고 페이지는 브라우저가 그려주는 형태(CSR)로 동작하는 것으로 보입니다.

이런 동작은 개발자가 특별한 설정을 하지 않고도 Next.js에서 기본적으로 제공하는 기능인 것인지 궁금합니다.

혹시 위 내용이 맞다면, Next.js는 React의 상위 호환인건데, 무조건적으로 Next.js를 쓰는 것이 SSR 이점(초기 로딩 속도 향상, SEO 등)과 CSR 이점(UX 향상)을 모두 취하게 되므로 React는 굳이 쓸 이유가 없겠다란 생각이 들어서 이렇게 질문드립니다!

김하림 · Answer

1. 이런 동작은 개발자가 특별한 설정을 하지 않고도 Next.js에서 기본적으로 제공하는 기능인 것인지 궁금합니다.
-> Next.js가 서버사이드 렌더링을 하기 위해선 서버가 필요하며 서버를 띄우기 위해서 개발자가 인프라 작업을 해줘야 합니다. (Vercel같은 플랫폼에서는 이런 번거로운 인프라 작업을 대신 해줍니다.)

2. 무조건적으로 Next.js를 쓰는 것이 SSR 이점(초기 로딩 속도 향상, SEO 등)과 CSR 이점(UX 향상)을 모두 취하게 되므로 React는 굳이 쓸 이유가 없겠다란 생각이 들어서 이렇게 질문드립니다
-> 서버사이드 렌더링을 사용하면 서버를 띄워야 하는데, 사용자가 늘어나면 서버 비용을 부담해야 하고 서버에 장애가 발생하는 상황도 고려해야 합니다. 사용자가 많아질수록 장애 발생시 리스크도 함께 증가하고, 프론트 개발자의 야근이 늘어날수도 있다는 점을 고려하셔야 합니다. 다만, 서버를 띄우지 않고 배포하는 SSG(Static Site Generation) 방식(빌드 타임에 미리 데이터를 받아와서 페이지를 구워놓는 방식)을 선택할 수 있는 것은 일반 React에 비해 확실히 이점이 있습니다. 서비스의 요구사항에 따라 적절한 도구를 선택하시면 됩니다.
예를 들어 대부분 정적인 페이지로 이루어져있는 블로그의 경우 불필요하게 24시간 가동하는 서버를 띄우기보다는 SSG로 수정/삭제/생성의 동작이 있을 때만 빌드해서 github pages나 Netlify같은 서비스에 업로드하는것이 좋겠죠?