[12주차] Next.js : Static Pre Rendering, Client-side Render, Server-side Render, Hydration

Next.js의 가장 좋은 기능 중 하나는 앱에 있는 페이지들이 미리 렌더링 된다는 것이다. 정적(static)으로 생성되는 것.

 

Client-side Render

브라우저가 유저가 보는 UI를 만드는 모든 작업을 하는 것

 

유저가 보는 UI는 react.js 로 렌더링 됨

유저가 보는 UI는 HTML 소스코드 안에 들어 있지 않음

// html
.
.
<div id="root"></div>

 

브라우저가 react.js를 다운받고 개발자의 코드를 다운 받았을 때서야 react.js 는 ui 의 모든 것들을 렌더링하고 유저는 react.js가 그린(렌더링한) ui를 보게된다.

 

브라우저가 html을 읽고 -> 자바스크립트를 가져와서(실행시켜서) -> client-side의 자바스크립트가(즉 react.js가) 모든 UI를 만드는 것

 

따라서 느린 3g 의 네트워크 속도로 client-side render 를 하는 브라우저를 새로고침하게 되면

흰 빈 배경(브라우저가 html을 읽고 : 당연히 빈 html 이니 빈 화면일수밖에 없음)

-> 

흰 빈 배경 (브라우저는 자바스크립트 코드를 요청)

->

흰 빈 배경에서 서서히 랜더링이 시작되며 화면이 채워짐. loading도 볼 수 있음 (client-side의 자바스크립트가(즉 react.js가) 모든 UI를 만들기시작 그리고 브라우저가 react.js를 가져오는 중)

->

전체 화면이 랜더링 완료 (브라우저가 자바스크립트, react.js 코드를 잘 가져옴)

 

Server-side Render

자바스크립트를 완전히 비활성화가 되어도, 혹은 느린 3g 네트워크 속도로 유저가 페이지에 접근해도 적어도 html은 바로 빠르게 볼 수 있다. (소스코드 html에 우리가 pages 안 컴포넌트에 추가한 내용이 들어 있다.) 단, API로부터 가져오는 데이터가 로딩되는 데에는 오랜 시간이 걸릴 수도 있음.

 

즉, next.js에 의해 페이지는 pre-render이 되는 것이다.

 

 

Hydration

간단한 counter 앱을 만들어본다.

import react, { useState } from "react";

export default function Home() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1>I am using jsx! {counter}</h1>
      <button onClick={() => setCounter((prev) => prev + 1)}>+</button>
    </div>
  );
}

 

브라우저 새로고침을 하면 아주 빠르게 아래 화면처럼 랜더링 되어 나온다.

 

여기서 중요한 점은, 맨 처음 나온 것은 html 이 랜더링된것이고 그 사이에 react.js가 클라이언트로 전송됐을 때 비로소 유저가 보고 있는 화면이 react.js 앱이 되는 것! 이렇게 react.js를 프론트엔드 안에서 실행하는 것을 hydration이라고 한다.

 

원리가 궁금해?

기존 next.js의 동작 원리는 react.js를 백엔드에서 동작시켜서 로드할 페이지를 미리 만드는데 이 결과로 컴포넌트들을 render하게 된다. 렌더링이 끝났을 때 그것이 비로소 html이 되고 next.js는 그 html을 페이지의 소스코드에 넣어준다. 그러면 유저는 자바스크립트와 react.js가 로딩되지 않았더라도 콘텐츠를 볼수 있게 된다. 그리고 react.js가 로딩되었을 때, 기본적으로 이미 존재하는 것들과 연결이 되어서 일반적인 react.js 앱이 되는 것이다.

 

이게 왜 좋은가?

유저가 웹사이트에 가면 초기상태의 component로 된 미리 생성된 html 페이지를 보게 되고 그리고 상호작용이 일어나게되면(activity가 occur) react.js는 그걸 받아서 작동하게 되는 것이다.

 

그렇기 때문에, 자바스크립트를 비활성화하고 페이지를 새로고침을 하게 되면 ui 는 나오지만 동작(activity 또는 이벤트)이 걸려 있는 버튼 등은 동작하지 않는다!

 

 

검색엔진최적화 SEO에도 좋다

왜? html에 필요 문구들이 다 들어가 있기 때문.