[프론트엔드] 서버 사이드 랜더링[1]

728x90

1. 서버 사이드 렌더링의 이해

1.1 서버 사이드 렌더링(SSR)이란?

서버 사이드 렌더링이란 UI를 서버단에서 렌더링하는 것을 말합니다. 이전의 만든 리엑트 프로젝트는 클라이언트 사이드 렌더링(CSR)을 하고 있습니다. 클라이언트 사이드 렌더링은 UI 렌더링 처리를 모두 브라우저를 통해서 하는 것 입니다.

즉, 자바스크립트를 실행해야 개발자가 만든 화면이 사용자에게 보여지는 것을 뜻합니다.

1.2 프로젝트 생성

CRA로 프로젝트를 생성하고 개벌 서버를 실행 하겠습니다.

yarn create react-app ssr-recipe
cd ssr-recipe
yarn start

서버를 실행하셨으면 웹 브라우저에서 크롬 개발자도구를 열고 Network 탭을 클릭해 주세요.

Response 안에 div 태그를 확인해보시면 root 엘리먼트안이 비어있는 것을 확인할 수 있습니다.

따라서 이 페이지는 처음에 빈페이지라는것을 뜻합니다. 여기서 자바스크립트 실행되고 리엑트 컴포넌트가 랜더링되면서 화면이 보이는 것이죠.

서버 사이드 렌덜링을 구현하면 사용자가 웹 서비스에 방문했을 때 서버 쪽에서 초기 렌더링을 대신 처리해줍니다.

그리고 사용자가 html을 전달받을 때 내부에 렌더링한 결과물을 확인 할 수 있습니다.

1.3 서버사이드 렌더링의 장점과 단점

서버사이드 렌더링의 장점은?

첫번째 SEO(검색 엔진 최적화)의 최적화가 가능하다는 점입니다. 즉 구글, 네이버, 다음등의 포털 사이트의 검색 엔진에서 웹 애플리케이션 페이지를 원할하게 수집 할 수 있습니다.

리엑트로 만든 SPA 프로젝트는 CSR(클라이언트 사이드 렌더링)으로 개발하게 된다면 검색엔진 크롤러 봇처럼 자바스크립트가 실행되지 않는 환경에서는 페이지를 수집하기 어려움이 있습니다. 따라서 서버에서 클라리언트 대신 렌디링을 처리 해 주면 검색 엔진이 페이지의 내용을 제대로 수집해 갈 수 있습니다

구글 검색엔진은 다른 사이트와 다르게 자바스크립트를 실행하는 기능이 있어서 페이지를 크롤링할 때도 있지만, 모든 페이지의 대한 자바스크립트를 실행하지는 않습니다.

두번쨰 서버 사이드 렌더링을 통해서 초기 로드 시에 렌더링 성능을 개선할 수 있습니다.

예를 들어 서버 사이드 렌더링이 구현되지 않은 웹 페이지에 사용자가 방문하면, 자바스크립트가 브라우저에서 로딩 될 것이고 실행될 떄 까지 사용자는 빈 페이이지를 보며 기다려야 합니다. 여기서 API까지 호출한다면 네트워크 통신을 하기 때문에 대기 시간은 더 길어지겠죠.

여기서 서바사이드 렌더링은 구현한 웹 페이지라면 자바스크립트 파일 다운로드를 완료되지 않은 시점에도 html을 볼 수 있기 때문에 대기 시간을 최소화 할 수 있고, 사용자 경험에도 더 큰 정잠을 가지고 있습니다.

서버사이드 렌더링의 단점은?

서버 사이드 렌더링은 브라우저가 해야 하는 일을 서버가 대신 처리하는 일입니다. 즉 추가로 서버 리소스가 사용된다는 단점이 있습니다. 수많은 사용자가 동시에 웹 페이지에 접속하게 되면 서버 과부하가 발생할 수 있습니다.

따라서 사용자가 많은 서비스에서는 캐싱과 로드 밸런싱 작업을 통해 성능 최적화를 필수로 해주어야 합니다.

1.4 서버 사이드 렌더링과 코드 스플리팅의 충돌

서버 사이드 렌더링과 코드 스플리팅을 함께 적용하려면 번거로운 작업이 있습니다. 아래와 같은 흐름으로 작동하면서 페이지에 깜밤이는 현상이 발생합니다.

서버 사이드 렌더링된 결과물이 브라우저에 노출
자바스크립트 파일 로딩 시작
자바스크립트가 실행되면서 아직 불러오지 않은 컴포넌트를 null로 렌더링하게 됨
페이지에서 코드 스플리팅된 컴포넌트들이 사라지는 현상 발생
코드 스플리팅된 컴포넌트들이 로딩 이후 나타남

이러한 이슈를 해결하기 위해서는 React에서 라우트 경로마다 코드 스플리팅된 파일 중에서 필요한 모든 파일을 브라우저가 렌디렁하기전에 불러와야 합니다.

이 챕터에서는 Loadable Components 라이브러리에서 제공하는 기능을 사용하여 다음과 같이 처리합니다.

서버 사이드 렌더링 후에 필요한 파일의 경로를 추출하여 렌더링 결과에 스크립트/스타일 태그를 삽입합니다

1.5 서버 사이드 렌더링 진행 순서

프로젝트 준비 및 설정
서버 사이드 렌더링 구현
데이터 로딩 작업
코드 스플리팅 작업