카테고리 없음

React ? Next.js? - SSR과 CSR

이채야채 2022. 3. 20. 21:59

Next.js에 대한 공부를 하기에 앞서 SSR , CSR 에 대한 공부를 다시 해봐야겠다.

 

 

SSR / CSR Workflow 이미지 출처: www.google.com

렌더링이란?

서버로부터 HTML파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다.

 

브라우저 동작과정

- 서버로부터 데이터를 응답받아  HTML을 파싱하여 Dom 트리를 생성한다.

- Dom 트리가 구축되는동안 브라우저는 Render 트리를 구축한다.

- CSS해석하고 위치를 설정한다.

- Render 트리가 그려지고 브라우저 화면에 표시된다.

 

 

 

렌더링 방법 SSR, CSR

SSR(server side rendering)

SSR은 전통적인 웹 어플리케이션 렌더링 방법으로 사용자가 웹페이지에 접근할때, 서버에 페이지에대한 요청을 한다.

좀 더 쉽게 말하면, 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방법.

이때 서버에서는, HTML, VIEW와 같은 자원을을 어떻게 보여줄지 해석하고 렌더링하여 사용자에게 반환한다.

브라우저   요=>청 서버 => 새로고침! 

 

장점

  • 검색엔진 최적화 가능 (SEO)

검색엔진 최적화란 무엇인가?

SEO = Search Engine Optimization 의 약어

웹페이지 검색 엔진이 자료를 수집하고, 순위를 매겨서 페이지를 구상할때 검색결과의 상위에 나올 수 있게 하는 작업 

상위에 나오면? 방문자수 증가! 트래픽증가! (보통 마케팅 수단으로 이용)

 

  • 초기 로딩 속도가 빠르다.

서버에서 이미 렌더링해서 가져오기때문이다.

하지만 클라이언트가 JS파일을 모두 파싱하고 적용하기전 까지 기능이 동작하지 않는다.

 

단점

 

  • 매번 새로고침이 발생한다.

SSR은 서버에 요청을 할때 마다 새로고침이 된다.

새로고침이 된다는것은? 서버와의 잦은 응답을 말하며 서버에 부담을 주어 성능이 악화된다.

  • 프로젝트 구조가 복잡해진다.

여러가지 라이브러리와 함께 사용할경우, 서버에서 데이터를 가져와 렌더링해야되는 상황이 발생한다면 프로젝트 구조가 복잡해진다. 

 

CSR(client side rendering)

그 전에 SPA란?

 

SSR은 전통적인 웹 애플리케이션 렌더링 방식이였다. 그러다 기술이 더 발전되고 모바일 시대가 도래하며 모바일 환경에 최적화된 시스템이 필요해졌다.기존과 다른 방식이 필요해졌다. 그래서 등장한개념이 SPA

SPA는 최초 한번 페이지를 렌더링 한 이후부터는 데이터만 변경하여 사용하는 단일 페이지로 구성된 웹 애플리케이션이다. 

SPA에서는 화면에 필요한 모든 HTML를 클라이언트측에서 가지고있다. 서버측에는 필요한 데이터를 요청하고 JSON형태로 받기 때문에 기존 어플리케이션에 비해서 화면을 구성하는 속도가 빠르다. 

 

CSR

 

사용자에게 보여줄 페이지를 클라이언트에서 렌더링하는 방식. 

CSR의 과정

  1. 처음 웹 서버에 요청할때 데이터가 없는 문서를 반환한다.
  2. HTML및 동적 파일들이 로드된다. 이때 데이터가 있다면 서버측에 요청을 하여 받은 후 화면에 나타낸다.
  3. 브라우저가 서버에 HTML및 동적 파일 요청을 한 후 로드되면, 사용자의 상호작용에 따라 자바스크립트를 통해 동적으로  렌더링을 한다.
  4. 필요에따라 데이터를 서버에 요청하고 받아와서 렌더링한다.

 

💡리액트를 사용하는 이유

 

리액트의 장점

 

CSR은 서버로부터 데이터를 받은 후 클라이언트에서 렌더링 하는 방식이다. 

  • 바뀐 부분만 렌더링한다.
  • 컴포넌트를 나눠서 관리가 가능해진다.
  • 코드의 재활용성을 높여준다.

CSR의 장점

  • 트래픽감소와 빠른 인터랙션

단점

  • 초기 구동속도가 느리다.
  • 검색엔진최적화가 어렵다.
  • 보안문제가있다.

SSR은 서버측에서 세션으로 관리하지만, CSR은 쿠키말고 관리할곳이없다.

 

개념 정리

SSR

서버에서 렌더링하는 전통적인 웹 렌더링 방식이다.

사용자가 웹페이지에 접근할때 서버에 페이지에 대한 요청을 한다. 서버에서 HTML , 자바스크립트 파일 등을 모두 다운로드하여 

화면에 렌더링하는 방식이다.

 

😃 초기속도가 빠르고 SEO에 유리하다.

😂 하지만 VIEW를 변경할때 서버에 계속 요청을 보내야하므로 서버에 부담을 준다.

 

CSR

클라이언트에서 렌더링하는 방식으로 SPA로 클라이언트측에서 HTML 자바스크립트를 렌더링하고 동적으로 동작하면서 서버로부터 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는것

 

😃 초기 렌더링 후 서버에 재요청을 할 필요가 없어서 클라이언트 내에서 작업하므로 빠르다.

😂 초기속도가 느리고 SEO에 불리하다. 

 

SPA에서 SSR을 할 수 없을까?  => Next.js

Next.js와 같은 리액트 라이브러리를 사용하여 구현할 수있다.

 

Next.js는 리액트에서 SSR을 적용할 수 있게 하는 라이브러리다!

 

 

✔️ Next.js는 아직 공부하지못한 라이브러리다. 개념부터 정리하여 다음편에서 올리겠다.