getInitialProps 잘 사용하고 있나요?
서비스의 점검 상태중인 경우 리다이렉트 시켜주는 작업을
_app.tsx 파일에서 useEffect 를 통해 구현하니 페이지가 잠깐 노출된 후 리다이렉트가 되는 문제가 생겼다.해당 문제를 해결하기 위해
_app.tsx 에 getInitialProps 를 적용하고 상태체크를 하는 api를 호출하여 결과 값을 props로 전달하는것으로 잠시 노출되는 현상은 해결됬지만 랜더링 속도가 적용하기 이전보다 많이 느려졌다… 고민을 해보니 getInitialProps 의 특성을 잘 이해하지 않고 사용하여 발생한 문제였다… 애초에 getInitialProps 는 server-side rendering 을 해주지만 statically optimized 를 해주지 않아 매 번 페이지를 열거나 새로고침 하여 url에 직접 요청을 하게 되면 서버 사이드에서 실행되기 때문에 초기 랜더링이 느려질수 밖에 없다... 그렇기 때문에 getInitialProps 가 아닌 middleware 를 사용해야 됬던것이다.middleware 는 nextJS12 버전부터 제공하는 기능으로 유저 request를 기반으로 response를 조정할 수 있게 해주는데, 이 기능을 활용하여 리다이렉트 시켜주는 작업을 진행해줘야 됬다. 관련해서는 다음에 따로 정리할 예정이다.getInitialProps의 단점은 무엇일까?
서버 사이드에서 페이지를 렌더링 한다
작업을 하다 보면 가끔 server로 부터 데이터를 받아 온 뒤 정적 페이지를 렌더링 해줘야 되는 케이스가 있는데.
getInitialProps 의 존재는 모든 페이지가 pre-render (요청때 마다 html 파일을 만들어주는 것이 아닌 빌드 할 때 페이지를 미리 html파일로 생성해놓는다는 의미) 를 하지 않도록 만든다. 비동기 요청으로 받아온 데이터를 활용하여 페이지를 렌더링하기 때문에 정적 페이지를 만들 수 없게 되어 server-side 렌더링 방식으로 작동하게 되기 때문._app.js 에서 사용할 경우 automatic static generation 사용하지 못하게 된다.
모든 페이지에 공유가 되는 데이터가 필요한 경우 커스텀 app 파일에
getInitialProps 사용은 매우 유용하지만 모든 페이지가 server-side 렌더링 방식이 적용된다. server-side 렌더링만 지원하는것이 목적이라면 괜찮겠지만. 아닌 경우 초기 로딩이 매우 느려지는 끔찍한 경험을 하게 된다.공식적으로 사용을 추천하지 않음
getInitialProps 는 deprecated 가 된것은 아니지만 nextJS 팀에서도 사용을 권장하지 않는다고 한다.- 대신 사용하기 쉬운
getServerSiderProps와getStaticProps는 사용하는것을 권장한다.
- 한 번 페이지가
build되고 CDN에 의해 serve 되는 것이 요청이 들어올때 마다 서버가 페이지를 렌더하도록 하는 것보다 빠름
getStaticProps, getServerSideProps
위에서 nextjs에서는
getStaticProps 와 getServerSideProps 를 사용하는것을 권장한다고 했다.사용해본 입장으로 실제로 정말 사용하기 쉬운 기능이다.
getStaticProps
getStaticProps 함수는 build 타임에 props 로 전달한 데이터를 활용하여 페이지를 pre-render 하게 된다. (빌드 타임에 html이 생성된다), props로 전달된 데이터는 html에 고정 데이터로 사용된다.즉, 정적인 페이지를 생성하고 싶은 경우
getStaticProps 를 통해 HTML을 생성하면 된다. - SSG(Static Site generation)만약 수시로 업데이트 되는 페이지를 원하는 경우
revalidate 옵션을 지정하면 되는데. 해당 옵션을 설정하면 build 를 배포한 이후에도 설정한 초 시간이 지난 뒤 페이지에 요청이 들어오게 되면 재빌드나 재배포 없이 페이지 데이터의 갱신 여부를 검사하여 업데이트된 페이지를 다시 정적으로 생성해준다. - ISR(Incremental Static Regenertation)더 정확한 설명에 대해서는 공식문서를 참고하면 된다 (https://nextjs.org/docs/basic-features/data-fetching/get-static-props)
getServerSideProps
getServerSideProps 함수의 경우 매 요청이 들어 올 때 마다 실행이 되며 각 요청에 HTML을 생성하게 된다. cache-control 헤더가 설정되어 있을 경우에만 캐싱이 된다. - SSR(Server Side Rendering)더 정확한 설명에 대해서는 공식문서를 참고하면 된다 (https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props)