서버사이드 랜더링 vs 클라이언트 사이드 랜더링

조현수·2023년 11월 16일

기존 1990년대 까지만하더라도 static randering side였다.


💡Static Rendering (Single Page Application)
클라이언트측에서 실행되는 웹 애플리케이션 

초기 로드에 서버에 배포되어있는 HTML을 받아와서 보여주는 형식이다.

초창기에는 페이지내에서 다른 링크를 클릭하면 다시 HTML을 받아와야하기때문에 사용성이 떨어졌다.  

현재는 하나의 HTML을 초기에 로드한 후 Javascript를 사용하여 동적으로 필요한 콘텐츠들을 변경하고 업데이트 하는 방식이다. (예 - React)

클라이언트측에서 실행되는 웹 애플리케이션

초기 로드에 서버에 배포되어있는 HTML을 받아와서 보여주는 형식이다.

초창기에는 페이지내에서 다른 링크를 클릭하면 다시 HTML을 받아와야하기때문에 사용성이 떨어졌다.

현재는 하나의 HTML을 초기에 로드한 후 Javascript를 사용하여 동적으로 필요한 콘텐츠들을 변경하고 업데이트 하는 방식이다. (예 - React)

1998년 XMLHttpRequest API가 개발이 된다. 그래서 json만 데이터로 주고받고 동적으로 HTML요소를 생성해 기존의 static randering처럼 모든것을 정적으로 주고받던 문제점을 해결했다.

2005년 AJAX가 개발된다. 구글같은 대형 사이트에서 이를 이용해 SPA페이지를 만들기 시작했고 널리 사용되었다.

Client Side Randering

대표 : React, Vue, Angular

클라이언트측에서 다 해먹는거..

기존에 SSR방식에서는 블링킹이슈(화면클릭시 재로딩)가 존재했는데, 이유는 클릭하면 html을 재 로딩하기때문이다.

반면 CSR은 이미 html이 뿌려져있기때문에 한 화면에서 동적인 컨텐츠만 다시 올리면 된다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import AlertStore from "./Providers/AlertContext";
import HcAlert from "./component/HCAlert";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter basename={'/'}>
            <AlertStore>
                <App />
              
            </AlertStore>
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();