[JavaScript] CSR, SSR, SSG

"웹브라우저를 렌더링한다."

 

 

본격적인 내용에 들어가기에 앞서 브라우저의 렌더링이란 브라우저가 서버로부터 요청해 받은 내용(HTML, CSS, Javascript)을 브라우저 화면에 표시해주는 작업을 말한다. 

 

렌더링 방식 중 CSR, SSR, SSG에 대해 정리해보았다..

 

☝️클라이언트 사이드 렌더링(CSR: Client-Side Rendering)

서버로부터 받아온 데이터를 클라이언트 내에서 동적으로 조작하여 렌더링하는 방식이다.

 

동작원리

1. 사용자가 웹페이지에 접속하면, 클라이언트는 서버로 요청한다.
2. 요청을 받은 서버는 빈 HTML과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
3. 클라이언트는 서버로부터 받은 텅빈 HTML 문서를 해석하고, 렌더링한다.
4. 브라우저는 자바스크립트 파일을 다운받는다.
5. 다운이 완료되면 자바스크립트가 실행되며, 리액트가 실행된다.
6. 리액트가 렌더링해서 화면을 보여준다.

페이지 이동의 경우

1. 브라우저가 클라이언트로 요청을 보낸다.
2. 클라이언트를 해당 정보를 처리한 후, 브라우저로 전달한다.
3. 브라우저는 처리된 화면을 렌더링한다.

 

장점

• 클라이언트 측으로부터 데이터를 받아와 렌더링하기 때문에 페이지 간의 이동속도가 빠르다.
• 클라이언트 측에서 데이터를 처리하기 때문에 서버부하가 적다.

 

단점

• 사용자가 웹 페이지에 처음 접근하면 페이지 렌더링을 위해 필요한 모든 Javascript 파일을 먼저 다운로드한 후에 데이터를 받아오기 때문에 페이지의 초기 로딩 속도가 느리다.
• 검색 엔진 최적화(SEO) 에 불리하다.
• 또한 클라이언트는 서버로부터 받은 Javascript 파일을 해석하고 실행한 후에 자바스크립트 실행에 필요한 데이터를 받아와 화면을 동적으로 렌더링해준다.
  • 이 경우에는 처음에는 빈 HTML 화면을 보여주다가 Javascript파일을 실행한 후 서버로부터 데이터를 가져오기 때문에 그 중간에는 빈 페이지가 보이게 된다. 이 경우 화면 깜빡임이 생길 수 있다. 

검색 엔진 최적화(SEO)
구글과 같은 검색 엔진이 검색 결과에서 상위에 노출되도록 나의 컨텐츠를 최적화하는 방식을 말한다.
HTML의 경우 meta tag를 잘 이용해주면 효율적으로 검색엔진에 노출시킬 수 있다.

하지만 CSR의 경우 서버로부터 빈 HTML을 받아 먼저 렌더링한다.  따라서 SEO에 굉장히 불리하다.

 

• 보안성이 낮을 수 있다.

 

---

 

‼️  서버사이드 렌더링과 정적 생성에 대해 알기 전에 프리렌더링이 무엇인지에 대해 짚고 가는 것이 좋다. 

프리렌더링

CSR 방식의 경우 사이트에 접속해서 빈 HTML이 먼저 렌더링 된 후에 그 페이지의 자바스크립트 파일을 다운 받아 실행된 후에 렌더링을 하여 화면을 보여주었다.

 

하지만 프리렌더링이란 브라우저가 빈 HTML 화면을 받아오기 전에 이루어지는 렌더링이다.

 

프리렌더링 방식에는 정적 생성(Static Generation)과 서버 사이드 렌더링(Server Side Rendering) 이 있다.

 

---

 

✌️ 서버 사이드 렌더링(SSR: Server Side Rendering)

 

서버에서 페이지를 렌더링한 후에, 클라이언트에게 전달되어 렌더링하는 방식이다.

서버 사이드 렌더링의 경우 웹브라우저가 GET 리퀘스트를 보낼 대마다 서버가 매번 렌더링한다.

 

동작원리

1. 사용자가 웹페이지에 접속하면, 서버로 요청한다.
2. 요청을 받은 서버에서 즉시 렌더링이 가능한 HTML 파일을 만들어 클라이언트로 보낸다.
3. 클라이언트는 서버로부터 받은 HTML을 통해 화면을 렌더링한다.
4. 클라이언트는 javascript파일을 다운로드하고 실행한다.
5. 리액트를 실행하고, 이미 화면에 렌더링 된 것들과 리액트와 연결한다. ( ==> Hydration)

 

✏️ Hydration 

처음에 받은 정적 HTML파일은 단순히 웹 화면을 보여주기 위한 HTML이다.
동작을 위해 필요한 Javscript 요소는 존재하지 않는다.
react Hook이나 이벤트 함수들은 모두 빌드 후에 실행되는 동작이다. 관련 부분들에 대해서는 비어있다.

말 그대로 정적인 파일인 것이다.

이러한 문제를 해결하기 위해 나온 것이 Hydration이다.
Hydration은 다운 받은 Javascript 파일의 코드들을 기존의 화면 렌더링된 요소들과 연결되어 리렌더링 되는 것이다.

 

 

장점

• 페이지의 초기 로딩 속도가 빠르다.
• 검색 엔진 최적화(SEO)에 유리하다.

 

단점

• 대규모의 복잡한 웹 애플리케이션을 개발할 경우 복잡성이 요구된다.
• 페이지 간의 이동속도가 느리다.
• 연속적인 렌더링을 수행할 경우 서버의 과부화 발생의 우려가 있다.

 

 

👌 정적 사이트 생성(SSG: Static Site Generation)

빌드를 하는 시점에 렌더링을 한다.

= 소스코드를 빌드할 때 각 페이지의 HTML 파일을 미리 생성해놓고, 요청이 들어오면 바로 해당 파일을 전달하는 방식이다.

 

동작 과정

1. 빌드 시에 모든 웹페이지의 정적 HTML 파일을 미리 만들어둔다. 
2. 브라우저가 해당 웹페이지에 접속하면 해당 페이지에 대한 HTML 파일을 전송한다.
   해당 파일 안에는 관련 javascript 파일의 로딩 코드가 포함되어 있다.
3. 클라이언트는 javascript파일을 다운로드하고 실행한다.
4. Hydration
5. 클라이언트가 리액트 화면을 조작한다.

 

 

 

 

📚참고 자료

https://ko.wix.com/blog/post/what-is-seo

https://adjh54.tistory.com/53#3)%20%EC%84%9C%EB%B2%84%20%EC%82%AC%EC%9D%B4%EB%93%9C%20%EB%A0%8C%EB%8D%94%EB%A7%81(SSR%3A%20Server%20Side%20Rendering)-1

https://velog.io/@hamjw0122/Next.js-Hydration