서버 사이드 렌더링
이름만 들어도 무시무시한 서버 사이드 렌더링은 서버에서 초기 state를 가진 완성된 view를 렌더하는 것이다. 하지만 초기 state는 redux, mobx, context API에서 사용한 store에서 해당 state를 받아와야 하고 해당 state를 업데이트 하기 위해서는 렌더링 이후 CDM나 useEffect를 통해 재렌더링 후 초기 값을 세팅해줘야 한다. 하지만 SSR은 리렌더링 없이 완성된 view를 한번에 렌더링하는 것이 목적이다. 이를 가능하게 만드는 것이 바로 바로 getInitialProps
getInitialProps
getInitialProps는 서버와 클라이언트에서 모두 호출되지만 한 번에 호출되지 않는다. 즉, route로 접근할 때 새로고침, 직접 URL을 입력하는 방식의 SSR로 접근하면 서버에서 호출되고 Link로 접급하면 클라이언트에서 호출된다.
이러한 특징 때문에 getInitialProps는 page 안의 컴포넌트에서 호출해야 한다. 해당 컴포넌트들의 자식 컴포넌트는 사용 불가!
getInitialProps 플로우
getInitialProps의 호출- URL주소를 이용해 특정 페이지에 접근하면 Node.js 환경에서
getInitialProps가 호출된다. - 클라이언트(웹브라우져)에서 SPA로 화면 이동할 경우에는 브라우져 환경에서 getInitialProps 가 호출된다.
- URL주소를 이용해 특정 페이지에 접근하면 Node.js 환경에서
-
getInitialProps가 obejct를 리턴하면 constructor에 props로 전달된다. -
서버에서 rendering 된 html 이 그대로 클라이언트로 내려온다.
after 9.3
Next.js 9.3 부터는 getInitialProps가 3개로 세분화 되었다.
-
getStaticProps : 빌드 타임 때 data fetch를 하는데 딱 한 번만 실행된다. 따라서 빌드시 고정되는 값이고, 빌드된 이후에는 변경이 불가능하다.
-
getStaticPaths : data에 기반하여 pre-render할 동적 라우팅을 적어준다.
-
getServerSideProps: 각각의 요청마다 data를 fetch한다. 같은 페이지에서 페칭하고 다른 내용은 렌더한다. Static이 아니기 때문에 매 요청마다 데이터를 서버로 부터 가져온다.
getStaticProps와 getServerSideProps의 차이는 빌드 이후에도 data를 변경할 수 있냐의 여부
getStaticProps
페이지가 렌더될 때 무언가를 받아오는 작업을 할 때 사용한다.
그래서 쓰이는 곳은
- 유저 요청에 따라 매번 fetch 않 해도 될 때
- 전체 공개 게시물
만약 /post/5, /post/7과 같이 동적인 라우트에서 특정 파라미터, 쿼리를 잡아내서 정보를 페칭하는 작업을 빌드 전에 해주어야 한다면 어떻게 해야 할까요? getInitialProps를 사용하시게 된다면 context에서 query를 빼다 쓰면 되겠지만 getStaticProps에서는 이런 방법을 사용할 수 없습니다. 대신 getSticPaths와 함께 사용하면 됩니다.
getStaticPaths
(정리중)
getServerSideProps
getInitialProps처럼 사용하면 된다.
출처 : https://ssangq.netlify.app/posts/nextjs-getinitialprops
https://darrengwon.tistory.com/744
https://min9nim.github.io/2018/11/nextjs-getInitialProps/
