[React] Node 와 React

History

<그림 1> 프로토콜을 통해 client와 server간의 데이터를 주고 받음

 

HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 가능하게하도록 설계되었습니다.

HTTP는 클라이언트와 서버 간의 요청-응답 프로토콜로 작동합니다.

웹 브라우저는 클라이언트 일 수 있으며 웹 사이트를 호스팅하는 컴퓨터의 응용 프로그램은 서버 일 수 있습니다.

예 : 클라이언트 (브라우저)가 서버에 HTTP 요청을 제출합니다. 그런 다음 서버는 클라이언트에 응답을 반환합니다. 응답에는 요청에 대한 상태 정보가 포함되어 있으며 요청 된 컨텐츠가 포함되어있을 수도 있습니다.

웹환경에서 client와 server를 구분하는것은 매우 중요합니다. 

1. Client와 Server

(1) client란 ? 스스로 로직을 가지고 있는게 아니라 서버에서 데이터를 받아서 나타내는 것이다.

    ex) 브라우저, 자동차, 휴대폰, 광고판 등 

 point! 태초에는 아무것도 없었다..뭔갈 받아와서 그대로 표현 한것일뿐....

(2) server란 ? 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램(server program) 또는 장치(device)를 의미한다.

 point! 전달자다...

2. server rendering과 client rendering

(1) server의 발전

• 단순전달자 서버 → 태초에 서버가 있었다. 클라이언트와 데이터를 한번 주고 받을때마다 끊기는 방식.  

            끊겨버리기때문에, 동적인 요소는 적용하기 힘들었다.

• true와 false를 구분하는 서버 → 기존의 값만 넘겨주는 서버에서, DB에서 정보를 찾고 맞고 틀리고를 판단해 전달 할 수 있게됨 (= 서버랜더링이 가능해짐)

           클라이언트는 항상 한 값을 전달받기 원했다.

• client는 한값을 받고 싶어했고, server 는 result.html(한 파일)에 true 와 false 부분만 체크해 데이터를 바꿔 전달하는 방식으로 전달하게 되었다.

          한마디로, client가 요청을 하면 , server는 어떤 상황이든 result.html을 반환하는것.(안의 필요한 데이터만 바꿔서)

(2) server rendering과 client rendering의 비교

  1) server rendering ( 전통방식 )

• server rendering이란 ?

              요청시마다 새로고침이 일어나며 서버에 새로운  페이지에 대한 요청을 하는 방식. 

               View가 어떻게 보여질지 또한 서버에서 해석하여 보내주는것.

• 장점은?

          [ 1 ]  초기 페이지 로드가 느리지 않음. ( 그렇다고 막 빠른것은 아님. )
          [ 2 ]  검색엔진 최적화( SEO) 가능

• 단점은?

          [ 1 ]  React에서 서버사이드렌더링을 구현할 경우 Router와 Redux와 함께 사용하다보면 복잡해질 수 있다.
          [ 2 ]  서버사이드 렌더링을 하게 될 때는, ReactDOMServer.renderToString 함수를 사용한다. 이 함수는 동기적으로 작동한다. 그래서, 렌더링하는동안은 이벤트루프가 막히게 된다.(라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성 할 수 있다.)

< 대안 >
메타태그만 넣어주기
서버쪽에서 라우트에 따라 필요한 메타태그만 넣어주는 것. 그러면, 크롤러에선 해당 페이지에 대한 기본 정보는 얻어 갈 수 있게 된다.
Prerender
이 서비스는 오직 검색엔진 최적화를 위해서만 사용

 

2)  client rendering 

• client rendering이란 ?

              html을 그리는 역할을 클라이언트 측에서 자바스크립트가 수행하는것.

               View가 어떻게 보여질지 또한 서버에서 해석하여 보내주는것.

• 장점은?

          [ 1 ]  사용자의 행동에 따라 필요한 부분만 다시 읽어드리기 때문에 서버 측에서 렌더링 하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인디랙션을 기대할 수 있다. ( 트레픽 감소 )
          [ 2 ]  서버사이드 렌더링을 한다 해도, Ajax 기능을 위해 클라이언트 랜더링 요소가 포함될 수 밖에 없다 → 그러므로, 처음부터 클라이언트 측에서 렌더링을 하게되면 서바사이드 렌더링이 따로 필요하지 않기에 일관성 있는 코드를 작성할 수 있다.
          [ 3 ]  사용자 경험 : 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다.

• 단점은?

          [ 1 ]  초기 페이지 로드가 느려진다. ( 네트워크를 통한 통신이므로 사용자에게 콘텐츠를 표시하기 전에 서버를 두 번  왕복해야합니다. → 그러나 그 후에는 페이지 로드가 매우빠름)
          [ 2 ]  검색 엔진 최적화의 문제가 존재한다(SEO). ( 대부분의 웹 크롤러, 봇들이 자바스크립트 파일을 실행시키지 못함. 떄문에 html에서만 콘텐츠를 수집하게 되고 빈페이지로 인식하게 된다.)
          [ 3 ]  보안문제 : (서버 사이드 렌더링에서는 사용자에 대한 정보를 서버측 세선에서 관리하므로, 클라이언트 측에서는 쿠키 말고는 사용자에 대한 정보를 저장할 공간이 마땅치 않다.)

 

결론 :

1. 첫 번째 페이지 로드에는 서버 측 렌더링을 사용.
2. 그 후 모든 후속 페이지 로드에는 클라이언트 측 렌더링을 사용.

이것이 의미하는 바를 생각해보세요.

• 첫 번째 페이지 로드의 경우 사용자가 콘텐츠를 보기 전에 두 번 왕복하지 않습니다.
• 후속 페이지 로드가 빨라집니다.
• 크롤러는 간단한 HTML을 얻습니다. 옛날처럼 JavaScript를 실행하거나 _escapedfragment를 처리할 필요가 없습니다.

그러나 이를 위한 설정을 하기위해서는 서버에서 약간의 작업이 필요합니다. Angular, React 및 Ember 모두 이 접근 방식으로 변경했습니다.

 

참고 링크 :

https://jongmin92.github.io/2017/06/06/JavaScript/client-side-rendering-vs-server-side-rendering/

 

3. SPA(Single Page Application)

모바일 시대가 도래하면서 모바일 웹에 대한 니즈가 폭발적으로 증가했고 그에따른 성능 이슈도 함께 거론 되었다. -> (2)렌더링방식 참고

데스크탑에 비해 성능이 낮은 모바일, 스마트폰을 통해 웹 페이지를 출력하기 위해서는 기존에 있었던 방식과는 다른 접근이  필요했고 그에때라 Single Page Application(SPA)가 등장했다.

(1) SPA란 ?

   SPA는 브라우저에 로드되고 난 뒤에페이지 전체를 서버에 요청하는 것이 아니라 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션을 의미한다.

 

(2) SPA의 렌더링 방식 

    클라이언트사이드렌더링방식 이다. 

전통적인 방식은 성능문제에 이슈를 낳았다. 요청 시 마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이기 때문이다.

예를들어 현재 주소에서 동일한 주소를 가리키는(갖고있는) 버튼을 눌렀을때, 설정페이지에서 필요한 데이터를 다시 가져올 수 없다.

이것은 사용자와 인터랙션이 많은 요즘 웹앱에게 충분하지 않는 방법일 수 있다. 렌더링을 서버쪽에서 하는 것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는 것이고, 불필요한 트래픽도 낭비되는 것이다.

--

뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공했다.