SSR & CSR

 

React와  Next를 비교하면서 CSR과  SSR 이해하기

 

 

서론1.  Express  와 ejs(Express의 템플릿 엔진)을 사용하여 웹페이지를 보여줄 경우 

=> 서버사이드 렌더링

위 사진은  experss generator로 파일을 생성하고 처음 서버를 실행시킨 모습입니다.

저 화면이 바로 서버사이드 렌더링으로  보여주는 화면입니다 !! 

 

 

즉 , 서버사이드 렌더링은 서버 측에서  화면을 그리는데 필요한 것들을 보내줍니다.  

 그림 0

 

 

 

 

 

서론 2.   클라이언트 – 프론트(프론트서버) – 백엔드(벡엔드서버) 구조에 익숙해지기 !! 

 

지금은  “클라이언트 – 서버”   구조에 익숙하셔서  

아래 사진과 같은 구조가  잘 이해 안 되실 수도 있는데  React (or Next) 로 개발한 웹은 아래 사진처럼 되어있습니다 !!

 

 

 

 

 

 

 

본론  React  (CSR)와  Next ( SSR) 차이

React 

Create-React-App으로  리액트 프로젝트를 만들고 index.js에 들어가 보면 아래 사진 처럼 나옵니다.  

 

src/index.js  

해석해보면  리액트 엘리먼트<App /> (app.js) 을 id가 root인 요소(index.html)에 그려준다는 의미입니다.   

Id가 root인 요소는 public/index.html에 있습니다 .

 

 

 

index.html

 

 

app.js

 

그 다음에 앱을 실행시키고 

Localhost:3000에 접속하면 아래 사진과 같은 화면이 나옵니다  

 

그 다음에 여기서 View Page Source에  들어가봅시다 

그러면 아래와 같은 화면이 나옵니다  

< 사진 7   >  

 

어 ??..<사진7> 뭔가 이상하네요  분명 화면에는 React Rendering이라고 나오는데  

body 에는 html Element(요소)가 없고 

 

 <script src=”/static/js/bundle.js< ~  뭐 이런 것만 보입니다..  

 

그럼 누가 화면을 그려준걸까요?   

 

 

바로 저기 있는 Script들이  화면을 그려준 겁니다 . 

Script는 자바스크립트 코드를 넣는 태그입니다  

 

자바스크립트는 어디서 실행되죠?  

바로  웹브라우저(클라이언트)입니다. 

 

저는 이러한 점  때문에   기본적으로   

리액트는 클라이언트 사이드 렌더링을 한다고 이해했습니다 . 

 

**참고 body가 비어있어서 검색엔진이 와서  빈 페이지인 줄 알고 넘어가는 이슈가 생깁니다 (검색엔진 최적화 이슈) 

( 저기 있는 script 코드를 뜯어보면   제가 JSX로 쓴 코드가 있네요) 

 

 

 

**참고 자바스크립트로 화면을 그려준다는 게 잘 이해 안 되실 수도 있는데  

 

createElement()같은 메서드를 사용하면  html 요소들을  만들 수 있습니다.   

(div 뿐만 아니라    화면 구성에 필요한 각종 태그들을 만들 수 있습니다 ) 

 

 

 

 

 

 

Next 

 

이제 Next를 봅시다.

 

기본적으로 Next를 실행시키면  

 

Next는 _app.js와 _document.js가 제일 처음에 실행됩니다 . 

  

 

_app.js가 최초로 실행되어 내부에 들어갈 컴포넌트들을 실행시키고,  

_document.js는  _app.js에서 구성한 HTML이 어떤 형태로 들어갈지 구성해줍니다 . 

 

 Next앱을 실행시키고 Localhost:3000에 접속하면 아래 사진과 같은 화면이 나옵니다  

 

 

Pages/index.js  

아까와 마찬가지로 View Page Source에  들어가봅시다 

 

 

어.!!  React로 실행시켰을 때와 다르게  body에 JSX로 작성한 코드들이 들어가 있습니다.  

 

검색엔진 최적화 이슈도 없겠네요~!  

 

 

_app.js, _document.js등등 덕분에   Next 로 개발하면 화면을 그리는데  필요한 요소들을  

프론트 측(프론트 서버)에서  준비한 후   웹브라우저 (클라이언트)로 보냅니다.  

 

(필요한 데이터는 getInitialProp를 사용하여  백엔드 서버(Api) 측에서 가지고 옵니다.  )  

 

 

 

 

이러한 점들 때문에 저는 Next가  기본적으로  서버사이드 렌더링 한다고 합니다

 

 

** 엄밀하게 따지면  리액트는 csr ,넥스트는 ssr 이렇게  

 이분법 적으로 딱 나눌 수는 없습니다..  

  

(리액트로도 서버사이드렌더링(ssr)을 구현할 수도 있고  

Next로도 클라이언트사이드 렌더링(csr)을 구현할 수 있습니다 . ) 

 

그래도 일단 react-csr, next- ssr  이렇게 틀을 잡는게  좋다고 생각합니다