<aside> 💡

개념/내용을 단순히 그대로 옮겨적는것이 아닌, 강의 내용을 복기하고 추가 인사이트를 얻으며 확실히 ‘내 것’이 되기 위한 개인의 이해를 바탕으로 작성되었습니다 🧚🏼

</aside>

먼저 Rendering(렌더링)이란 ?

Ex) 아래와 같은 컴포넌트를 작성해서 렌더링을 한다면,

const renderText = () => {
	return (
		<h1>안녕하세요!</h1>
	)
}

export default renderText;

🔻 아래와 같은 결과로 렌더링이 되어 화면에 표시된다

<h1>안녕하세요</h1>

근데 이렇게 렌더링을 하는 방식이 한가지만 있는것이 아니다!

크게 2가지로 나눌 수 있다.

  1. 클라이언트인 브라우저에서 렌더링
  2. 서버에서 렌더링

아래에서 좀 더 살펴보자 🙌🏻

CSR(Client-Side Rendering)의 개념과 동작 방식

서버는 클라이언트가 렌더링할 수 있게 기본 뼈대인 html과 javscript/css 파일만 ‘제공’

클라이언트는 실제 콘텐츠가 만들어지도록 직접 ‘실행’

🔻 html 파일은 보통 아래와 같은 구조

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <script src="/static/js/main.js" defer></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

→ 자세히보면 화면을 보여주는 정보는 없고,

자바스크립트 번들(main.js)만 로드되어 있는걸 볼 수 있다.

브라우저가 이 main.js를 받아서 실행하면,

여기 안에는 리액트나 다른 프레임 워크가 document.getElementById("root")에 HTML 요소들을

직접 렌더링하는 코드가 있다.

즉, 실제 콘텐츠는 JS 실행 후에 만들어지는것!

→ 그래서 이걸 Client Side Rendering이라고 부른다

쉽게 말하면,

클라이언트: “내쪽에서 화면 그릴거니까 넌 그냥 내가 그릴 수 있게 스케치북(뼈대) 제공해주고, 그림을 내가 그릴건데 그릴려면 색연필이나 뭐 도구(js/css 리소스)는 있어야할 거 아니야. 그런것들만 제공해줘 🙂 뭘 그릴지는 내가 정해”

서버 : 여기 스케치북이랑 그릴 수 있게 도구 줄게

스크린샷 2025-05-28 오후 10.29.26.png

SSR(Server-Side Rendering)의 개념과 동작 방식