Next js 사전 렌더링

Static Pre Rendering

react는 CSR(Client Side Rendering)으로 렌더링을 하게 되는데 이는

클라이언트측에서 javascript를 통해서 동적으로 렌더링을 하게되는 방식을 말합니다.

 

반면 Next는 SSR(Server Side Rendering)을 지원해주는데

서버사이드 렌더링이라고 서버측에서 HTML파일을 미리 만들어서 보내주는 방식입니다.

 

Next js의 강점은 이 SSR과 같은 사전 렌더링 방식이라고 합니다.

 

React Rendering vs Next Rendering

react의 소스코드를 살펴보면

html 파일을 받아오고 

<div id="root"></div>안에 리엑트 자바스크립트 파일을 받아온 후에 렌더링을 해줍니다.

그 시간동안 브라우저의 화면은 하얀색 화면으로 깜빡할 때가 있게 됩니다.

 

반면 next js 는 pages의 index.js에 다음과 같이 작성을 하면

import { useState } from "react";

export default function Home(){
    const [counter, setCounter] = useState(0);
    return (
        <div>
            <p>{counter}</p>
            <button onClick={()=>setCounter(++counter)}>+</button>
        </div>
    );
}

빨간색으로 동그라미 쳐놓은곳 처럼 미리 html파일을 만들어서 화면에 뿌려줍니다.

이때 state 초기값으로 선언한 값에 맞춰서 받아오는것을 확인할 수 있습니다.

위와같은 강점으로 사용자가 javascript파일을 받아오기 전에 화면이 흰색으로 표시가 되는 그 잠깐 찰나의 순간 없이

만들어진 html파일을 받아옴으로 흰화면을 받아오는 시간을 줄일 수 있게됩니다.

 

이것을 프론트엔드 용어로 hydration이라고 부른다고 합니다.