getStaticProps - Next.js에서의 프리렌더링

Next.jx에서 getStaticProps를 사용하면 프리렌더링을 하게 된다.

1. 서버사이드에서 html을 만들어서 클라이언트에게 전해준다 (ex : 데이터fetch)

2. 클라이언트사이드에서 JS로 추가 작업 진행 (ex : 여러가지 리액트 훅)

Next.js 공식문서는 언제 쓸지, 언제 작동되는지 등등 친절하게 알려주고있다.

언제 사용해야 할까?

- 유저 요청 이전에 페이지 렌더링을 위해 데이터가 필요할때

- Headless CMS%EB%8A%94%20%EC%97%86%EB%8A%94%20%EC%85%88%EC%9D%B4%EC%A3%A0.)에서 데이터를 가져올때(ex : NotionAPI)

- 페이지가 SEO를 위해 프리 렌더링 되어야 할때, getStaticProps는 CDN에 캐시 될 수 있는 HTML과 JSON을 만든다.

- 데이터가 공개적으로 캐시될 때

언제 사용될까?

getStaticProps는 항상 서버에서 작동한다.(클라이언트에선 never)

클라이언트 사이드에서 제거되기를 원하는 코드가 있다면 getStaticProps안에 작성하면 된다.

- getStaticProps는 'next build' 하는 동안에 run한다.

- getStaticProps는 revalidate()실행시 run 한다.

ISR과 결합하면 오래된 페이지가 재검증되는 동안, 백그라운드에서 실행되고 새 페이지가 브라우저에 제공된다.

getStaticProps는 정적 HTML을 생성하므로 incoming request(query parameters, HTTP headers)에 접근할 수 없음

만약 필요하다면 추가 미들웨어를 고려해야한다.

SSR 코드를 다이렉트로 작성하기

getStaticProps는 SSR에서만 돌기 때문에(CSR에선 never), DB쿼리를 브라우저에 보내지 않고도 직접 작성할 수 있다.

예를들면 data fetching을 클라이언트에서 하지 않고 getStaticProps에서 하게 되면, 추가 요청(성능 저하)없이 데이터를 불러올 수 있다.

import { getCards } from '@/lib/notion'

const TestPage = (props) => return (
	<>
      <Head>
      ..메타태그..
      </Head>
      <PageTemplate>
      	...
      </PageTemplate>
    </>
)

export const getStaticProps: GetStaticProps = async () => {
	const cards = await getCards('red');
    
    return {
    	props:{cards}
    }
};

export default TestPage;

대신 getStaticProps로 date fetching을 하려면 CMS로부터 data fetching하는 코드를 lib/ 디렉토리에 작성해야 한다.

// lib/notion/getCards.ts

export const getCards = async (card:string) => {

	const notion = new NotionClient();
    const data = await notion.getQueryData(DATABASE_ID);
    ...
    return results
}

(아니면 getStaticProps에서 바로 fetch API를 사용해도 된다.)

정적으로 HTML, JSON 생성

getStaticProps로 프리렌더링할때, Next.js는 getStaticProps 실행결과를 담은 JSON 파일을 만든다.

이 JSON 파일은 CSR에서 next/link, next/router를 통해 활용된다.

만약 getStaticProps로 프리렌더링된 페이지에 navigate할 때, Next.js는 (빌드시 미리 계산된)JSON파일을 fetch하고 page component의 props로 사용한다. => export된 JSON만 사용되므로 클라이언트측 페이지 전환이 호출되지 않음.

어디서 사용할 수 있는가?

getStaticProps는 page에서 export될 수 있다.

non-page files(_app,_document, or _error) 에서 export 될 수 없다.

=> 페이지가 렌더링되기 전 React에 필요한 모든 데이터가 있어야 하기 떄문

'개발 > Next.js' 카테고리의 다른 글

router.push, <Link />, <a /> 차이 (0)	2022.07.29
_document (0)	2022.07.26
Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유 (0)	2022.07.18
globalStyle 때문에 ol태그가 적용 안될 때 (0)	2022.05.26
Next.js "Reference Error: document is not defined" (0)	2022.03.02

기록 (21.7.19 ~