react ( Udemy강의 ) - 11. NextJS

NextJS

     - React를 기반으로 하는 풀스택 프레임 워크

     - 대규모의 양산형 React 앱을 더 편리하게 구축

 

주요기능

1. 서버 사이드 렌더링( : 페이지 콘텐츠를 클라이언트가 아니라 전적으로 서버에서 준비 )을 내장

     ex) 만약 클라이언트 사이트 렌더링의 경우 : 서버에서 데이터를 받아와서 처음에는 로딩상태이다.

     - 서버에서 해당 페이지를 사전 렌더링한 상태에서 서버에 요청이 들어 왔을 때 해당 데이터를 서버에서

       가져오면 완성된페이지가 사용자와 검색 엔진 크롤러에 제공 -> React 컴포넌트를 사전 렌더링 가능

     - 자동으로 페이지를 사전 렌더링

     - 클라이언트와 서버 사이드 코드를 혼합

 

2. 파일 기반 라우팅

     - 라우팅 : 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것

     - 파일과 폴더를 이용해서 페이지와 라우트를 정의

 

3. 풀스택 프레임 워크

     - React 프로젝트에 백엔드 코드를 쉽게 추가가능

---

리엑트 router와 next의 Link 차이점

import { Link } from "react-router-dom";
<Link to='/'></Link>

// --------------------------------------------
import Link from 'next/link';
<Link href='/'></Link>

---

_app.js

- 모든 페이지에 적용할 컴포넌트나 설정이 있다면 이 _app.js파일을 활용해서 추가

import '../styles/globals.css'

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

export default MyApp

- Component : 렌더링 될 실제 페이지 콘텐츠를 저장하고 있는 프로퍼티, 페이지 전환할 때마다 변경

- pageProps : 페이지가 받는 특수 프로퍼티

- <Component {...pageProps} /> : 실제 페이지 콘텐츠, 우리가 페이지 A에서 B로 이동할 때마다 변경

---

NextJS의 사전 렌더링 작동방식 및 문제

- useEffect는 컴포넌트 함수가 실행되고 난 후에 실행되는 방식으로 작동

   : 두 번의 렌더링 사이클 때문에 검색 엔진 최적화에 문제가 발생

- 문제점 : NextJS의 사전 렌더링은 첫번째 사이클의 결과를 가져와서 HTML코드 반환

 

페이지 사전 렌더링을 제어하는 방법

1. 정적 생성 getStaticProps( )

     - 사전 렌더링되는 시점 : 애플리케이션을 빌드하거나 Next프로젝트(프로덕션)를 빌드하는 시점

export const getStaticProps = async () => {
  return {
    props: { meetups: DUMMY_MEETUPS },
    revalidate:1
  };
};

- 페이지 컴포넌트에서만 적용가능

- next가 이 함수를 발견하면 사전 렌더링 프로세스 중에 실행, 페이지 컴포넌트보다 먼저 실행

- promise반환 가능, next는 이 promise가 해결될 때까지 대기

- 클라이언트 측에서 절대 실행X, 빌드프로세스 중에 실행

- return할 때 props객체는 해당 페이지 컴포넌트 props로 들어간다

 

- 단점 : 데이터의 최신정보를 알 수 없다.

     -> revalidate프로퍼티 ( 점진적 정적 생성 ) : 요청이 들어올 때 이 페이지를 다시 생성할때까지의 대기시간

- 캐시하고 다시 사용하기에 빠르다?

 

2. 서버 사이드 렌더링 getServerSideProps( )

export const getServerSideProps = async (context) => {
    //context로 요청객체 접속 가능
  const req = context.req;
  const res = context.res;

  return {
    props: {
      meetups: DUMMY_MEETUPS,
    },
  };
};

- 빌드 프로세스 중에는 실행 X

- 요청이 들어올 때마다 실행

- 단점 : 요청이 들어올때 까지 페이지가 만들어지기 기다려야 한다는 뜻

- 매초 여러 번 바뀌는 데이터를 가지고 있다면 revalidate는 도움이 안될 것이다

---

getStaticPaths( )

( 상세정보 페이지와 같이 각각의 정보를 보여줄 때 )

- 넥스트 JS가 동적 페이지의 모든 버전(ID에 따른)의 프리 제너레이트가 필요

export const getStaticPaths = async () => {
  // 모든 동적 세그먼트 벨류가 있는 객체를 리턴
  return {
      fallback: false,
    // 동적 페이지 버전당 객체가 하나
    paths: [
      {
        params: {
          meetupId: "m1",
        },
      },
      {
        params: {
          meetupId: "m2",
        },
      },
    ],
  };
};

fallback : 넥스트 JS에게 paths 배열이 모든 지원되는 매개변수를 저장할지 일부만 저장할지 말해줌

            - false : paths에게 모든 지원되는 ID벨류를 포함할 것

            - true or 'blocking' : 넥스트 JS가 페이지를 만들것, 요청 시 페이지를 생성한 후에

                                         캐시에 저장하여 필요할 때 이것을 미리 생성

                                       true : 빈페이지가 즉시 반환, 동적으로 생성된 콘텐츠를 풀다운

                                       blocking : 페이지가 미리 생성될 때까지 아무도 볼수없고 완성된 페이지 제공

---

API 라우트

     - HTTP 요청을 받고 패치를 포스트하고 요청을 삭제

     - pages파일 안에 만들 것