프론트엔드 분야는 빠르게 변하는 분야다.
그 중 리액트 단점을 보완하는 Vercel팀에서 만든 NextJS라는 프레임워크가 등장했다. 리액트가 제공하지 않는 다양한 기능을 제공해 프론트엔드의 주요 도구로 자리매김했다.
나 또한 이러한 변화에 도태되지 않게 Next.js를 📌 개인 포트폴리오 프로젝트에 적용해보았고, 헷갈리는 기본적인 개념정리를 간단하게 포스팅해보겠다.
✔ Next.js
Next.js가 뜨고있는 가장 큰 이유는 단연 SSR(Server Side Rendering), SEO(Search Engine Optimization)이점 때문이다.
SSR(Server Side Rendering)
서버에서 HTML을 구성하여 클라이언트로 보내주는 방식.
서버를 이용해서 페이지를 구성하기 때문에 CSR보다 페이지를 구성하는 속도는 늦지만 전체적으로 사용자에게 콘텐츠를 보여지는 시점을 빠르다는 장점이 있다.
SEO(Search Engine Optimization)
검색 엔진 최적화라 하며 웹사이트가 검색 결과에 잘 보이도록 하는 과정이다. 검색할때 검색 엔진은 일정한 규칙으로 웹을 크롤링하기 때문에 SEO를 진행하면 검색 결과가 상위로 노출되어 사용자의 유입을 증가시킬 수 있다. 유입의 증가는 기업에서는 수익으로 연결되므로 중요한 부분이다.
✔ CSR vs SSR 비교
React와 Next.js 렌더링 구동방식이 다르기 때문에 CSR과 SSR의 차이점을 비교해보자.
초기 로딩속도
CSR : 서버에서 js를 받아와 클라이언트에서 생성해 초기로딩이 오래걸린다.
SSR : SSG(static site generation), Pre-rendering때문에 초기 로딩속도가 빠르다.
[용어정리]
SSG(static site generation)
: NextJS는 기본적으로 빌드 시 사전 HTML을 가진다. SSR의 기본이 되는 기능.페이지 전환
CSR : 사용자가 페이지를 전환할 때 부드럽다. SPA 특징.
SSR : 화면 전환 시 흰색화면이 보여져서 사용자에겐 깜빡이는 것처럼 보인다.
[용어정리]
SPA(Single Page Application)
: 단일 페이지로 구성된 웹 애플리케이션으로 필요한 부분만 렌더링하기 때문에 작은 트래픽
으로 효율적이고 자연스러운 화면전환이 가능한 특징. SEO(Search Engine Optimization)
CSR : 빈 HTML이라 검색엔진이 크롤링했을 때 불리하다.
SSR : 사전 HTML을 구성할 수 있어 SEO에 유리하다.
서버부하
CSR : 변경된 사항만 Server에 요청을 할 수 있어 비용적인 측면에서 효율적.
SSR : 요청이 있을때마다 매번 서버에서 연산을 수행해서 부하가 크다.
페이지별 사용
CSR : 데이터 업데이트가 자주 일어나는 페이지에 사용(유저 대시보드)
SSR : 항상 최신의 정보를 보여주어야하는 경우 사용
✔ 정리
SSR, SEO, 쉬운 Route, 다양한 기능들이 있지만 이 포스팅에는 간단한 개념만 정리해보았다. 영어로된 공식문서를 보는건 쉽지 않겠지만, 친절하고 자세하게 설명되어 있으니 아래 참고란다. 다음 포스팅에는 SSR을 적용에 대해서 포스팅해봐야겠다. 끝.
참고
