Next.js의 구동방식
_app.js와 _document.js
_app.js 와 _document.js 은 Next.js의 자체 로직에 의해서 기본적으로 만들어주지 않아도 실행되는 server only file파일이다. 그렇기에 두 파일에서는 client에서 사용하는 로직(ex. eventlistener 등의 window / DOM 로직)을 사용하면 안된다.
보통 프로젝트 진행시 이 두 파일을 pages 폴더에 생성 후 코드들을 자체 커스터마이징한다.
_app.js
최초 실행 되는 파일. Client Server에서 띄우길 바라는 전체 Component의 Layout이라고 생각하면 된다. 내부에 Content 들이 있다면 전부 실행하고 html의 body로 구성한다.
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;-
@Params Component : 요청한 페이지이다. 예를 들면, clinet view에서 'localhost:3000/'를 동작하면 /pages/index.js가 props로 들어오게 된다.
-
@Params pageProps : getInitialProps를 통해 들어온 props들이 들어온다.
_document.js
_app.js에서 구성한 html body가 어떤 형태로 들어갈지 구성하는 곳이다. 아래와 같이 _app.js에서 생성된 Content들이 Main 아래에 생성된다.
import Document, { Html, Head, Main, NextScript, OtherScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<OtherScript />
</body>
</Html>
)
}
}
export default MyDocumentgetInitialProps
getInitialProps는 서버에서 데이터를 Fetch 하도록 돕는 함수이다.
-
장점: Data Fetching을 서버에서 하게 되면 첫째, 속도가 빨라진다. 둘째, 코드 상의 처리가 깔끔해진다.
-
주의할점:
- getInitialProps 내부 로직은 서버에서 실행된다. 따라서 Client에서만 가능한 로직은 피해야 한다. (Window, document 등)
- 한 페이지를 로드할 때, 하나의 getInitialProps 로직만 실행된다. 예를 들어 _app.js에 getInitialProps를 달아서 사용한다면 그 하부 페이지의 getInitialProps는 실행되지 않는다.
Next.js SSR Cycle
- Next.js의 server가 GET 요청을 받는다.
- 요청에 맞는 Page를 찾는다.
- _app.js의 getInitialProps가 있다면 실행한다.
- Page Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
- _document.js의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
- 모든 props들을 구성하고, _app.js > page Component 순서로 rendering.
- 모든 Content를 구성하고 _document.js를 실행하여 html 형태로 출력한다.
사진촬영을 좋아하는 프론트엔드 개발자입니다.