SSR, CSR 차이 (Django vs React)

티스토리 뷰

Web

SSR, CSR 차이 (Django vs React)

코코팜 2021. 12. 26. 20:52

웹사이트에 접속하면 브라우저에서 html을 읽어 화면에 띄워준다. 그렇다면 이 html 문서를 누가 생성(rendering)할까? 여기서 SSR, CSR의 차이가 있다.

SSR(Server Side Rendering)

블로그처럼 한 포스트에서 다른 포스트에 넘어갈 때 서버에 페이지에 대한 요청을 보내게 된다. 이때 서버에선 페이지에 대한 전체 html에 css, javascript을 담아 client에게 보내주게 된다.

서버측에선 올려진 html templelate을 그대로 보내주는 것이 아니라 이 html에 데이터와 javascript, css를 render하여 클라이언트에 하나의 html파일로 보내주게 된다. 이 html에는 DOM이 구성되어 있어 브라우저가 바로 그리기에 속도가 빠르다. (서버측 부담은 ↑)

html에 모든 데이터와 내용들이 포함되어 오기때문에 검색엔진에 노출이 잘 되어진다. (크롤러가 데이터를 잘 잡아냄)

대표적인게 django, next.js 등등

django 예시

서버측 소스 코드


<div class="left-side">
    자금 : {{user.user_profile.money|linebreaksbr}} <br><br>
    <div class="stock">
        

    {%for my_stock in holding_stocks %} 
    {{my_stock.name}} : {{my_stock.cnt|linebreaksbr}}주 <br>
    {% endfor %}
    </div>
</div>
<div class="content container">
    <div class="post">

       
        <h1>{{ stock.name }}</h1>
        <a>현재가 : {{ stock.price|linebreaksbr }}</a>
        {% if user.is_authenticated %}
            <a class="btn btn-default" href="{% url 'buy_stock' pk=stock.pk %}"><span class="glyphicon glyphicon-plus"></span></a>
        {% endif %}
    </div>
</div>

def post_detail(request, pk):
    stock = get_object_or_404(StockData, pk = pk)
    holding_stocks = HoldingStock.objects.filter(user = request.user.id)
    return render(request, 'blog/post_detail.html', {'stock' : stock,'holding_stocks': holding_stocks})

클라이언트에서 받은 html

<html>
    <div class="wrapper">
        <div class="left-side">
            자금 : -27507500 <br><br>
            <div class="stock">
            SK : 101주 <br>
            KAKAO : 39주 <br>
            </div>
        </div>
        <div class="content container">
            <div class="post">
                <h1>KAKAO</h1>
                <a>현재가 : 402500</a>
                <a class="btn btn-default" href="/post/25/buy"><span class="glyphicon glyphicon-plus"></span></a>
            </div>
        </div>
    </div>
</html>

브라이저에서 확인해보면 html 하나에 모든 데이터들이 담겨있는걸 확인할 수 있다.(SEO 유리)

CSR(client Side Rendering)

csr은 반대로 클라이언트 즉 브라우저에서 rendering을 진행하는데 서버의 역할은 단지 html,css,javascript 들을 요청에 따라 클라이언트에게 보내주기만 한다. 요청에 따른 데이터를 받은 클라이언트는 js파일을 실행하면서 DOM에 내용들을 추가해가며 최종적으로 화면에 페이지가 띄워지게 된다.

대표적인게 React

React 예시

서버측 React 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

클라이언트측 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />

    <link rel="manifest" href="/manifest.json" />

    <title>React App</title>
  <script defer src="/static/js/bundle.js"></script></head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

클라이언트의 respone로 받은 html에다가 /static/js/bundle.js 을 실행하여 브라우저에서 렌더링하여 페이지를 그리게 된다.

CSR의 특징으로는 SSR과 다르게 검색엔진에 노출이 잘 되지않고 (html 자체는 빈 깡통이므로) 페이지를 렌더링할 소스코드들을 받아오는데 시간이 좀 걸린다.

출처 : https://developers.google.com/web/updates/2019/02/rendering-on-the-web

'Web' 카테고리의 다른 글

[letsencrypt] 웹에 https 적용하기 (0)	2022.04.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

스터디 기록장

티스토리 뷰