rest api 와 서버 사이드 렌더링 / 클라이언트 사이드 렌더링과의 연관성

REST API와 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)은 서로 밀접하게 연관되어 있습니다. 이 세 가지 개념이 어떻게 연결되는지 쉽게 설명하겠습니다.

📌 REST API와 SSR, CSR의 관계

웹 페이지를 사용자에게 보여줄 때, 크게 두 가지 방법이 있습니다.

• 서버 사이드 렌더링(SSR): 서버에서 HTML 페이지를 미리 만들어서 클라이언트(브라우저)에 보내줍니다.
• 클라이언트 사이드 렌더링(CSR): 서버는 데이터를 JSON 등으로 보내주고, 브라우저가 JavaScript로 데이터를 받아 HTML을 동적으로 만듭니다.

이 두 방식 모두 REST API와 밀접한 관련이 있습니다. 왜냐하면 REST API는 서버와 클라이언트가 데이터를 주고받는 방식이기 때문입니다.

📌 코드 예시로 직관적으로 이해하기

블로그에서 게시글 목록을 보여주는 예시를 들어보겠습니다.

1️⃣ 서버 사이드 렌더링 (SSR)의 예시

SSR은 서버가 미리 HTML을 만들어서 보내줍니다.

• 클라이언트가 /posts 페이지를 요청하면, 서버는 데이터를 가져와서 HTML을 만들어서 보냅니다.

// 서버 코드 (Next.js의 예시)
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return { props: { posts: posts } };
}

// React 컴포넌트 (클라이언트에 보내지는 HTML을 미리 생성)
export default function Posts({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

 

위 코드에서 서버는 데이터를 REST API로부터 받아온 후, 이 데이터를 가지고 미리 HTML을 생성하여 클라이언트에 전달합니다. 즉, 브라우저는 이미 완성된 HTML을 받기 때문에 빠르게 화면을 볼 수 있습니다.

2️⃣ 클라이언트 사이드 렌더링 (CSR)의 예시

CSR은 처음엔 빈 HTML만 받고, 이후 브라우저에서 JavaScript로 데이터를 요청하여 화면을 그립니다.

• 처음엔 빈 화면만 받고, 이후에 REST API를 호출하여 데이터를 가져옵니다.

import { useEffect, useState } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts') // REST API 호출
      .then(res => res.json())
      .then(posts => setPosts(posts));
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

 

여기서 REST API가 사용됩니다. 즉, CSR 방식에서는 REST API를 통해 JSON 형태의 데이터(표현)를 받아오고, 브라우저에서 이를 화면으로 그립니다.

🔗 그렇다면 REST API와 SSR·CSR의 관계는?

• REST API는 데이터를 주고받는 방식입니다. JSON과 같은 형태로 데이터를 주고받습니다.
• SSR은 서버가 미리 HTML을 만들어 보내므로 굳이 REST API를 사용하지 않아도 됩니다. 물론 SSR에서도 내부적으로 REST API를 호출해 데이터를 얻어올 수 있지만 필수적이지 않습니다.
• CSR은 반드시 REST API 같은 데이터 제공용 인터페이스가 필요합니다. 왜냐하면 브라우저가 직접 데이터를 요청하고 받아와 화면을 그리기 때문입니다.

즉,

🧑‍💻 직관적인 비유로 이해하기

식당 비유로 생각해보면:

• 서버 사이드 렌더링(SSR):
  식당에서 주문하면 주방(서버)이 음식을 완벽히 조리해서 테이블로 내어줍니다. 손님은 바로 먹으면 됩니다. 빠르게 음식을 받을 수 있지만, 매번 주문마다 주방이 바쁘게 일해야 합니다.
• 클라이언트 사이드 렌더링(CSR)
  처음엔 빈 접시만 받고, 손님(클라이언트)이 직접 뷔페 테이블(REST API)에 가서 원하는 음식을 가져옵니다. 음식(데이터)을 가져오는 과정에서 반드시 뷔페 테이블(REST API)이 필요합니다.

즉, CSR에서는 데이터 제공 창구인 REST API가 필수적이고, SSR에서는 선택적으로 사용할 수 있는 것입니다.

📌 결론

정리하면 다음과 같습니다:

• REST API는 특히 **클라이언트 사이드 렌더링(CSR)**과 밀접한 관련이 있습니다. CSR은 브라우저가 직접 데이터를 요청하고 받아와야 하기 때문에 반드시 REST API 같은 데이터 제공 인터페이스가 필요합니다.
• 반면 **서버 사이드 렌더링(SSR)**은 서버가 미리 만들어진 HTML을 보내주므로 REST API 사용이 필수적이지 않습니다. 하지만 SSR에서도 내부적으로 REST API를 활용하여 데이터를 얻어올 수 있습니다.

즉,

"REST API는 CSR과 매우 밀접하게 연관되어 있으며, CSR 방식에서는 필수적으로 사용됩니다. 하지만 SSR은 반드시 REST API를 사용할 필요는 없으며 선택적으로 사용할 수 있습니다."

 

---

질문 : mvc는 서버 사이드 렌더링인가??

네, 맞습니다. 정리하면 다음과 같습니다.

 

| 방식 | 렌더링 위치 | 데이터 전달 방식 | 주로 사용하는 구조 | 예시 기술 |

|------|-----------------|------------------|-----------|

| MVC | 서버 사이드 렌더링(SSR) | 서버에서 HTML을 완성하여 클라이언트에게 전달 | Spring MVC + Thymeleaf, JSP, Django Template 등 |

| REST API | 클라이언트 사이드 렌더링(CSR) | 서버는 JSON 데이터를 전달하고, 클라이언트가 이를 받아 화면을 구성 | React, Vue, Angular 등 프론트엔드 프레임워크 |

📌 MVC는 왜 서버 사이드 렌더링인가?

MVC(Model-View-Controller)는 다음과 같은 구조를 가집니다:

• 모델(Model): 데이터를 관리하는 부분
• 뷰(View): 사용자에게 보여줄 화면을 만드는 부분 (HTML 템플릿)
• 컨트롤러(Controller): 사용자의 요청을 받아 모델에서 데이터를 가져오고, 이를 뷰에 전달하여 HTML을 생성한 후 사용자에게 전달

즉, MVC 방식에서는 서버에서 데이터를 가져와서 HTML 페이지를 미리 완성한 뒤 클라이언트에게 보내줍니다. 클라이언트는 이미 완성된 HTML을 받아 바로 화면에 표시합니다. 따라서 MVC는 기본적으로 서버 사이드 렌더링(SSR) 방식입니다.

REST API는 클라이언트 사이드 렌더링(CSR)

REST API는 데이터를 JSON이나 XML 형태로 제공합니다.
클라이언트는 처음엔 빈 HTML만 받고, 이후 JavaScript로 REST API를 호출하여 데이터를 받아와 화면을 그립니다. 따라서 REST API를 활용하는 방식은 기본적으로 클라이언트 사이드 렌더링(CSR) 방식과 밀접하게 연결됩니다.

예시:

// 클라이언트 코드 (React 예시)
import React, { useEffect, useState } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/posts') // REST API로 데이터 요청
      .then(res => res.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

 

이처럼 REST API를 사용하는 경우에는 브라우저가 직접 데이터를 요청해서 받아오고, 이 데이터를 JavaScript로 처리하여 화면을 그립니다.
따라서 REST API는 기본적으로 **클라이언트 사이드 렌더링(CSR)**과 밀접하게 연결됩니다.

결론 요약 ✅

• MVC 형태는 서버에서 미리 HTML을 만들어서 보내주는 서버 사이드 렌더링(SSR) 방식을 사용합니다.
• REST API는 JSON 등의 데이터만 제공하고 화면은 브라우저가 직접 만드므로, 기본적으로 클라이언트 사이드 렌더링(CSR) 방식을 사용합니다.

다만 최근에는 SSR과 CSR 방식을 혼합한 하이브리드 방식도 많이 사용됩니다. 예를 들어 Next.js나 Nuxt.js 같은 프레임워크는 첫 페이지 로딩은 SSR로 빠르게 하고, 이후의 동적 상호작용은 CSR로 처리하여 두 가지 장점을 모두 얻습니다