NextJs Context의 의미

 

◎NextJS에서 Data Fectching 하는 방법을 알아보자.

NexJS 8 버전에는 getInitialProps를 사용했는데, 현재 9 버전에서는 getStaticProps, getStaticPaths, getServerSideProps를 주로 사용한다.

1. 사전 렌더링(pre-rendering)

◎ NextJS가 작동하는 방식과 이를 빠르게 만드는 데 있어 큰 부분을 차지한다.

기본적으로 NextJS는 실행해야 하는 최소한의 Jacascript와 함께 Hydration를 통해 각 페이지 HTML을 미리 생성하여 모든 페이지를 사전 렌더링 한다.

사전 렌더링에는 정적 생성(SG)과 서버 측 렌더링 (SSR)이 있다.

이 둘의 차이점은 데이터를 가져올 때이다.

1-2. 정적 생성(SG)

◎ SG의 경우 데이터는 빌드시 가져와서 모든 요청에서 재사용된다. (캐시 될 수 있기 때문에 더 빠름)

 

캐시 - 사용자가 웹사이트에 접속할 때, 정적 컨텐츠를 특정 위치에 저장하여 매번 요청하여 받는 것이 아니라, 특정 위치에서 불러옴으로써 응답 시간을 줄이고, 서버 트래픽 감소 효과를 볼 수 있다.

 

캐싱 - 애플리케이션의 처리 속도를 높여줌. 이미 가져온 데이터나 계산된 결괏값의 복사본을 저장함으로써 처리 속도를 향상함.

 

1.3. 서버 측 렌더링(SSR)

◎ SSR에서는 모든 요청에서 데이터를 가져온다.

즉, NextJS 앱의 일부는 정적 생성을 사용하고 다른 일부는 SSR을 사용할 수 있다.

 

2. getStaticProps

◎ getStaticProp는 페이지 콘텐츠가 외부 데이터에 의존할 때 SG(정적 생성)에서 사용되고,

async를 사용하여 export 하게 되면 NextJS에서는 빌드할 때 해당 페이지를 Pre-render 한다.

 

 

 

2-1. 특징

- 외부 데이터를 가져와서 페이지의 기본 구성 요소에 반환할 수 있는 비동기 함수이다.

데이터는 props로 반환되며 페이지에 있는 기본 내보내기 구성 요소의 props에 암시적으로 매핑됨.

- **빌드시 고정되는 값으로, 빌드 이후에는 변경이 불가

- 블로그에서 특정 페이지로 이동할 경우 해당 페이지에 속하는 블로그 글의 리스트를 불러오는 작업

 

2-2. 언제 사용해야 하는가?

 - 데이터가 공식적으로 캐싱될 수 있을 때

 - SEO 등의 이슈로 인해 빠르게 미리 렌더링 해야만 하는 페이지의 경우. Html, json 파일을 모두 생성해 둔다.

쉽게 말해 그냥 거의 외부에서 API를 통해 데이터를 가져와 렌더링 하는 모든 페이지는 써도 무방한 듯하다.

- client 사이드에서 절대로 실행되지 않는다.

- Static Data(정적인 데이터)을 위해 사용한다.

 

3. getServerSideProps

◎ 서버 측 렌더링에 사용되고, 매 요청마다 데이터를 서버로부터 가져온다.

getStaticProps와 사용하는 방법은 동일하다.

 

 

 

지금 파라미터로 context를 받아오고 있는데, context 매개 변수는 몇 가지의 키를 포함하는 객체이다.

 - params: 페이지가 동적 경로를 사용하는 경우 경로 매개 변수를 포함한다. 예를 들어 user/[id].tsx 이면 다음 params는  { id: ... }와 같이 표시된다. (동적 라우팅)

 - req: HTTP IncomingMessage 객체

 - res: HTTP 응답 객체

 - query: 쿼리 문자열

 등등 몇 가지의 키를 포함하고 있다.

 

3-1. 특징

 - 클라이언트 사이드에서 실행되지 않는 것과 page에서만 사용할 수 있다.

 - **이 함수는 서버에서 실행되는 함수이다. 즉, 클라이언트해서 빌드 되지 않는다.

 - 매 요청 시마다 서버에서 계산해야 하므로 더 느릴 수밖에 없다고 되어있다.

+ 첨언

- 페이지가 빌드 프로세스 중에 프리 제네레이트 된다. => 이말은 무슨 의미?

넥스트JS가 동적 페이지의 모든 버전의 프리 제네레이트가 필요하다는 뜻입니다.

동적이기 때문에 넥스트JS는 어떤 밸류가 프리제네이트 페이지가 되어야 하는지 알아야 한다.

프리제네이트 페이지가 아니면 어떻게 될까?

url의 접근할때 프리제네레이트 되는게 아니다. 빌드 프로세스에서 되는 거다. 따라서 모든 url에서 프리제네레이트해야 한다. 만약 프리 제너레이트 하지 않는 페이지인 밸류로 입장하면 404 에러를 보게 될 것입니다.

=> 이때는 getStatciPaths로 경로 준비 및 대체 페이지를 작업해야함.

 

즉, 모든 페이지를 프리 제네레이트하게 만들 필요가 없다 인기 있는 몇개의 페이지만 프리제네이트가 필요하므로 이렇게 하는 것.

 

 

 

+ 첨언

4. getStaticProps와 getServerSidePorps의 차이

getStaticProps 또한 변경이 가능하다 revalidate를 이용하여 시간초마다 랜더링을 할 수 있다. 하지만 매 순간 랜더링이 필요한 사이트라면 이 부분으로으는 해결이 안될 것이다. 

반면 getServerSideProps 사이트내에 데이터가 변경이 있을 때마다 랜더링이 된다. 매 순간 랜더링이 필요한 사이트라면 이 함수를 이용하는것이 좋을 것이다.

 

※ 참조

nextjs.org/docs/basic-features/data-fetching

Data Fetching: Overview | Next.js

출처: [TIL] NextJS Data Fetching :: 천천히 느리게 (tistory.com)

[TIL] NextJS Data Fetching