07. Next.js와 TypeScript

135. NextJS 란?

React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 간단한 프레임워크
리액트로 개발할 때 SPA와 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있음. 그것이 바로 검색엔진 최적화(SEO) 부분
Client Side Rendering을 하면 첫페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출되지 않음

하지만 Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하여 완성된 html을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게됨

리액트에서도 SSR을 지원하지만 구현하기에 굉장히 복잡하기 때문에 Next.js를 통해서 이 문제를 해결

SSR(Server Side Rendering)

• 클라이언트 대신 서버에서 페이지를 준비하는 원리
• 원래 리액트에서는 클라이언트 사이드 렌더링을 하기 때문에 서버에 영향을 미치지 않고 서버에서 클라이언트로 응답해서 보낸 html도 거의 비어있음
  => 이 방식은 서버에서 데이터를 가져올 때 지연시간 발생으로 UX 측면에서 좋지 않을 수 있음
  => 검색 엔진에 검색 시 웹 크롤링이 동작할 때 내용을 제대로 가져와 읽을 수 없기에 검색엔진 최적화에 문제가 생김
• Next.js에서는 서버 사이드 렌더링을 이용하므로 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달 할 수 있어서 검색엔진 최적화에 좋음

138. Data Fetching

Next.js에서 데이터를 가져오는 방법

보통 리액트에서는 useEffect로 데이터를 가져옴. 하지만 next.js에서는 여러가지 방법이 있으며 사용 용도에 따라 사용하면 됨

• getStaticProps: Static Generation으로 빌드할 때 데이터를 불러옴 (미리 만들어둠)
• getStaticPaths: Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅 구현 (pages/post/[id].js)
• getServerSideProps: Server Side Rendering으로 요청이 있을 때 데이터를 불러옴

getStaticProps

getStaticProps 함수를 async로 export하면 getStaticProps에서 리턴되는 props를 가지고 빌드 타임에 페이지를 pre-render함

getStaticProps를 사용해야 할 때

• 사용자의 요청보다 먼저 build 시간에 페이지를 렌더링하는데 필요한 데이터를 가져올 때
• Headless CMS에서 데이터를 가져올 때
• 데이터를 공개적으로 캐시할 수 있을 때 (사용자별 x)
• 페이지는 미리 렌더링되어야 하고 (SEO의 경우) 매우 빨라야 할 때 (getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성)

getStaticPaths

동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, 빌드 시간에 HTML에 렌더링 됨
Next.js는 pre-render에서 정적으로 getStaticPaths에서 호출하는 경로들을 가져옴

Paths

• 어떠한 경로가 pre-render 될지 결정
• 예시)
  만약 pages/posts/[id].js 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 작성

  return {
   paths: [
     { params: { id: '1' } },
     { params: { id: '2' } }
   ],
   fallback: ...
  }

  빌드하는 동안 /posts/1과 /posts/2를 생성하게 됨
  

fallback

• false인 경우: getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜸
• true인 경우: getStaticPaths로 리턴되지 않는 것은 404로 뜨지 않고, fallback 페이지가 뜨게 됨

getServerSideProps

getServerSideProps 함수를 async로 export하면, Next.js는 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render함
build 타임에 한번에 가져오는게 아니라 요청할 때 마다 가져옴

getServerSideProps를 사용해야 할 때

• 요청할 때 데이터를 가져와야하는 페이지를 pre-render해야 할 때 사용
• 서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느림

139. TypeScript

TypeScript가 나오게 된 배경

JavaScript의 코드가 커질수록 소스 코드가 복잡해져서 코드를 유지 관리하고 재사용하기가 어려워짐. 더욱이 Type 검사 및 컴파일 시 오류 검사의 기능을 수용하지 못하기 때문에 이것을 해결하기 위해 TypeScript가 제시됨.

TypeScript 란?

타입스크립트는 자바스크립에 타입을 부여한 언어. 타입스크립트는 자바스크립트를 타입 시스템으로 감싼 자바스크립트의 확장된 언어라고 할 수 있음.
타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 함. 이 변환 과정을 컴파일이라고 부름

Type System

• 개발 환경에서 에러를 잡는 걸 도와줌
• type annotation을 사용해서 코드를 분석할 수 있음
• 오직 개발 환경에서만 활성화 됨
• 타입 스크립트와 성능 향상과는 관계가 없음

TypeScript를 사용해야 하는 이유

• TypeScript는 JavaScript 코드를 단순화하여 더 쉽게 읽고 디버깅 할 수 있게 함
• TypeScript는 오픈 소스
• 정적 검사와 같은 JavaScript IDE 및 사례를 위한 매우 생산적인 개발 도구를 제공
• ES6의 모든 이점을 포함한 더 많은 생산성을 제공
• TypeScript는 타입 검사를 통해 JavaScript를 작성할 때 개발자가 일반적으로 겪는 고통스러운 버그를 피하는데 도움이 됨