Server Components 활용하는 방법

개요

Next.js 13의 구조에 대한 좋은 글을 읽어서 이 글을 내 생각과 함께 같이 정리해보려고 한다.

 

원문의 제목은 'Component Patterns in Next.js 13'인데,

이 글에서는 Next.js 13에 도입된 Server Component를 어떻게 사용하는 게 좋은 지에 대해 다루고 있다

---

Server Component?

https://bysxx.tistory.com/18

먼저 Server Component에 대한 내용은 위 글에서 확인할 수 있는데,

간단히 요약하면 event handler나 hook과 같은 기능이 없는 컴포넌트를 개발할 때 사용할 수 있는 기능으로 번들 사이즈를 크게 줄일 수 있는데 이렇게 되면 UX에서 매우 중요한 요소인 초기 로딩 속도를 줄일 수 있게 된다.

 

Next.js 13에서 성능을 향상시키는 방법은 매우 간단하다.

최대한 Client Component는 줄이고, Server Component로 프로젝트를 구성하는 것이다.

 

Client Components at the Outermost Leaves

위에서 말한 것처럼 프로젝트를 구성하기 위해서는 Client Component를 최대한 바깥으로 밀어내면 된다.

 

위 사진에 있는 요소 중 searchbar는 input으로 event handler가 들어가야 할 것처럼 보인다.

이 컴포넌트를 최대한 바깥으로 밀어내면 다음과 같이 될 것이다.

 

// SearchBar is a Client Component
import SearchBar from './searchbar';
// Logo remains a Server Component
import Logo from './logo';

export default function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <nav>
        <Logo />
        <SearchBar />
      </nav>
      <main>{children}</main>
    </>
  );
}

이렇게 되면 SearchBar를 제외한 나머지는 모두 Server Component 상태로 SearchBar만 클라이언트 측에서 렌더링 된다.

 

Composing Client and Server Components

Next.js 13을 사용하게 되면 Component Tree에 Client Component와 Server Component는 섞여있을 수 있다.

 

위에서 권장한 대로 Client Component가 맨 바깥으로 밀려져 있으면 상관없지만,

불가피하게 Client Component 아래에 Server Component가 있을 수 있는데,

아마 아래 지식이 없이 작성하게 된다면 오류를 만나게 될 것이다.

 

Next.js 13 Rendering

Next.js 13에서 렌더링을 할 때는 아래와 같은 순서를 따르게 된다.

1. Client Component들을 건너뛰고 Server Components를 먼저 렌더링 한다.

2. 그 이후 Client에서 Client Component들을 렌더링 하고 합친다.

 

위 과정에서 중요한 것은 Client Component 아래에 있는 Server Component가 Client Component를 의존해서는 안된다는 사실이다.

 

만약 의존하게 된다면 Client Component에 의해 Server Component가 리렌더링 되는 경우가 발생할 수 있고, 이 경우가 발생한다면 Server Component에 대한 정보를 다시 Server로 요청해야 한다.

 

그렇기 때문에 단순히 Client Component 아래에 Server Component를 둔다면 Next.js 13에서는 Error를 뱉고 있다.

 

그렇다면 어떻게 코드를 작성해야 할까?

 

바로 children을 통해 Client Component와 Server Component의 decoupling을 보장하는 것이다.

 

'use client';

// this pattern will work
import { useState } from 'react';
export default function ExampleClientComponent({
  children,
}: {
  children: React.ReactNode;
}) {
  // ...
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  );
}

// This pattern works:
// You can pass a Server Component as a child or prop of a Client Component.
import ExampleClientComponent from './example-client-component';
import ExampleServerComponent from './example-server-component';

export default function Page() {
  return (
    <ExampleClientComponent>
      <ExampleServerComponent />
    </ExampleClientComponent>
  );
}

위와 같이 코드를 작성하게 되면 Client Component <-> Server Component 간의 decoupling을 보장할 수 있게 되고 Next.js 13도 더 이상 에러를 뱉지 않을 것이다.

 

기존의 프로젝트를 Next.js 13으로 마이그레이션을 한다면 어쩔 수 없이 Client Component 아래에 Server Component를 두는 경우가 발생하기는 했다.

 

하지만 새로 프론트엔드를 개발할 때 컴포넌트 구조를 잘 설계한다면 이러한 경우가 없을 것이라고 생각한다.

 

출처: Component Patterns in Next.js 13