[nextJS] Next.js의 구동방식 및 데이터 fetching 방식의 차이

suyeonme·2021년 2월 17일
0

React

목록 보기
23/26

면접중 next.js에 관한 질문을 받았는데, 평소에 애매하게 알고 있던 부분이라서 명확하게 대답을 하지못했다. 따라서 다시 정리해본다. 🤓

Next js의 구동방식

Next 서버로 요청을 보냄 - 요청에 맞는 페이지 탐색 - _app.js 실행(getInitialProps가 있다면 실행) - _document.js 실행 - 컴포넌트 렌더링

이 때 _app.js_document.js는 가장 먼저 실행된다. 두 파일 모두 page 폴더에 위치 시킨다.

_app.js

  • 초기에 기본 페이지들의 component로 사용된다. 따라서 주로 전체 컴포넌트의 공통된 레이아웃으로 사용된다.
  • 공통된 Layout 컴포넌트 적용
  • 페이지 이동시 state유지 / ContextAPI의 Provider 사용
import 'styles/reset.css';
import CartProvider from 'reducer/context';
import Layout from 'components/Layout/Layout';

function MyApp({ Component, pageProps }) {
  return (
    <CartProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </CartProvider>
  );
}

export default MyApp;

_document.js

  • static html를 구성하기 위한 파일이다. 따라서 html body와 같은 기본 태그들의 속성 및 구조를 정의할 때 사용된다.
  • head의 내용을 작성 (Google Font등)
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

getInitialProps

getInitialProps enables server-side rendering in a page and allows you to do initial data population, it means sending the page with the data already populated from the server. This is especially useful for SEO.

Next.js에서는 getInitialProps이라는 비동기 함수를 사용해서 서버에서 미리 데이터를 fetching하고, 데이터가 담긴 페이지를 반환한다.

Next.js에서 getStaticProps, getServerSideProps의 차이점은?

  • Next.js 9.3이후부터 getInitialPropsgetStaticProps getServerSideProps getServerSideProps로 총 세가지로 세분화 되었다.
  • getStaticPropsgetServerSideProps 의 차이점은, 빌드 이후 데이터의 변경 가능 여부가 다르다는 점이다.

getStaticProps(Static Generation)

  • Fetch data at build time for pre-rendering.
  • 빌드시 고정되는 값으로, 빌드 이후에는 변경이 불가하다.

getServerSideProps(Server-side Rendering)

  • Fetch data on each request for pre-rendering.
  • 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져온다.

Styled-components

Next.js에서 styled-components를 사용하기 위해서 server side rendered styles을 에 injecting했는데, 현재는 createGlobalStyle_app.js에 사용하면 된다.

profile
Frontend Engineer.

0개의 댓글