Next.js 사전렌더링

 

react 렌더링 방식 : CSR ( Client Side Rendering )

 1) 접속요청

 2) index.html 빈껍데기를 브라우저에 전달한다.

 3) 빈화면을 유저에게 먼저 렌더링

 4) 후속으로 서버에서 JavaScript 번들을 전달한다.

 5) 브라우저에서 JavaScript 를 실행 한 후

 6) 컨텐츠를 렌더링 한다 

 ---------------------------------- 여기까지 걸리는 시간을 FCP : First Content for Paint 라고 한다. 

 7) 초기접속 이후 페이지 이동 시

 8) 브라우저에서 JavaScript 를 실행 해서  ( 4번에서 서버에서 JS 번들을 모두 전달 받았다 )

 9) 컨텐츠를 렌더링 한다.

 장점

 1. 페이지 이동이 매우 빠르고 쾌적하다

 단점

  1. 초기 접속 속도(FCP)가 느리다.

    - FCP 의 속도가 느려질 수록 급속도로 이탈률이 늘어난다.

 

 

Next.js 렌더링 방식 : 사전 렌더링

  - React 의 렌더링 방식인 CSR 의 단점을 해결

 

 1) 접속요청

 2) 서버에서 자바스크립트 코드를 실행 하여 HTML 생성

 3) 생성된 HTML 을 브라우저에 전달

 4) 브라우저에서는 HTML 파일로 화면 렌더링

------------------------------------- FCP ------------------------------

     ( 웹과 상호작용은 불가능 : 버튼 클릭이나 페이지 이동은 불가능 )

 5) 이후 서버로부터 접속한 페이지의 JS 를 전달받는다.

 6) 브라우저에서는 JS 를 실행 하여 

 7) 렌더링되어 있는 HTML 요소들과 연결

 ---------------------------------- 여기까지 걸리는 시간을 TTI : Time To Interative 라고 한다. 

 8) 초기 접속된 페이지의 Link 태그로 연결된 컴포넌트를 Pre-fetching 하여 미리 받아온다.

 9) 이후 페이지 이동 시 ( 아래는  React 와 동일하다. )

 10) 브라우저에서 JavaScript 를 실행 해서  

 11) 컨텐츠를 렌더링 한다.

 빠른 FCP               +          빠른 페이지 이동

(React 단점해소)               (React 장점 승계)

 

 

Pre-fetching 이란

 사전에 페이지를 미리 불러온다. 

 현재 렌더링된 페이지에 나와 있는 Link 컴포넌트에 연결된 페이지를 미리 다운로드 해서 클릭 시 바로 렌더릴 되게 하는 방식이다.

 Link 컴포넌트에 연결된 페이지는 기본적으로 prefetch 가 되어 있으나 버튼으로 프로그래매틱하게 페이지를 불러오는 것을 prefetch 

 가 안되어 있다.

 

그래서 아래와 같이 컴포넌트가 렌더링 될때 1번만 불러와지게 설정하면 prefetch 가 된다.

useEffect(() => {
    router.prefetch("/test");
  });

 

반대로 Link 컴포넌트를 prefetch 하지 않으려면 prefetch 속성을 작성하여 false 로 한다.

<Link href='/'>메인</Link>
<Link href='/test' prefetch={false}>테스트</Link>