Next App router에서 use client가 CSR을 뜻하지는 않는다.

Next App router에서 use client가 CSR을 뜻하지는 않는다.

next app router를 이용해서 블로그를 만들고 있는데, javscript를 꺼도 클라이언트 컴포넌트가 렌더링되었다.

"use client";
import { gql } from "@apollo/client";
import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
import React from "react";
const PAGE_CONTENT_QUERY = gql`
  query Article($ItemId: ItemId!) {
    aritlcle(filter: { id: { eq: $ItemId } }) {
      id
      markdown(markdown: true)
    }
  }
`;

const Hi = () => {
  const { data } = useSuspenseQuery<any>(PAGE_CONTENT_QUERY, {
    variables: { ItemId: "198173441" },
  });
  console.log("하이");
  return <div>{"data.aritlcle.markdown"}</div>;
};

export default Hi;

/about/hi

분명히 서버컴포넌트로 렌더링되는건 아닌데,, use client를 사용하면 CSR로 된다는 뜻이 아닌가? 하고 공식문서를 보았다.

공식문서에서 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 잘 작성되어 있다.

 

클라이언트 컴포넌트가 렌더링되는 방식

 클라이언트 컴포넌트는 요청에 전체 페이지 로드인지, 후속탐색(subsequent navigation)인지에 따라 다르다.

전체 페이지 로드

Next에서 정적 HTML을 렌더링한다. 즉, 클라이언트가 JS번들을 로드하는 것을 기다릴 필요 없이 즉시 페이지의 컨텐츠를 볼 수 있다.

 

1. RCC도 일단 Next서버에서 서버 구성요소를 RSC Payload 라는 특수한 데이터 형식으로 렌더링한다. 그 후 JS 지침에 따른 HTML을 렌더링한다.

2. 그 다음 DOM을 업데이트 하고, Javascript에 따라 hydration이 일어난다.

후속 탐색(Subsequent Navigation)

후속탐색시 SSR되는것 없이 클라이언트에서 완전히 렌더링된다. 이는 기존 리액트처럼 JS번들이 다운로드 된 후에 DOM이 업데이트 됨을 의미한다.