[React] 웹 렌더링 (SSR , CSR, SSG)

 

'웹 렌더링', '서버 사이드 랜더링' ... 이게 도대체 뭘까요?

 

실무에서 주니어인 제게는 아직 경험이 없지만 웹 개발자로서 전체 아키텍처에 영향을 미칠 의사 결정을 하곤 합니다. 웹 개발자가 하는 가장 핵심적인 결정 중 하나는 애플리케이션에서 로직와 렌더링을 구현하는 것이라고 합니다.

웹 사이트를 구축하는 데는 여러 가지 방법이 있는데요. 그래서 좋은 방법이 뭘까 하면서 고민하게 됩니다. 

서버 사이드 렌더링? 많이 들어본 것 같은데...

React, Vue를 공부하면서 꼭 들어봤을 말인데요. 이것의 개념을 정리하는겸 웹 렌더링에 대해서도 함께 정리를 해보려고 합니다.

---

'렌더링' 이란?

서버로부터 받은 내용을 브라우저 화면에서 표시하는 것.

 

렌더링 과정

• 사용자가 브라우저를 통해 웹 사이트에 접속.
• 브라우저는 렌더링에 필요한 리소스를 서버에 요청하고 응답 받음.
• 브라우저의 렌더링 엔진은 서버로 부터 응답 받은 HTML, CSS를 *파싱(parsing)하여 DOM, CSSOM을 생성하고, 이 둘을 결합하여 렌더트리를 생성.
• 브라우저의 자바스크립트 엔진은 서버로부터 응답받은 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트 코드로 변환하여 실행. 만약 이때, 자바스크립트가 DOM API를 통해 DOM이나 CSSOM을 변경한다면, 변경된 DOM과 CSSOM은 다시 렌더트리로 결합.
• 결합된 렌더트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저에 HTML요소를 페인팅.

*파싱(parsing) 이란?
어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것.

 

어떻게 보여주는가?

• SSR: Server-Side Rendering (서버 측 렌더링) - 클라이언트 측 또는 유니버설 앱을 서버의 HTML로 렌더링. UI를 서버에서 렌더링 하는 것.
• CSR: Client-Side Rendering (클라이언트 측 렌더링) - 브라우저에서 애플리케이션을 렌더링. 일반적으로 DOM을 사용.
• SSG: Static-Site Generation (정적 사이트 생성기) - 정적인 웹사이트를 생성해주는 툴. 일반적으로 마크다운 파일을 읽어 HTML을 생성하는 기능을 가짐.

 

---

 

Ajax

자바스크립트를 처음 접했을 때 Ajax에 대해서 배웠을때가 생각납니다. 

자바스크립트를 통해서 서버와 브라우저가 비동기로 데이터를 주고 받을 수 있어서 Ajax를 사용했는데요. 이를 사용하면 매 번 전체 페이지에 대한 데이터를 가져올 필요 없이 필요한 부분의 데이터만 불러와서 동적으로 웹 사이트 화면을 변경할 수 있습니다. 항상 새롭게 렌더링하지 않아도 되기 때문에 새로고침 할 때와 같은 깜박임도 없어 자연스러운 화면 전환이 가능했죠. 그로인해서 서버에서만 이루어지던 다양한 로직 처리나 HTML 생성을 상당수 클라이언트에서 처리할 수 있게 되었습니다.

 

---

 

서버사이드 렌더링(SSR)

Static-Site Generation (정적 사이트 생성기)
정적인 웹사이트를 생성해주는 툴. 일반적으로 마크다운 파일을 읽어 HTML을 생성하는 기능을 가짐.

장점

• 검색엔진 최적화 (SEO) 가능
• 첫 렌더링된 html 을 클라이언트에게 전달해 주기때문에 초기로딩속도를 많이 줄여줌. 
• 자바스크립트를 불러오고 렌더링 작업이 완료되기 전에 사용자가 사이트 컨텐츠를 이용할 수 있음.

단점

• 브라우저가 해야 할 일을 서버가 대신 처리하므로 서버 리소스가 사용됨. 따라서 서버 렌더링에 따른 부하가 발생.
• 프로젝트의 구조가 좀 더 복잡해짐. 데이터를 미리 불러오고, 코드 스플리팅과의 호환 등 고려해야 할 사항이 더 많아져서 개발이 어려워짐.
• 페이지 이동시 화면이 깜빡거림. 코드 스플리팅 깜박이 현상.

 

 

---

 

클라이언트 사이드 렌더링(CSR)

Client-Side Rendering (클라이언트 측 렌더링)
브라우저에서 애플리케이션을 렌더링. 일반적으로 DOM을 사용.

장점

• 첫 렌더링 시 한 페이지만 불러옴.
• 필요한 부분만 불러오기 때문에 전체 페이지를 다시 화면을 그리는 것 보다 빠름.
• 즉, 리로딩 없이 서버로부터 받아서 화면을 갱신.

단점

• 초기 구동속도가 느림.
• 검색엔진 최적화가 어려움.

 

---

 

정적 사이트 생성기(SSG)

Static-Site Generation (정적 사이트 생성기)
정적인 웹사이트를 생성해주는 툴. 일반적으로 마크다운 파일을 읽어 HTML을 생성하는 기능을 가짐.