서버 레벨 컴포넌트, 클라이언트 레벨 컴포넌트

📑서버 레벨 컴포넌트

애플리케이션의 서버 부분에서 렌더링되는 컴포넌트이다.

대부분의 컴포넌트가 서버에서 렌더링되고, 작은 인터랙티브 UI 요소만 클라이언트에서 렌더링되는 방식이다.

📍특징

1. 초기 화면 로드가 빠르다

• 클라이언트에서 요청이 들어오면 서버가 해당 컴포넌트를 렌더링하여 HTML을 생성하는데 이때 서버는 데이터 베이스, 외부 API등에서 데이터를 가져와 컴포넌트와 함께 렌더링하여 이를 완성된 HTML 로 변환하여 브라우저에 전송한다.

2. 페이지 로드 시간 단축

• 서버에서 렌더링된 HTML을 직접 제공하므로 클라이언트는 Javascript 번들을 다운로드하고 컴포넌트를 렌더링하는 과정이 생략되며 서버에서 완성된 HTML을 전달받으면 브라우저는 즉시 DOM에 렌더링하여 사용자에게 화면을 보여준다.

✅장점

1. 빠른 상호작용

•  서버에서 이미 렌더링된 HTML을 제공하므로 클라이언트가 초기 화면을 즉시 렌더링 할 수 있다.

2. 데이터 보안

• 서버에서 직접 데이터를 처리하여 민감한 데이터가 클라이언트에 노출되지 않는다.

❎단점

1. 서버 부하 증가

• 서버가 모든 요청에 대해 렌더링 작업을 수행하므로, 서버의 부하가 증가할 수 있다.

2. 페이지 응답 시간

• 서버에서 렌더링 작업을 수행하는데 시간이 소요되므로, 페이지 응답 시간이 느려질 수 있다.

🔽예시코드🔽

import React from 'react';

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

function ServerComponent({ data }) {
  return (
    <div>
      <h1>서버에서 가져온 데이터</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default ServerComponent;

📑클라이언트 레벨 컴포넌트

클라이언트측에서 렌더링되는 컴포넌트이다.

사용자와의 상호작용을 담당하며, 애플리케이션의 인터랙티브한 부분을 담당한다.

📍특징

1. 브라우저에서 렌더링

• 처음에는 빈 HTML로 전달되며, 브라우저에서 Javascript를 통해 렌더링 된다.

2. 동적인 상호작용 가능

• 사용자가 페이지와 상호작용할 때 주로 사용되며, 실시간 업데이트 및 상호작용이 중요한 기능에 적합하다.

✅장점

1. 빠른 상호작용

• 브라우저에서 직접 렌더링하고 상태를 업데이트하기 때문에 사용자가 페이지를 로드한 후의 상호작용이 매우 빠르다.

2. 동적 콘텐츠 렌더링

• 클라이언트에서 API를 호출하여 데이터를 가져오므로, 실시간 데이터 업데이트와 동적인 콘텐츠 렌더링이 가능하다.

3. 서버 부하 감소

• 초기 요청 이후 대부분의 데이터 처리가 클라이언트 측에서 이루어지기 때문에, 서버 요청 빈도가 낮아지고 서버 부하가 줄어든다.

❎단점

1. 느린 초기 로딩

• 클라이언트 측에서 모든 JavaScript 파일을 다운로드하고, 실행 후에야 화면이 렌더링되므로 초기 로딩 시간이 길어질 수 있다.

2. 보안 취약

• 클라이언트 렌더링 방식에서는 서버와의 통신이 많고, 데이터를 클라이언트에 직접 전달하기 때문에 보안에 취약할 수 있다.

3. 상태 관리 복잡성

• 클라이언트에서 상태를 관리하면서 페이지 간에 상태를 전달하고 유지해야하는데 여러 컴포넌트와 페이지가 서로 상태를 공유해야 할 때, 상태 관리가 복잡해질 수 있다.

🔽예시코드🔽

import React, { useState, useEffect } from 'react';

function ClientComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>클라이언트에서 가져온 데이터</h1>
      <p>{data.content}</p>
    </div>
  );
}

export default ClientComponent;