CSR,SSR에 대해서 (게시판,웹뷰)

CSR

Client Side Rendering에 약자로 클라이언트(유저)단에서 랜더링을하는겁니다.

유저 요청을하면

서버는 JS파일과 HTML을 넘겨주는데

이 HTML은 div#app 하나 딸랑있고 다른건 들어있지않습니다.

JS파일을 다 읽고 실행하면 <div id="app"></div> 여기다가

차곡차곡 뭔갈 만들어주는건데(랜더링)

 

 

React기준

div#app이걸 보신 분들은 React나 Vue에서 많이 보셨을겁니다.

여기서 이벤트를 발생시키면 JS가 Ajax로 서버에서 필요한 Data를 가져와서

HTML을 만들어줍니다.

이러면 장점이 페이지를 이동할 필요가없이 Ajax로 모든걸 처리하기때문에

웹이 마치 앱처럼 빨리빨리 동작합니다.

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

리액트 공홈이 리액트로 만들어져서 한번 들어가서 뭐 클릭클릭해보시면 엄청빨리 작동합니다.

 

장점

1. 클라이언트(사용자) 입장에서 사용할때 좋아합니다.

 

2. 리액트를 배워두면 여기저기 쓸데가 많습니다. 앱을 만들고싶다고하면 그냥 웹뷰 띄워도되고

React native가 당연하게 리액트 문법이랑 유사한게 많아서 배우기 쉽습니다.

 

3. 그냥 쌩 자바스크립트로 CSR을 구현할때보다 편합니다.

 

4. 개인적인거긴 하지만 SSR보다 개발할떄 편한거같습니다.

 

5.  서버 자원을 덜 사용합니다. HTML을 만들어서 줄 필요가없이 DATA하나 딸랑 주고 클라이언트가 알아서 HTML을 찍어내기떄문에

 

단점

1. 첫 로딩이 느립니다.  JS파일을 읽는데 좀 걸립니다. 근데 아까 말했듯이 div#app 하나 준다고했죠? 사용자는 빈 화면만 보고 기다려야합니다. 하지만 이후 요청은 굉장히 빠릅니다.

 

2. 좋지않은 SEO가 있겠죠? 당연히 이것도 div#app하나 주기때문입니다. 예를 들어 커뮤니티를 만들어야하는데

커뮤니티가 메인 페이지 하나만 검색이 되선 안되죠? 사용자가 쓴 글도 검색이되야하는데 이건 아까 말한대로 Ajax요청으로 

HTML을 만들기때문에 좋지않은 SEO가 있겠습니다.

 

SEO : 검색엔진이 내 페이지를 검색할수있게 상위노출 시켜주는거

 

3. 배우기가 좀 빡세다. 이것도 개인적인거긴 한데 리액트를 배우려면 Vanila JS를 잘해야합니다. 잘하지 못한다고해도 쓸줄을 알아야하기때문에 익숙해질 정도로 배워놔야합니다. 그렇다고해서 JS문법이랑 React문법이랑 굉장히 유사한가? 그것도 아니기때문에 따로 배워야합니다. ex) hook 

 

근데 저는 Vanila JS는 웹을하면 당연히 처음에 배운다고 생각이 들기때문에 단점 3으로 꼽긴 좀 그런거 같기도해요

 

 

SSR

요청을 하면 서버에서 HTML을 찍어서 보내줍니다. (사실 이 과정이 WAS도 있고 중간과정이 빠지긴했지만 별로 중요하지않기떄문에 넘어가겠습니다.)

HTML을 받고 JS파일을 받고나서부터 이벤트를 처리할수있습니다.

Express 에서 pug,ejs,hbs를 사용해서 개발하는게 SSR입니다.

 

장점

1. SEO가 좋다!

2. 템플릿 엔진을 쓰면 리액트 개발 + API 개발 하는거보다 시간이 덜 든다. (템플릿 엔진이 리액트보다 훨씬 쉽다.굳이 안써도되고)

3. 첫 로딩이 빠르다

 

 

단점

1. 첫로딩이 CSR보다 빠르다는거지 나머지 로딩은 똑같다. 그니까 CSR처럼 앱처럼 작동하지않고 페이지마다 HTML을 따로 받는다.

2. 서버 자원을 많이 쓴다. HTML을 찍어내서 주는 과정도있고 여러가지로 서버 자원을 많이 사용하게된다.

 

 

언제 써야할까

나는 SEO따윈 상관이없어요라고 한다면 (CSR) 

 

웹뷰로 띄울건데 앱처럼 작동하게하고싶어요 (CSR)

 

Interaction이 굉장히 많을거같아요 (CSR)

---

 

커뮤니티처럼 검색엔진을 통해 유입을 시켜야한다. (SSR)

 

Interaction이 별로 없어요 (SSR)

 

첫 로딩이 빨랐으면 좋겠어요 (SSR)