<div id="readability-page-1" class="page"><div><h2 id="왜-til">왜 TIL?</h2>
<p>벨로그를 타고타다가 <a href="https://velog.io/@suyeonme/%ED%9B%84%EA%B8%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%A9%B4%EC%A0%91-%EC%A0%95%EB%A6%AC">suyeonme님의 프론트엔드 개발자 면접 정리 글</a>을 보게 되었습니다.<br>
오늘 TIL주제인 CSR과 SSR의 차이가 위 글에서 첫번째 질문이었는데, 놀랍게도 처음 들어봅니다😬. 면접에서 얼굴 붉히는 일은 없도록 정리하겠습니다🤫.</p>
<h2 id="csr">CSR</h2>
<p>CSR은 <strong>Client Side Rendering</strong>의 약어입니다. 클라이언트(브라우저)가 서버에 요청한 HTML 및 static파일들이 로드 되면서 화면에 출력합니다. 사용자의 상호작용에 따라서 JavaScript를 통해 동적으로 Rendering하고, 필요에 따라 데이터를 서버에 요청해서 받아와 Rendering합니다.</p>
<p>그림으로 표현하면 다음과 같습니다. (<a href="https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8">이미지 출처</a>)<br>
<img src="https://media.vlpt.us/images/eunjeong/post/22181b4e-741f-4654-ba4a-ef03cfdb57c4/csr.png"></p>
<h3 id="장점">장점</h3>
<ul>
<li><strong>초기 전송되는 페이지 속도가 빠르다</strong>.</li>
<li>첫 로딩에서 HTML 및 static파일들을 받으면, 동적으로 동작하기 때문에 <strong>UX가 뛰어나다.</strong></li>
<li>서버요청 횟수가 적기 때문에 <strong>서버 부담이 덜하다.</strong></li>
</ul>
<h3 id="단점">단점</h3>
<ul>
<li>서비스에서 필요한 데이터를 클라이언트에서 추가로 요청하여 재구성하기 때문에 <strong>페이지 완료시점은 느리다.</strong>(모두 로드될 때 까지 기다림)</li>
<li>SEO(search engine optimization) 구성 시 문제가 발생할 수 있다.</li>
</ul>
<h3 id="예제">예제</h3>
<p>대표적인 예로 React.js가 있습니다.</p>
<hr>
<h2 id="ssr">SSR</h2>
<p>SSR은 <strong>Server Side Rendering</strong>의 약어입니다. 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 보여주는 방식입니다. 즉, 완전하게 만들어진 HTML파일을 받아서 Rending합니다. 웹 서버에 요청할 때마다 클라이언트(브라우저)의 새로고침이 발생하고, 서버에 새로운 페이지를 요청하는 방식입니다.</p>
<p>그림으로 표현하면 다음과 같습니다.(<a href="https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8">이미지 출처</a>)<br>
<img src="https://media.vlpt.us/images/eunjeong/post/4b396422-631c-4182-98b7-5b40a4c01cf3/ssr.png"></p>
<h3 id="장점-1">장점</h3>
<ul>
<li>사용자에게 보여주는 <strong>컨텐츠 구성이 완료되는 시점은 빠르다.</strong></li>
<li>**SEO(search engine optimization)**를 쉽게 구성할 수 있다.</li>
</ul>
<h3 id="단점-1">단점</h3>
<ul>
<li>페이지를 <strong>요청할 때마다 새로고침</strong>이 발생하므로 UX가 떨어진다.</li>
<li>서버에 매번 요청하기 때문에 <strong>트래픽이나 서버 부하가 커진다.</strong></li>
<li>페이지를 구성하는 속도는 늦다.(서버에서 구성하기 때문)</li>
</ul>
<h3 id="예제-1">예제</h3>
<p>대표적으로 JSP/Servlet의 아키텍처와 Next.js가 있습니다.</p>
<hr>
<h2 id="정리">정리</h2>
<p>위의 내용을 하나의 이미지로 표현하면 다음과 같이 그릴 수 있습니다.(<a href="https://velog.io/@ehgks0000/CSR%EA%B3%BC-SSR%EC%9D%B4%EB%9E%80">이미지 출처</a>)</p>
<p><img src="https://media.vlpt.us/images/eunjeong/post/9be0bde3-61f4-4d7d-a2dc-390a18ecea67/2018-11-15-CSR&amp;SSR-step1.png"><br>
오늘 내가 배운 것(TIL)의 목적은 CSR과 SSR의 정의 및 특징을 알고, 비교가 가능한 것입니다. 정보를 얻기위한 다양한 글들에서는 두 렌더링 방식의 싸움에서 누가 이겼는지에 대해서 언급하던데, 이 부분은 더 많은 공부 후 작성 될 예정입니다.(작성 후 이곳에 링크를 남기겠습니다🤙)</p></div></div>

eunjeong.log

왜 TIL?
벨로그를 타고타다가 suyeonme님의 프론트엔드 개발자 면접 정리 글을 보게 되었습니다. 
오늘 TIL주제인 CSR과 SSR의 차이가 위 글에서 첫번째 질문이었는데, 놀랍게도 처음 들어봅니다😬. 면접에서 얼굴 붉히는 일은 없도록 정리하겠습니다🤫.
CSR
CSR은 Client Side Rendering의 약어입니다. 클라이언트(브라우저)가 서버에 요청한 HTML 및 static파일들이 로드 되면서 화면에 출력합니다. 사용자의 상호작용에 따라서 JavaScript를 통해 동적으로 Rendering하고, 필요에 따라 데이터를 서버에 요청해서 받아와 Rendering합니다.
그림으로 표현하면 다음과 같습니다. (이미지 출처)
장점
초기 전송되는 페이지 속도가 빠르다.
첫 로딩에서 HTML 및 static파일들을 받으면, 동적으로 동작하기 때문에 UX가 뛰어나다.
서버요청 횟수가 적기 때문에 서버 부담이 덜하다.
단점
서비스에서 필요한 데이터를 클라이언트에서 추가로 요청하여 재구성하기 때문에 페이지 완료시점은 느리다.(모두 로드될 때 까지 기다림)
SEO(search engine optimization) 구성 시 문제가 발생할 수 있다.
예제
대표적인 예로 React.js가 있습니다.
SSR
SSR은 Server Side Rendering의 약어입니다. 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 보여주는 방식입니다. 즉, 완전하게 만들어진 HTML파일을 받아서 Rending합니다. 웹 서버에 요청할 때마다 클라이언트(브라우저)의 새로고침이 발생하고, 서버에 새로운 페이지를 요청하는 방식입니다.
그림으로 표현하면 다음과 같습니다.(이미지 출처)
장점
사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빠르다.
SEO(search engine optimization)를 쉽게 구성할 수 있다.
단점
페이지를 요청할 때마다 새로고침이 발생하므로 UX가 떨어진다.
서버에 매번 요청하기 때문에 트래픽이나 서버 부하가 커진다.
페이지를 구성하는 속도는 늦다.(서버에서 구성하기 때문)
예제
대표적으로 JSP/Servlet의 아키텍처와 Next.js가 있습니다.
정리
위의 내용을 하나의 이미지로 표현하면 다음과 같이 그릴 수 있습니다.(이미지 출처)
오늘 내가 배운 것(TIL)의 목적은 CSR과 SSR의 정의 및 특징을 알고, 비교가 가능한 것입니다. 정보를 얻기위한 다양한 글들에서는 두 렌더링 방식의 싸움에서 누가 이겼는지에 대해서 언급하던데, 이 부분은 더 많은 공부 후 작성 될 예정입니다.(작성 후 이곳에 링크를 남기겠습니다🤙)

[TIL] CSR, SSR의 비교👀

댓글