CSR vs SSR 특징 및 차이

서준·2024년 3월 7일
CSRSSR
0

웹 개발의 기본지식

목록 보기
1/1
post-thumbnail

프론트엔드 개발과 관련된 질문으로 빠지지 않는 CSR 과 SSR의 차이점,
실제 서비스 또한 CSR 과 SSR의 차이점과 장단점을 알고 목적에 맞는 서비스를 개발해야 되기 때문에 블로그 글로 확실하게 정리해보고자 합니다.

1. SSR(Server Side Rendering)

Server Side Rendering의 약자.
서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.

아래 사진과 함께 설명을 보겠습니다.
1. 서버가 렌더링된 HTML 파일을 보내고 브라우저가 받는다.
2. 브라우저는 받은 HTML 파일을 확인하고 바로 화면에 보여주게 된다.(그러나 Javascript파일이 브라우저에서 실행되기 전이기 때문에 볼 수 만 있고 사이트 자체는 조작 불가능하다.)
3. 서버로부터 Javascript파일을 받고 브라우저에서 실행시킨 뒤 웹과 상호작용이 가능해진다.

SSR 장점

  • 첫페이지 로딩속도가 빠르다.
  • 검색엔진 최적화가 가능하다

SSR 단점

  • 초기 로딩 이후 페이지 이동 시 속도가 CSR에 비해 느리다.
  • 깜빡임 이슈 (매번 새로고침 해야하기 때문에)
  • 서버 과부하

위의 장단점을 이해하기 위해 예시 코드와 함께 SSR의 동작 원리를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
    <div className="App">
      <h1>SSR과 CSR</h1>
      <h2>SSR 장점</h2>
      <ul>
        <li style="font-size: 22px">첫페이지 로딩속도가 빠르다.</li>
        <li style="font-size: 22px">검색엔진 최적화가 가능하다</li>
      </ul>

      <h2>SCR 장점</h2>
      <li style="font-size: 22px">
        새로고침이 발생하지 않아 사용자 경험에 도움을 준다.
      </li>
      <li style="font-size: 22px">
        초기 로딩 이후 빠른 웹사이트 렌더링이 가능하다
      </li>
    </div>
  </body>
  </html>
//server.js
const express = require('express');
const app = express();
const port = 3001;
app.listen(port, function () {
  console.log('server opend');
});

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

위 코드는 node.js와 express를 사용하여 SSR 방식을 구현한 예시입니다.
서버에서 초기 렌더링에 필요한 HTML 파일을 보내고, 브라우저는는 이를 받아 화면에 표시합니다.
SSR 방식을 사용하면 개발자 도구의 네트워크 탭을 통해 렌더링된 HTML 파일을 확인할 수 있는데 어떻게 보여지는 확인해보겠습니다.

SSR은 서버로부터 받은 HTML 파일과 내용을 브라우저가 확인하고 그것을 바로 화면에 미리 보여줄 수 있기에
미리보기에서 조작은 못하지만 확인이 가능하기에 첫페이지 로딩속도가 빠르며,
HTML 파일 안에 포함된 정보를 바탕으로 SEO(검색엔진 최적화)에 유리하다는 장점을 가지게 되는 것입니다.

2. CSR(Client Side Rendering)

Client Side Rendering의 약자.
SSR과 반대로 브라우저가 렌더링을 맡아서 하는 방식을 의미한다.

  1. 서버가 HTML 파일을 보내고 브라우저가 받는다.
    (여기서 핵심은 HTML 파일을 보내주긴 하지만 빈 HTML 파일을 보내준다는 점이다)
  2. 랜더링할 정보가 없으므로 화면에는 아무것도 보여지지 않는다.
  3. 서버로부터 Javascript파일을 받고 브라우저에서 실행시킨 뒤에 랜더링과 상호작용이 가능해진다.

이번에는 Creat-React-app 을 통해 리액트 프로젝트를 생성하고 CSR 환경에서 작동하는 예시 코드를 살펴보겠습니다.

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
    <App />
);

import React from 'react';

function App() {
  return (
    <>
      <h1>SSR과 CSR</h1>
      <h2>SSR 장점</h2>
      <ul>
        <li style={{ fontSize: '22px' }}>첫페이지 로딩속도가 빠르다.</li>
        <li style={{ fontSize: '22px' }}>검색엔진 최적화가 가능하다</li>
      </ul>

      <h2>SCR 장점</h2>
      <ul>
        <li style={{ fontSize: '22px' }}>
          새로고침이 발생하지 않아 사용자 경험에 도움을 준다.
        </li>
        <li style={{ fontSize: '22px' }}>
          초기 로딩 이후 빠른 웹사이트 렌더링이 가능하다
        </li>
      </ul>
    </>
  );
}
export default App;

React의 경우, 서버로부터 응답을 받을 때 HTML 파일은 비어 있기에 사용자는 초기에는 빈 화면만을 볼 수 있습니다.
이후 자바스크립트 파일이 다운로드되고 해석되면, React 애플리케이션의 진입 지점인 App.js가 렌더링되어 사용자가 보게 됩니다.
이 작업은 createRoot 함수를 사용하여 DOM 요소에 렌더링을 설정하는 것으로 이루어집니다.

이러한 특성으로 인해 SSR 방식과는 달리, CSR은 개발자 도구를 통한 미리보기가 불가능하며, 초기 로딩 속도가 느리고 SEO에 불리한 측면이 있습니다. 그러나 한 번 초기 로딩이 완료되면, 사용자 경험을 향상시키는 새로고침 없는 조작과 빠른 웹사이트 렌더링을 제공하여 SSR보다 빠르고 동적인 사용자 인터랙션을 가능케 합니다.

결론

SSR은 초기 페이지 로딩 시 서버로부터 완전한 HTML을 받아 화면을 빠르게 표시할 수 있고 검색 엔진 최적화에 유리합니다. 그러나 페이지 이동 시 서버에 재요청이 필요하고, 화면 깜빡임 현상이 발생할 수 있으며 서버 과부하 문제도 발생할 수 있습니다.

CSR은 초기에는 비어있는 HTML을 받아 사용자는 아무 정보도 볼 수 없지만, JavaScript 파일을 통해 동적으로 화면을 구성하고 렌더링하기 때문에 사용자 경험 측면에서는 더 부드럽고 빠른 웹사이트를 제공할 수 있습니다. 그러나 검색 엔진 최적화에는 불리하고 초기 로딩 속도가 SSR에 비해 느릴 수 있습니다.

따라서 프로젝트의 목적과 요구사항에 따라 SSR과 CSR 중에서 선택하여 개발해는 것이 중요하며 검색 엔진 최적화나 초기 로딩 속도가 중요하다면 SSR을 선택하고, 사용자 경험과 애플리케이션의 동적인 특성이 중요하다면 CSR을 선택하는 것이 적절하다.

profile
서준
하나씩 쌓아가는 재미

0개의 댓글