NextJS - 페이지 사전 렌더링 & 데이터 페칭

React 클라이언트 사이드 렌더링의 단점

- 사용자들이 데이터가 실질적으로 페이지에 로딩되기까지를 기다려야 한다.

    ㆍ백엔드 API를 이용해서 데이터를 페칭하는 실제페이지는 데이터 로딩 몇 초로 인해 지연 발생

    ㆍ사용자 경험의 최적화 X

- 검색 엔진 최적화 단점

    ㆍ검색 엔진이 있는 앱의 경우에는 콘텐츠를 Google이 알야아야한다.

    ㆍ하지만 검색엔진은 서버에서 클라이언트에게 데이터가 다시 전송되면서

        검색엔진은 콘텐츠가 전혀없는 데이터를 본다

 

* 정리 *

1. 표준 React를 사용하면 발생할 수 있는 오류로 데이터를 페칭하는 일이 컴포넌트가 로딩된 후다.

    ㆍ즉, 클라이언트 사이드에서 데이터를 페칭하고 화면에 렌더링된 후에 서버로 요청을 보낼 수 있다.

2. 첫 번째 응답, 즉 첫 번째 HTML 페이지 

    ㆍ사용자가 처음 페이지를 방문했을 때 서버가 클라이언트에게 재전송하는 페이지는 데이터 포함X

1 & 2. 표준 React라면 빈 HTML 파일과 모든 JavaScript 코드가 표시

    ㆍJS코드가 실행되면 스크린에 표시 - 일반 DOM 구조외 필요한 데이터가 서버로부터 로딩될때 시간 소요

 

---

- Next.js는 페이지를 사전에 준비하는데

    ㆍ이때 모든 HTML 콘텐츠를 사전에 구축하고 필요할 모든 데이터를 사전에 로딩하는 방식을 따른다.

    ㆍ사전 렌더링은 오직 최초 로딩할 때만 영향을 미친다.

    ㆍ첫번째 렌더링이 끝나면 다시 표준 싱글 페이지 애플리케이션으로 돌아간다.

- 사전 렌더링되는 건 최초 접속하는 첫 번째 페이지 뿐이다

    ㆍReact가 준비를 마칠 때까지 빈 페이지를 보는 대신에 모든 초기 콘텐츠가 포함된 사전 렌더링된 페이지가 표시

 

- 사전 렌더링의 두 가지 방식

정적 생성 ( Static Generation )	서버 사이드 렌더링( Server-side Rendering )
- 빌드되는 동안 모든 페이지가 사전 생성 - 배포 전에 모든 페이지가 준비	- 배포 후 요청이 서버까지 오는 바로 그때 모든 페이지가 생성

 

1. 정적 생성 ( Static Generation )

: 빌드하는 동안 페이지를 사전 생성

- 사전 생성 : 콘텐츠를 구성하는 모든 HTML코드와 모든 데이터를 사전에 준비시켜 놓는다는 뜻

- 배포되고 나면 구축된 페이지는 서버나 앱을 실행시키는 CDN을 통해서 캐시로 저장

    ㆍ사전 구축된 페이지를 통해서 즉시 입력 요청이 실행

 

getStaticProps

export async function getStaticProps(context){ ... }

- 서버 사이드에서만 실행되는 모든 코드도 실행 가능

- getStaticProps 내에 작성한 코드는 클라이언트에게 재전송되는 코드로 포함 X

    ㆍ해당 함수 내에 포함하는 코드는 클라이언트에서는 볼 수 없다.

 

- Next.js는 동적 데이터가 없는 모든 페이지를 사전 렌더링한다.

- getStaticProps에서만 쓰이는 함수는 임포트를 확인하고 클라이언트 사이드 코드 번들에서는 해당 임포트를 제거

 

getStaticProps 구성 옵션

export const getStaticProps = async (context) => {
    if(!data) {
        return {
            redirect: {
                destination: '/no-data'
            }
        }
    }

    if(data.products.length ==0){
        return {notFound:true};
    }

    return {
        props: {
            products: data.products
        },
        revalidate: 10
    };
}

- props : 해당 페이지 props 데이터

- revalidate : 페이지 재생성 시간(초)

- notFound 

    ㆍtrue : 페이지가 404 오류 페이지를 반환

    ㆍ어떤 이유로든 페칭에 실패 시 사용

- redirect : 사용자를 리디렉션 가능

    ㆍ다시 말해 페이지 콘텐츠나 컴포넌트 콘텐츠를 렌더링하지 않고, 다른 라우터로 리디렉션

    ㆍ역시 데이터 페칭에 실패 시 사용

 

 

* fs

- fs.readFile : 계속할려면 콜백 필요

- fs.readFileSync : 파일을 동기적으로 읽고 완료될 때까지 실행을 차단

 

증분 정적 생성 ( ISR - Incremental Static Generation )

- 페이지를 빌드할 때 정적으로 한 번만 생성하는 것이 아니라 배포 후에도 재배포 없이 계속 업데이트 된다는 뜻

- 페이지를 사전 생성하지만 최대 X초마다 들어오는 모든 요청에 대해 주어진 페이지 재생성

- 오래되지 않으면 이전 페이지를 제공하고, 시간이 지나면 서버에서 재생성된 가장 최신의 페이지를 제공

export const getStaticProps = async () => {

    return {
        props: {
            products: data.products
        },
        revalidate: 10
    };
}

- 개발 서버에서는 항상 최신 데이터가 포함된 최신 페이지가 표시되고, 페이지가 다시 실행되겠지만

   프로덕션에서는 이 값으로 재생성된다.

- 증분 정적 생성은 유효성 재검사가 필요할 때 유입되는 요청을 위해 호출하기도 하지만 일반적으로는 프로젝트를 구축할 때 호출한다.

 

getStaticPaths

- NextJS는 모든 페이지를 사전 생성하지만 동적페이지는 그렇지 않다.

- 동적 페이지에서 어떤 인스턴스가 사전 생성돼야 하는지 알려줄 수 있다.

export const getStaticPaths = async () => {
    return {
        paths: [
            { params : { pid: 'p1'}},
            { params : { pid: 'p2'}},
            { params : { pid: 'p3'}},
        ],
        fallback : false,
    };
}

- fallback : true

    ㆍpaths에 포함되지 않은 페이지라도 허용

    ㆍ다만 사전에 생성되는 건 아니고 요청이 서버에 도달하는 순간 시점에 생성

- 방문율이 높은 페이지는 paths로 사전 생성 / 방문이 적은 페이지를 서버에 생성

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

- fallback : true 기능을 쓸려면 컴포넌트에서 폴백 상태를 반환할 수 있게 해야한다.

  ( 사전생성이 아니기에 useEffect 처럼  처음엔 데이터가 없음 )

- fallback: 'blocking'

    ㆍ컴포넌트에서 폴백 확인을 할 필요가 없다.

    ㆍ서버에 완전히 사전 생성되도록 NextJS가 기다린다.

    ㆍ페이지 방문자가 응답받는 시간이 길어짐

 

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

- 유입되는 모든 요청에 대한 페이지를 사전 렌더링한다.

- 페이지 요청이 서버에 도달할 때마다 실행되는 함수

 

getServerSideProps

- 해당 페이지에 대한 요청이 들어올 때마다 실행한다.

- 그러므로 getStaticProps나 getServerSideProps 함수 중 하나만 사용해야한다. 충돌때문에

- getStaticProps와의 차이점

    ㆍ콘텍스트 객체에 접근할 수 있는 데이터 종류가 다르다. ( res, req )

    ㆍ함수가 실행되는 시점, 타이밍이 다르다.

- 서버측에서만 사전 렌더링되고 페이지는 사전 생성되지 않는다.

---

NextJS 개발하다보면 사전렌더링이 필요없거나 할 수 없을 때

1. 갱신주기가 잦은 데이터

    ㆍ주식 데이터

2. 특정유저에게만 한정된 데이터

    ㆍ온라인 쇼핑몰의 최근 주문내역 / 프로필 페이지

3. 데이터의 일부분만 표시하는 경우

    ㆍ많은 양의 데이터를 불러올때 요청처리시간이 김

 

Client-side Data Fetching

- 데이터 프리페칭과 페이지 사전 생성 방식이 제대로 기능하지 못하거나 필요하지 않을 수도 있으며,

따라서 그 경우에는 사전 생성이나 프리페칭 대신에 useEffect나 fetch 같은 함수를 이용해서

클라이언트 측 React 앱 내의 API에서 데이터를 가져오는 것이 좋다.

 

 

 

* useSWR 훅 사용하기

- HTTP 요청을 보낼 때 fetch API를 사용한다

- 데이터 캐싱과 최신 데이터를 제공하기 위한 데이터 유효성 재검사 등의 내장기능 존재

const fetcher = (url) => fetch(url).then((res) => res.json());
const {data, error} = useSWR('URL',fetcher);

 

사전 페칭을 클라이언트 사이드 페칭과 결합하기

- getStaticProps로 초기 데이터 설정

- useSWR로 최신 데이터 확보