NextJS

#1 NextJS

Next.js는 따로 설정을 해주지 않고 SSR, SEO부터 Javascript, Typescript까지 생산에 필요한 많은 기능들을 제공합니다

#2 Pre-Rendering

기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다.

클라이언트 측 Javascript에서 모든 작업을 수행하는 대신 각 페이지에 미리 HTML을 생성합니다. 사전 렌더링은 더 나은 성능과 SEO의 이점을 가져올 수 있습니다.

 

이렇게 만들어진 HTML은 해당 페이지에 적은 자바스크립트 코드와 연관되는데, 페이지가 브라우저에 로드될 때, 해당 자바스크립트 코드가 작동하고 완전한 인터렉티브 페이지가 되도록 만듭니다. 이를 Hydration이라고 합니다.

#3 두 가지 형태의 Pre-Rendering

1. Static Generation

• HTML은 빌드시에 생성되며 각 요청에 재사용 할 수 있습니다.
• Next.js에서 페이지 컴포넌트를 내보낼 때, getStaticProps라는 async 함수도 같이 내보낼 수 있습니다.
• getStaticProps가 빌드타임에 작동하고, 함수 내부에서 외부 데이터를 받아오고 이를 props로 페이지에 보낼 수 있습니다.

      export default function Home(props) { ... }

      export async function getStaticProps() {
        // Get external data from the file system, API, DB, etc.
        const data = ...

        // The value of the `props` key will be
        //  passed to the `Home` component
        return {
          props: ...
        }
      }

2. Server-Side Rendering

• 각 요청에 대해 HTML이 생성됩니다. (클라이언트 사이드에서 서버 요청을 하는 방식으로 진행 가능)
• 서버사이드 렌더링을 하기 위해서는 getServerSideProps를 export 하면 됩니다.
• getServerSideProps는 Request 시점에 데이터가 fetch 되어야 하는 페이지를 pre-render 할 때만 사용해야 합니다.

    export async function getServerSideProps(context) {
      return {
        props: {
          // props for your component
        }
      }
    }

#4 정리

- Next.js의 작동방식

  1. 사용자가 초기에 Server에 페이지 접속을 요청한 경우 SSR 방식으로 렌더링 될 HTML을 보냅니다.

  2. 브라우저에서 JS를 다운받고 실행합니다.

  3. 사용자가 페이지와 상호작용하며 다른 페이지로 이동할 경우 CSR방식으로 Server가 아닌 브라우저에서 처리합니다.

 

- SSG와 SSR과 함께 CSR을 같이 사용할 수 있습니다.

 

- Next.js를 사용하여 대부분 페이지에는 SSG를 사용하고 다른 페이지에는 SSR을 사용하여 하이브리드 Next.js앱을 만들 수 있습니다.

 

- 가급적 SSG를 사용할 수 있는 부분엔 SSG를 사용하고 필요한 부분에만 SSR을 사용할 것을 권장합니다.

• 페이지를 한 번만 빌드하고 CDN(콘텐츠 전송 네트워크)에서 제공 할 수 있으므로 서버가 모든 요청에 대해 페이지를 렌더링 하는 것보다 훨씬 빠르기 때문입니다.
• 단, 자주 데이터를 업데이트 한다거나, 매 요청마다 콘텐츠가 달라지는 경우에는 SSR을 사용해야 합니다.