1. NEXT.js란 무엇일까?
Plain React 앱의 한계
- SEO(Search Engine Optimization)
- SSR(Server-Side Rendering)
설정보다 관습
- 개발자가 해야 할 결정의 수를 줄여주면서도 유연성은 잃지 않도록 하는 소프트웨어 설계 패러다임
활동적인 커뮤니티
-> 보다 효율적인 개발 가능!
2. Data Fetching
CSR (Client Side Rendering)
클라이언트에서 그린다!
사용자가 최초 페이지에 접근한다면, 브라우저가 해당 웹 애플리케이션에 필요한 HTML과 정적자원(css, js, img 등)을 서버에 요청한다. 서버에서 기초적인 HTML과 자원들을 전송해주면, 브라우저는 HTML을 해석하여 DOM을 생성하고 자원들을 다운로드 한다. 이후 자바스크립트 엔진에 의해 js 파일들이 실행되고, 페이지에서 보여줄 컴포넌트가 동적으로 생성되고 렌더링된다.
- 장점
- View 렌더링을 브라우저에게 담당시킴으로써 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공해준다.
- 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.
- 단점
- 첫 페이지 로딩 속도가 SSR에 비해 비교적 느리다. (서버에 첫 요청시, 전체 페이지에 대한 모든 문서 파일을 전달받기 때문)
- 검색엔진최적화(SEO)에 대한 추가 보완 작업이 필요하다.
SSR (Server Side Rendering)
서버에서 그린다!
SSR은 서버 사이드 렌더링 말 그대로 HTML 파일을 서버에서 렌더링을 진행한다는 것이다. 각 페이지 URL 마다 보여줄 내용이 미리 결정되어 있다. 사용자가 웹 페이지에 접속하면 브라우저가 해당 URL을 서버에 요청하고, 서버는 이 URL을 기준으로 어떤 페이지를 렌더링할지 결정한다. 즉, pre-rendering된 HTML 파일을 가져온 후 데이터를 담아서 전달하는 것이다.
- 장점
- 첫 페이지 로딩 속도가 CSR에 비해 비교적 빠르다.(해당 첫 페이지에 해당하는 문서만 브라우저에게 전달하여 브라우저가 렌더링하기 떄문)
- 검색엔진최적화(SEO)가 가능하며, 수월하다.
- 단점
- 초기 로딩 이후 페이지 이동 시, 속도가 다소 느리다.
- 매번 새로고침으로 인한 깜빡임 이슈
- 서버 과부하
- TTV(Time To View) / TTI(Time To Interact)의 공백시간
SSG (Static Site Generation)
정적 사이트를 생성한다!
SSG는 Next.js에서 페이지를 생성할 때, 기본으로 적용되는 설정이다. SSG 역시 서버 사이드 렌더링을 하지만, SSR과 다른 점은 클라이언트가 요청하는 시점이 아니라 빌드(Build)시에 페이지를 미리 생성해 놓는 것이다. 별다른 설정 없이도 SSG가 생성이 되지만, Data Fetching이 필요한 경우에는 getStaticProps라는 함수를 활용하여 pre-rendering을 진행한다. 실시간 데이터가 아니라는 점이 특징이다.
ISR (Incremental Static Regeneration)
일정 시간마다 재생성!
ISR은 빌드 시점에 페이지를 렌더링 한 후에 설정한 시간마다 즉, 특정 주기마다 페이지를 새로 렌더링한다. ISR로 구분했지만 사실 SSG에 포함되는 개념이라고 할 수 있다. SSG와 차이점은 빌드 시에 페이지를 생성하기 때문에 Data Fetching하는 데이터가 변경되면 다시 빌드해야하는 SSG와는 달리 일정 시간마다 알아서 페이지를 업데이트 해준다.
revalidate라는 속성을 추가하여 사용한다.
3. Pages & Layouts
Pages
- 해당 경로에 고유한 UI
- 페이지는 특정 경로에 따른 고유한 UI입니다. 페이지를 정의하기 위해 page.js 파일에서 컴포넌트를 내보내는 방식을 사용할 수 있다.
Layouts
- 여러 페이지에 공유되는 UI
- 레이아웃은 여러 페이지 간에 공유되는 UI입니다. 탐색 시 레이아웃은 상태를 유지하고 다시 렌더링하지 않습니다. 레이아웃은 중첩될 수도 있습니다.
4. Routing
브라우저 경로에 따라 다른 화면(페이지)을 보여주는 것.
기존의 React에서는 react-router-dom 라이브러리를 설치해서 사용해야 했지만, Next.js에서는 별도의 라이브러리를 설치할 필요가 없다.
- 세그먼트 Segment 라우팅: 소스 기반 라우팅 아키텍쳐
