티스토리 뷰

Next.js

Custom Document

심재철 2020. 5. 16. 00:18

Custom Document는 서버사이드렌더링 되는 페이지의 마크업을 추가하기 위해 사용한다. 이 Custom Document내부에는 getInitialProps가 있는데 여기서의 getInitialProps는 서버사이드렌더링 될때 필요한 데이터를 비동기로 가져오기 위해서 존재한다. next.js는 기본적으로 Document.js를 가지고 있지만 서버사이드렌더링 될때 어떤 특정 데이터를 페이지에 내려주고 싶다던지 마크업을 수정하고 싶다던지 하는 커스텀 요구사항이 있을때 pages폴더 아래에 _document.js파일을 만들어주면 된다.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Html, Head, Main, NextScript 4개는 필수로 들어가야 한다. Main에는 넥스트에서 사용하는 컴포넌트들이 들어가있다. Document.js에 있는 getInitialProps에는 context객체가 들어오는데, 이건 기존의 page에 존재하는 getInitialProps와 똑같은 속성들을 가지고 있지만 renderPage라는 속성을 추가로 하나를 더 가지고 있다.

 

이 renderPage라는 함수는, 리액트의 렌더링 로직을 실행시키는 콜백함수이다.

주의사항

  • Document.js는 노드에 의해서 실행되므로 onClick과 같은 이벤트 핸들러는 동작하지 않는다.
  • <Main /> 바깥에 있는 리액트 컴포넌트는 브라우저에 의해서 초기화 되지 않는다. 전체 페이지에서 공유하는 컴포넌트를 만들고 싶으면 여기가 아니라 app.js에 추가하라.
  • Document.js에 있는 getInitialProps는 클라이언트 라우팅이나 스태틱페이지에서는 동작하지 않는다. 오로지 서버사이드렌더링 될 때 노드에 의해서만 실행된다.
  • ctx.req / ctx.res 가 undefined라면 해당 페이지는 static page이다.
  • Head태그 안에 title 태그나 styled-jsx를 넣는 등의 행위를 하면 안된다. 예기치 못한 동작을 야기한다.

ctx.renderPage를 언제 사용해야 하는가?

이 renderPage를 사용하는 유일한 목적은 css-in-js 라이브러리를 서버에서 사용하기 위함이어야 한다.

 

저작자표시
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함