두유노 RSC? - React Server Component 알아보기

이번에 노마드코더 강의를 들으며 server component를 사용해 보았다

사용해보면서 신세계를 경험해서 블로그를 작성해보려고 한다

 

React Server Component

기본적인 개념부터 알아보자

RSC는 서버에서 구동되는 컴포넌트로 서버에서 렌더링 된 후에 클라이언트로 전달된다

 

특징

• 리렌더링 X
• 브라우저 api나 react 훅 사용 X
• 서버 리소스 접근 가능
• 자바스크립트 번들에 포함되지 않는다
• event 핸들링 X

 

사용하기

현재 vanilla react 만으로는 RSC를 사용하기 쉽지 않다

편하게 사용하기 위해서는 next 13버전 이상의 app router 환경에서 사용가능하다

 

next에서 사용하면 기본적으로 모든 컴포넌트가 RSC이고

혹시 client component를 사용하려고 한다면 "use client"라고 명시해줘야한다

여기서 말하는 client component는 vanilla react의 component와 같은 것이다

 

data fetch

여태까지 client component에서 data를 fetch하려고하면 아래와 같은 코드로 fetch하게 된다

'use client';

import { useEffect, useState } from 'react';

export default function page() {
  const [data, setData] = useState();

  const fetchData = async () => {
    const response = await fetch('URL');
    const json = await response.json();

    setData(json);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return <div>{data}</div>;
}

 

위와 같이 client component에서 useState와 useEffect를 사용해 데이터를 fetch한다면 불필요한 리렌더링 문제가 있다

이러한 문제를 RSC를 사용하여 해결할 수 있다

const fetchData = async () => {
  const response = await fetch('URL');
  const json = await response.json();

  return json;
};


export default async function page() {
  const data = await fetchData();

  return <div>{data}</div>;
}

 

이렇게 RSC를 사용해서 client component와 똑같이 data를 fetch하는 코드를 작성했다

RSC를 사용한다면 서버에서 fetch하고 fetch된 데이터를 html과 같이 렌더링된 이후에 브라우저에 보내준다

 

그리고 보안상의 장점도 있다

client component에서 fetch를 할때는 network 탭에 기록이 남아 api key나 서버 주소가 보여질 수 있다

하지만 RSC는 서버에서 fetch를 하기 때문에 브라우저 network 탭에 기록이 남지 않는다

 

HttpOnlyCookie

httpOnlyCookie는 스크립트 공격으로 부터 보호하기 위해서 client에서는 접근이 불가능하다 하지만 RSC에서는 httpOnlyCookie에 접근이 가능하다

 

import { cookies } from 'next/headers';

const accessToken = cookies().get('accessToken')?.value;

 

이런식으로 접근 가능하다

 

마무리

사실 아직 RSC에 대해 아는게 많이 없다고 생각한다 RSC에 새로운 것들을 배울 때마다 여기에 추가해보도록 하겠다