지금까지 리액트로 개발을 진행해 왔다.
다음 스텝으로 Next.js를 배우게 되는데
리액트와 Next.js의 차이점이 무엇인지 알아보자.
우선 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)으로 페이지를 구현한다.
SPA로 인해 부드러운 화면 이동을 할 수 있지만
CSR로 인해 현재 페이지에 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드 하기 때문에
첫 로딩 시간이 오래 걸린다. 이로 인해 유저 경험을 헤칠 수 있다.
Next.js는 CSR이 아닌 SSR 방식으로 서버에서 랜더링하여 페이지를 받아오게 된다.
이로 인해 첫 로딩 시간이 빠르고, 만들어진 페이지를 받기 때문에 SEO에도 유리하다.
sangmin's velog