next 동작원리 읽기

next 13에서의 렌더링 방식에 대해서 다뤄볼 생각이다.(with ellie 강의)

 기존에 next12 버전까지는 렌더링 방식이 페이지 단위로 지정이 되었지만, next13 버전에서부터는 컴포넌트 단위로 렌더링이 진행됨에 따라 하나하나의 컴포넌트에 맞춰 렌더링 방식을 결정하고 개발을 해야하는데, 컴포넌트 단위로 렌더링 방식을 결정한다면 과연 SSR 페이지 안에 CSR로 작성된 컴포넌트는 어떻게 동작할까?

 아래 코드는 간단한 카운터 예제인데 useState, useEffect, 마우스 이벤트를 포함한 인터렉션 들이 발생하면 해당 컴포넌트는 아래와 같이 'use client'를 명시하여 next가 CSR로 동작하도록 알려줘야 한다. 이러한 동작들은 브라우저가 하는 일이기 때문에 서버 사이드에서 조작할 수 없기 때문이다. 그럼 아래 컴포넌트가 어떤식으로 호출되어서 사용되어지는지 알아보자.

"use client";
import React from "react";

const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default Counter;

 위의 코드에서 볼 수 있듯이 'use client'를 통해 CSR로 구현하였음에도 아래사진을 보면 네트워크 창에서 넘어오는 html을 보면 해당 컴포넌트가 반영되어 있는 것을 알 수 있음. 어떤 일이 일어나고 있길래 CSR임에도 불구하고 이렇게 동작하는지 알아보자.

 왼쪽 사진을 보면 localhost가 받아와지고 아래에 스크립트들이 하나하나 다운로드 되는 것을 볼 수 있는데, 바로 hydration가 발생하고 있는 것을 알 수 있다. 즉, 첫 html은 스크립트를 포함하지 않고 정적인 html만을 보냈기 때문에 인터렉션이 발생하지 않지만 아래의 스크립트들이 다운로드 됨으로 인해서 해당 컴포넌트가 정상적으로 인터렉션이 동작하게 되는 방식이다.