Next.js

카테고리 : Study >> React

Next.js

Next.js란?

React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크이다.

리액트로 개발할 때 SPA을 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 검색엔진 최적화(SEO)가 어렵다는 단점이 있다.

Client Side Rendering은 첫페이지에서 빈 html을 가져오고 js파일을 해석하여 화면을 구성하기 때문이다.

Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하여 완성된 HTML을 불러오기 때문에 사용자와 검색 엔진 크롤러에게 렌더링 된 페이지를 전달할 수 있게 된다.

리액트 자체에서도 SSR을 지원하기는 하지만 직접 구현하기가 복잡하기 때문에 Next.js를 이용하는 것이 간편하다.

설치

npx create-next-app@latest
# or
yarn create next-app

typescript 템플릿

npx create-next-app@latest --typescript
#or
yarn create next-app --typescript

기본 파일 구조

  • pages
    • 페이지들을 생성
    • index.tsx가 처음 / 페이지가 됨
    • _app.tsx는 공통되는 레이아웃을 작성
  • public
    • 이미지와 같은 정적(static) 에셋 보관
  • styles
    • 모듈 css는 컴포넌트 종속적으로 스타일링하기 위한 것으로, 확장자 앞에 module을 붙여줘야 한다.
  • next.config.js
    • Next.js는 웹팩을 기본 번들러로 사용하며 여기서 웹팩 관련 설정들을 해줄 수 있다.

Pre-rendering 개념

Next.js는 Pre-Rendering을 통해서 HTML을 불러오기 때문에 SPA의 단점을 보완할 수 있게 된다. Next.js의 Pre-rendering이 어떻게 동작하는지 확인해본다.

  • Chrome > Javascript Disable 크롬 개발자도구에서 Javascript를 비활성화한 후 CRA로 생성한 리액트 프로젝트를 실행해보면 You need to enable JavaScript to run this app이라는 문장이 출력된다.

React는 CSR이기 때문에 브라우저에서 Javascript를 비활성화 하니까 렌더링 되지 않는 것

nextjs 프레임워크에서 생성한 프로젝트는 동일한 조건에서 브라우저에서 실행했을 때, 정상적으로 렌더링되는 것을 확인할 수 있다. 여기서 렌더링 된 HTML이 Pre-render가 된 것이다.

Data Fetching

Next.js에서 데이터를 가져오는 방법은 여러 가지가 있는데, 애플리케이션의 사용 용도에 맞게 사용하면 된다.

  1. getStaticProps
    • Static Generation으로 개발자가 build할 때 데이터를 불러온다.
       export async function getStaticProps(context) {
return (
  props: {},
)
 }
    • getStaticProps 함수를 async로 export 하면 getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render 한다. build 타임에 페이지를 렌더링
    • 언제 사용할까?
      • 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청보다 먼저 build 시간에 필요한 데이터를 가져올 때
      • 데이터는 Headless CMS에서 데이터를 가져올 때
      • 데이터를 공개적으로 캐시할 수 있을 때
      • 페이지는 미리 렌더링되어야 하고 매우 빨라야할 때.

        getStaticProps는 성능을 위해 CDN(Content Delivery Network)에서 캐시할 수 있는 파일 생성

  2. getStaticPaths
    • Static Generation으로 데이터에 기반하여 pre-render시 특정한 동적 라우팅을 구현한다.
    • 동적 라우팅이 필요할 때, getStaticPaths로 경로 리스트를 정의하고 build 타임에 페이지를 렌더링
    • 어떠한 경로가 pre-render 될지를 paths에서 결정
    • pages/posts/[id].js 처럼 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 적용
      return {
  paths: [
    {params : { id : '1'}},
    {params : { id : '2'}}
  ],
  fallback : ...
}
// 빌드하는  동안 /posts/1과 posts/2를 생성
    • fallback ? 리턴되지 않는 것은 fallback 페이지가 표시 : 리턴되지 않는 것은 모두 404페이지 표시
  3. getServerSideProps
    • Server Side Rendering으로 요청이 있을 때 데이터를 불러온다.
    • getServerSideProps 함수를 async로 export하면, Next는 각 요청마다 리턴되는 데이터를 getServerSideProps로 pre-render한다.

© 2021. All rights reserved.