서버컴포넌트에서의 브라우저 전용 객체의 사용 제한

넥스트.js에서 서버 사이드 렌더링(SSR) 페이지나 정적으로 생성된 페이지는 Node.js 환경에서 실행된다.
이로 인해 fetch(노드js 18버전 이전만), window, document와 같은 웹 브라우저 전용 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다.

그러나 서버 컴포넌트나 서버 액션에서 map과 같은 배열 메소드를 사용하는 것은 문제없다.

서버 컴포넌트와 배열 메소드

서버 컴포넌트나 서버 액션에서는 Array.prototype.map과 같은 표준 JavaScript 메소드를 자유롭게 사용할 수 있다. 이러한 메소드는 Node.js에서도 완벽히 지원되며, 데이터 변환이나 처리에 유용하다.

// 서버 컴포넌트 예시
export async function getServerSideProps() {
  const data = await fetchDataFromAPI(); // Node.js 18 이상에서 fetch 사용 가능
  const processedData = data.map(item => ({
    ...item,
    additionalProperty: 'value',
  }));

  return { props: { processedData } };
}

function Page({ processedData }) {
  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default Page;

브라우저 전용 객체의 사용 제한

반면, window나 document 같은 객체는 브라우저 환경에서만 존재하므로 서버 사이드에서는 사용할 수 없다.
이러한 객체를 서버 컴포넌트나 서버 액션에서 접근하려고 하면 오류가 발생한다. 따라서 서버와 클라이언트에서 사용하는 로직을 명확히 구분해야 한다.

요약

• 표준 JavaScript 기능:
  map, filter, reduce 등은 서버 컴포넌트와 서버 액션에서 자유롭게 사용할 수 있다.
• 브라우저 전용 객체:
  window, document, canvas 등은 서버 환경에서는 사용할 수 없으므로 클라이언트 컴포넌트에서만 접근해야 한다.
• 데이터 패칭:
  Node.js 18 이상에서는 서버 사이드에서도 fetch를 사용할 수 있다. 이전 버전에서는 node-fetch와 같은 패키지를 사용해야 한다.

서버 컴포넌트나 서버 액션에서 map과 같은 배열 메소드를 사용하는 데에는 아무런 제약이 없으며, 이는 표준 JavaScript의 일부로 Node.js 환경에서도 완벽히 지원된다.