NextJS - 시작( 장점 및 동작 )

1. 내장 서버 측 렌더링 (SEO 향상)

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

- 데이트를 서버에서 가져오면 완성된 페이지가 사용자와 검색 엔진 크롤러에 제공

- 기본 싱글 페이지 애플리케이션을 실행

 

2. 파일 기반 라우팅으로 라우팅 간소화

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

    ㆍ기본적으로 URL을 감시하다가 URL이 바뀌면 백엔드 서버에 요청을 보내는 브라우저의 기본 동작을 막고

        다른 콘텐츠를 렌더링

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

 

3. 풀스택 앱 빌드

- NextJS는 풀스택 프레임워크

- 그러므로 독립적으로 REST API 프로젝트를 구축하지 않아도 된다.

 

4. 사전 렌더링 작동 방식 & vs React 

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

    ㆍ두번의 렌더링 사이클 발생

    ㆍ첫번째 렌더링 사이클 : 컴포넌트가 처음으로 렌더링, 비어있는 배열

    ㆍ두번의 렌더링 사이클로 인해 검색 엔진 최적화에 문제 발생

- NextJS는 두번째 렌더링 사이클을 기다리지 않는다.

    ㆍ언제나 첫 번째 렌더링 사이클의 결과를 가져와서 사전 렌더링한 HTML 코드 반환

    ㆍ그렇기에 데이터가 없을 것이다( 빈페이지 )

 

- 데이터가 포함되도록 데이터가 있는 페이지를 사전 렌더링하려면 내장된 사전 렌더링 프로세스를 미세 조정

- NextJS 페이지 렌더링 방법을 제어하는 데 사용할 수 있는 2가지 형태의 사전 렌더링

정적 생성	서버 사이드 렌더링
- 애플리케이션 빌드 시점이나 Next 프로젝트를 빌드하는 시점 - 기본적으로 요청이 서버에 도달했을 때 서버에서 즉각적으로 페이지를 사전 렌더링 X - 페이지 컴포넌트에 데이터를 가져와서 추가해야 한다면 페이지 컴포넌트 파일 안에서 `getStaticProps()` 사용	- 빌드 프로세스 중에는 실행 X - 요청이 들어올 때 동적으로 페이지 변경 - getServerSideProps() 사용

- getStaticProps() : 사전 렌더링 프로세스 중에 실행

    ㆍ컴포넌트 호출전에 호출

    ㆍ해당 페이지에서 사용할 props 준비

    ㆍ비동기적으로 설정 가능(async), promise 사용 가능(NextJS는 이 promise가 해결될때까지 기다림)

    ㆍ컴포넌트 함수가 실행되기 전에 데이터를 읽을 수 있어 사전 렌더링 가능

    ㆍ일반적으로 서버에서만 돌아가는 어떤 코드든지 전부 실행 가능

              ( 파일 시스템 접근, 데이터베이스 연결, API )

    ㆍ클라이언트 측에서 절대 실행 X

    ㆍ항상 객체 반환 - props 프로퍼티 설정으로 반환하는 페이지 컴포넌트 함수의 props가 될 것이다.

    ㆍ상태 관리 필요X, useEffect 필요X

    ㆍrevalidate 프로퍼티 : 점진적 정적 생성 기능,

            ㆍ요청 시 페이지가 다시 생성할 때까지의 시간(초)

            ㆍNextJS가 대기하는 시간

            ㆍrevalidate:10 → 페이지 요청 시 적어도 10초마다 서버에서 페이지를 다시 생성

 

- getServerSideProps() 

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

    ㆍ일반적으로 서버에서만 돌아가는 어떤 코드든지 전부 실행 가능

              ( 파일 시스템 접근, 데이터베이스 연결, API )

    ㆍ항상 객체 반환 - props 프로퍼티 설정으로 반환하는 페이지 컴포넌트 함수의 props가 될 것이다.

    ㆍcontext 매개변수 : 요청 객체에 접속

              ( 인증작업, 세션쿠키 확인 )

            ㆍcontext.req

            ㆍcontext.res

            ㆍcontext.params : 쿼리스트링 value

 

- 요청 객체에 접속할 필요가 없다면(ex. 인증), getStaticProps가 더 괜찮다.

    ㆍ캐시하고 다시 사용하니깐 getStaticProps일 때 더 빠르다. 

 

- getStaticPaths()

    ㆍ동적 페이지 컴포넌트 파일에서 사용

    ㆍ비동기적으로 설정 가능(async)

    ㆍ사용자가 URL의 특정 밸류로 페이지를 방문했을 때 사전렌더링되는 게 아니라,

        빌드 프로세스 단계에서 사전렌더링이 된다.

        따라서 모든 URL에서 사전 렌더링 해야 한다.

    ㆍ모든 동적 세그먼트 벨류가 있는 객체 리턴

    ㆍ`fallback: false , paths : [ { params : { ex:'ex1' } }, { params : { ex:'ex2' } } ]`

    ㆍfallback : paths 배열이 모두 저장할지 일부만 저장할지 알려줌.

            ㆍfalse : 모든 지원되는 value 포함

                          사용자가 지원되지 않는 걸 입력하면 404 에러

            ㆍtrue : 들어오는 요청에 관해서, 서버에서 동적으로 만듬,

                        빈페이지 즉시 반환, 동적으로 생성된 콘텐츠를 풀다운-데이터가 아직 없는 경우 처리

            ㆍblocking : 페이지가 미리 생성될 때까지 사용자는 아무것도 볼 수 없고, 완성된 페이지가 제공

 

- 페이지 구성 요소 파일에서 항목을 import 하면 getServerSide 나 getStaticProps에서만 사용되는 경우 import된 패키지는 클라이언트 측 번들에 포함 X

5. API 라우트

- 리액트 컴포넌틀를 정의하고, 렌더링하거나 리턴하지 않는다.

const handler(req, res) {
    req.method;		// 요청 메서드
    req.body;		// 요청 바디(데이터)
    
    res.status(201).json({});	// 응답
}

export default handler;