<aside> 📌

목차

</aside>

렌더링이란?

• 웹개발에서 개발자가 작성한 코드를 사용자가 볼 수 있도록 HTML로 변환하는 과정.
• 어디서 이 작업을 처리하느냐에 따라 다음 두가지로 나눌 수 있다.
  • client side rendering : 렌더링을 브라우저에서 진행한 것
  • server side rendering : 렌더링을 서버에서 진행한 것
• 그 외에도 Static Site Generation (SSG), Incremental Static Regeneration (ISR) 방식도 존재한다.

SSR (Server-Side Rendering)

✔️ 동작 방식

• 사용자가 페이지를 요청하면 서버에서 해당 페이지를 HTML로 렌더링한 뒤 클라이언트에 전달한다.
• 새로운 페이지로 이동할 때마다 새로고침이 발생하며, 서버에 다시 요청을 보낸다.

✔️ 특징

• 초기 로딩 속도가 빠르다
  • 서버에서 완성된 HTML을 전달하므로 브라우저가 빠르게 콘텐츠를 표시할 수 있음
• SEO에 유리하다
  • 모든 콘텐츠가 HTML로 포함되어 있어 검색엔진이 쉽게 정보를 수집할 수 있다.
• 페이지 전환이 매끄럽지 않다.
  • 페이지 이동 시마다 새로고침이 발생하기 때문에 부드러운 페이지 전환이 어려움
• 블로그, 뉴스같이 검색엔진 최적화가 매우 중요한 사이트에 적합하다.

CSR (Client-Side Rendering)

✔️ 동작 방식

• 웹 페이지를 요청했을 때 서버에서 빈 HTML 문서와, HTML을 생성할 수 있는 JS 리소스가 전송됨
• 이후 클라이언트쪽에서 자바스크립트 코드를 사용해 동적으로 렌더링한다.
• 하나의 페이지로 동작하기 때문에 single page application (SPA) 라고도 이야기한다.