4장 서버 사이드 렌더링 (2)

4.3 Next.js 살펴보기

Next.js란?

vercel 에서 만든 풀스택 어플리케이션을 구축하기 위한 리액트 기반 프레임 워크.

구조 한눈에 보기

• package.json

• next.config.js

  • Next 프로젝트의 환경 설정을 담당.

• page 폴더

• pages/_app.tsx

  • 애플리케이션의 전체 페이지의 시작점.

  • 에러 바운더리 사용

  • reset.css 같은 전역 css선언

  • 공통으로 사용 또는 제공해야 하는 데이터 제공

• pages/_document.tsx

  • HTML 설정과 관련된 코드를 추가하는 곳이며 반드시 서버에서만 렌더링된다.

• pages/_error.tsx

  • 클라이언트 또는 서버에서 발생하는 500 에러를 처리할 목적으로 만들어졌다.

• pages/404.tsx

  • 404페이지를 정의할 수 있는 파일이다.

• pages/500.tsx

  • 서버에서 발생하는 에러를 핸들링하는 페이지다.
    error와 500이 모두 있다면 500이 우선적으로 실행된다.

  • 에러 핸들링

• pages/index.tsx

  • 개발자가 자유롭게 명칭을 지정해 만들 수 있는 페이지.

  • 이 파일명이 라우팅 주소로 이어진다.

  • 동적 라우팅

• api/hello.ts

  • /api/hello 와 같은 api 주소로 요청을 보낼 수 있다.

  • cors 에러를 피하기 위해 사용될 수 있다.

  • BFF형태로 사용될 수 있다.

Data Fetching

Static Generation

• getStaticProps

  • 해당 함수가 작성되어있는 파일은 사전 렌더링 파일로 인식하고 사전 렌더링 해준다.

  • 함수 내의 코드는 서버에서 실행된 것이므로 브라우저에서 확인할 수 없다. 또한 서버에서만 사용될 수 있는 fs, path 등을 사용할 수 있다.

  • 아래와 같이 작성해주며 해당 파일은 props를 받아올 수 있다. ex) props.products

    export async function getStaticProps() {
      const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
      const jsonData = await fs.readFile(filePath);
      const data = JSON.parse(jsonData);
    
      return {
        props: {
          products: data.products,
        },
      };
    }

  • ISR(증분 정적 생성)

    • revalidate를 통해 시간을 설정하여 페이지를 재배포 없이 재 생성 해줄 수 있다.

      return {
          props: {
            products: data.products,
          },
          revalidate : 10 // 10초마다 재생성
        };

  • notFound

    • 404페이지를 렌더링해준다.

      return {
        notFound: true,
      };

  • redirect

    • 데이터를 못 받아온 경우 리디렉션을 통해 다른페이지로 이동시켜줌.

      return {
          redirect : {
            destination: '/no-data'
          }
        };

• getStaticPaths()

  • 동적 페이지의 경우 NextJS는 페이지를 정적생성하지 않음 ( 정적 페이지를 전부 재생성하는데 동적은 불가능 ) 따라서 getStaticPaths() 함수를 함께 사용하여 해결.

    export async function getStaticPaths() {
      return {
        paths: [
          { params: { pid: "p1" } },
          { params: { pid: "p2" } },
          { params: { pid: "p3" } },
        ],
        fallback: false,
      };
    }

  • paths

    • param을 통해 [pid] 값이 p1,p2,p3인 동적 페이지를 사전 렌더링 한다.

  • fallback

    • false 일 때 사전 렌더링 되지 않은 페이지에 접근 시 에러를 반환한다.

    • true 일 때는 일부 페이지만 사전 렌더링을 하고 나머지 동적 페이지에 대해 서버에서 데이터를 가져온다.
      동적으로 생성하는 데이터에 대해서는 loading 처리를 통해 에러가 나지 않게 처리해줄 수 있다.

      if (!loadedProduct) {
        return <p>loading...</p>;
      }

    • ‘blocking’은 컴포넌트 로딩 처리를 해주지 않아도 에러가 나지 않는다.

Serverside Rendering

• getServerSideProps()

  • 요청마다 새로운 데이터를 가져온다.

  • 서버 쪽에서 코드가 실행되기 때문에 동적 경로를 미리 설정해줄 필요가 없다.

  • 매 페이지 진입 전에 함수가 실행된다.

    export async function getServerSideProps(context) {
      const { params, req, res } = context;
    
      return {
        props: {
          userId: params.uid,
        },
      };
    }

ETC

• getInitialProps()

  • 클라이언트와 서버 모두에서 실행 가능한 메서드

  • 위의 이유로 코드의 작성에 각별한 주의가 필요하며 가급적이면 getStaticProps, getServerProps를 사용하는 것이 좋다.

스타일 적용하기

• 전역 스타일

  • _app.tsx에 필요한 스타일 import

• 컴포넌트 레벨 css

  • [component_name].module.css 명명 규칙 준수

  • 마치 styled-component와 같이 classname을 Next에서 최적화 해준다.

• SCSS, SASS

• CSS in JS

next.config.js 살펴보기

Next.js 실행에 필요한 설정을 추가할 수 있는 파일.

• basePath : 접근 가능 주소 + 기본 주소를 추가한다

  • ex) basePath : ‘docs’ => localhost:3000/docs 에서 서비스 실행

• swcMinify : swc를 사용해 코드를 압축할지 나타냄.

  • 별도의 설정이 없다면 next 13 부터는 swc를 활용해 코드를 압축

• poweredByHeader : 응답 에서의 X-power-by 를 false로 변경 가능

  • 보안 관련 솔루션에서 powered-by 헤더를 취약점으로 분류한다. 따라서 false로 설정하는 것이 좋다.

• redirects : 특정 주소를 다른 주소로 보내고 싶을 때 사용된다.

• reactStrictMode : 리액트 엄격모드 사용여부를 나타낸다.