Next.js

• Next.js는 React로 만드는 서버사이드 렌더링 프레임워크이다.

Next.js를 왜 쓸까?

• 리액트에서 서버사이드 렌더링을 쉽게 구현할 수 있다.
• 라우팅 기능
• 코드 스플릿팅
  • 코드를 목적에 따라 분리하여 필요한 코드만 호출한다. 즉 필요하지 않은 코드는 호출하지 않기 때문에 페이지 로딩 속도를 개선한다.

SSR(Server Side Rendering)

• 사용자가 웹 페이지를 방문했을 때 브라우저에서 자바스크립트 코드를 다운받아 해석할 때까지 기다리지 않고, 서버에서 보여질 HTML을 미리 준비해 클라이언트(브라우저)에 응답하는 방식을 말한다. 이를 통해 사용자는 바로 렌더링되는 화면을 보기 때문에 사용자 경험이 높아진다.

  • 클라이언트에서 하는 모든 작업을 서버에서 작업하여 뷰를 사용자에게 보여주는 방식이다.
  • SSR경우 모든 리소스를 서버에서 랜더링한 후 리턴한다(여기서 서버라는 것은 Frontend 서버를 말한다). SSR은 모든 처리가 끝나고 완전한 HTML파일을 전달한다.
  • 서버에서 자바스크립트를 로딩하기 때문에 클리어인트측에서는 자바스크립트를 로딩하는 시간이 줄어들게 된다.
  • 즉 첫 로딩이 매우 짧다. 하지만 페이지 이동 시 페이지를 요청할 때마다 중복되는 파일을 내려 받아야 하기 때문에 서버 부하가 CSR보다 많다.

• 클라이언트 렌더링이 가지는 seo 문제를 해결한다. 그 문제는 자바스크립트가 로드되지 않은 경우 아무런 정보를 보이지 않는다는 것이다. 바로 이때 구글의 검색엔진은 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로써 검색에 아무 페이지도 걸리지 않게 된다.

  • 그런데 SSR의 경우 검색엔진이 자바스크립트를 읽는 것이 아니라 서버 측에서 js, html, css를 만들어 컨텐츠를 직접 업로드 함으로써 검색엔진에 노출된다. 또한 meta 태그를 자유롭게 추가해서 seo를 용이하게 한다.

CSR(Client Side Rendering)

• 클라이언트 사이드 렌더링이란, 자바스크립트 파일을 브라우저에서 해석해 렌더링하는 방식이다. 비어있는 HTML 문서 위에 사용자의 요청에 따라 그때그때 페이지를 구성하여 보여주는 방식이다. React, Angular, Vue 등 SPA(Single Page Application) 들이 이에 해당된다.
  • 예를들어 리액트로 뷰를 만들고, 각 각 필요로 한 데이터를 서버 API에 요청하여 사용하는 방식으로, 클라이언트와 서버가 분리되어 가동되는 방식이다.
• 첫 로딩이 SSR에 비해 길다. 모든 JS파일을 다운로드 받은 후 랜더링하기 때문에 상대적으로 오래걸린다. 하지만 첫 로딩 후에 서버에 다시 요청할 필요가 없기 때문에 그 이후에는 더 빠르다.
• 위에서 언급한 것 처럼 검색 엔진 최적화에는 불리하다.

Next.js 를 통해 보는 SSR Cycle

페이지 요청이 오면 수행하는 순서가 다음과 같다
1. Frontend Server에서 GET 요청을 받는다
2. 요청에 맞는 page를 찾는다
3. _app.js(Next.js 사용시 최초로 실행되는 파일)의 getInitialProps가 있다면 실행
4. Page Component 안에 getInitialProps가 있다면 실행
5. _document.js의 getInitialProps가 있다면 실행
6. 모든 props를 구성하고 _app.js > Page Component 순으로 렌더링
7. 모든 콘텐츠를 구성하고 _document.js를 실행하여 html형태로 출력

Next.js 구동 방식

• Next.js는 React 에서 SSR(서버 사이드 렌더링)을 쉽게 구현할 수 있도록 도와주는 프레임워크이다.
• 기본적으로 Next.js 는 모든 페이지를 미리 렌더링(Pre-rendering)한다.
  • Next.js 는 각 페이지에 대해 미리 HTML를 생성하고, 클라이언트 측 자바스크립트에서 모든 작업을 수행한다.
  • 생성된 각 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다.
  • 브라우저에서 페이지를 로드하면 해당 자바스크립트 코드가 실행되고 페이지가 완전히 상호작용하게 되는데 이러한 과정을 Hydration 이라고 한다.

---

create-next-app 으로 설치하면?

• 컴파일과 번들링이 자동으로 된다.
  • webpack 과 babel
• 자동 리프레시 기능으로 수정하면 화면에 바로 반영된다.
• 서버사이드 렌더링이 지원된다.
• 스태틱 파일을 지원한다.

왜 _app.js 파일을 통할까?

• 페이지 전환 시 레이아웃을 유지할 수 있다.
• 페이지 전한 시 상태값을 유지할 수 있다.
• componentDidCatch를 이용해서 커스텀 에러 핸들링을 할 수 있다.
• 추가적인 데이터를 페이지로 주입시켜주는 게 가능하다.
• 글로벌 CSS를 이곳에 선언한다.

next.js

• 모든 페이지를 사전 렌더링 한다(pre-rendering)
  • 미리 HTML 파일을 만든다는 의미
• 더 좋은 퍼포먼스
• 검색엔진 최적화(SEO)

PRE-RENDERING

1. 정적 생성
2. Server Side Rendering(SSR, Dynamic Rendering)

차이점은 언제 html 파일을 생성하는가

정적 생성

• 프로젝트가 빌드하는 시점에 html 파일들이 생성
• 모든 요청에 재사용
• 퍼포먼스 이유로, nex t.js 는 정적 생성을 권고
• 정적 생성된 페이지들은 CDN에 캐시
• 마케팅 페이지, 블로그 게시물, 제품 목록, 도울말, 문서
  • 비동기
  • 유저가 요청하기 전에 미리 만들어 두는 경우

getStaticProps / getStaticPaths

서버 사이드 렌더링

• 매 요청마다 html 생성
• CDN에 캐시되지 않기 때문에 정적 생성 방식보다는 느릴 수 있다.
• 항상 최신 상태 유지
• 관리자 페이지, 분석 차트

getServerSideProps