Next.js란
소개
Next.js는 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 React 프레임워크입니다. 성능과 번들 크기, SEO 등을 제공합니다
React와 차이
React는 UI 개발을 위한 라이브러리로 UI 개발을 위해 필요한 기능들을 제공하지만 나머지는 개발자의 자율성에 맡긴다 ex)최적화나 라우팅, 번들링, 셋팅, 규칙 등.
Next js에서는 이러한 셋팅들을 맞춤 제공한다. 또한 SSR과 SSG를 제공 해 CSR에서 구현이 어렵던 SEO를 지원한다.
동작 원리
사전 렌더링 (SSR, SSG)
서버에서 UI(HTML)을 그린 상태로 보내 클라에서 자바스크립트 실행 없이 UI를 볼 수 있게 해준다.
HTML이 완성 된채로 나오기때문에 구글 검색엔진이 크롤링이 가능해 SEO에서 유리함.
서버 사이드 렌더링 (Server Side Rendering)
서버 사이드는 클라이언트에서 요청 시 서버에서 HTML을 그린 후 클라이언트로 보낸다. 때문에 클라이언트에서 추가 렌더링이 필요하지 않기에 CSR보다 초기 렌더링이 빠르다는 이점이 있다. 하지만 페이지 전환 시 그림과 같이 매번 서버에서 HTML을 새로 그려야하기 때문에 CSR 보다 느리다는 단점이 존재.
정적 생성 (Static Site Generation)
서버사이드 렌더랑과 차이는 무엇일까?
SSR과 마찬가지로 서버에서 완성된 HTML을 클라이언트측으로 보낸다.
다만 HTML이 그려지는 시점이 다르다. 그림에서 보듯이 정적 렌더링은 빌드 시 HTML을 생성한다!. 이후 정적 결과물을 호스팅 해주는 서버에 업로드만 하면 된다. 클라이언트에서 요청이 오면 서버는 미리 생성된 HTML을 보내기만 할 뿐이다.
만약 외부 데이터가 포함되어 있다면 빌드 시 API를 호출해 데이터가 포함된 HTML을 생성한다.
장점
SSR,CSR보다 초기 렌더링이 무척 빠르다. 서버에서 완성된 HTML을 매번 새로 그리지 않고 재활용하기 때문. 또한 SSR의 단점으로 꼽혔던 매번 서버에서 새로 그려 렌더링 속도가 느렸던 이슈가 해결될 수 있다.
단점
외부 데이터가 게속 잦은 변동이 이루어진다면 사용이 어렵다는 점이다. 빌드타임에 API를 호출하기 때문에 HTML은 클라이언트측이 요청한 시점이 아닌 개발자가 서버에 업로드 전 빌드시에 완성된 HTML이다. 그렇기 때문에 최신 데이터가 아닌 빌드 시에 호출된 데이터가 나올 수 있다.
어떤 방법을 사용해야할까?
각각의 방법은 나름의 장점이 있기에 Next js로 개발 시 여러 렌더링 방식을 섞어 사용하곤 한다.
1. 외부 API의 실시간 성이 중요할 경우
CSR이나 SSR을 사용 해 매번 API를 새로 호출한다.
2. 정적인 페이지 이거나 외부 API 데이터 변화가 거의 없는 경우
SSG를 사용해 HTML을 재활용하는 것이 좋다.
3. 검색엔진최적화(SEO)가 중요할 경우
SSR이나 SSG를 사용해 완성된 HTML을 클라이언트로 보내 SEO를 지원하자
