🔖 SSR(Server-Side Rendering) ; 서버 사이드 렌더링

Server-Side Rendering

서버 사이드 렌더링

 

의미

  : 사용자에게 클라이언트 측에서 보여 줄 HTML 페이지를 서버 측에서 미리 렌더링하여 보여주는 형식.

 

특징

• 장점
  - 별도의 API 통신 없이 서버에서 정보를 가져와 FCP(First Contentful Paint)가 더 빠름.
  - 검색 엔진 최적화(SEO ; Search Engine Optimization)에 적합.
   → 최초 진입 시 검색 엔진 머신은 HTML을 다운로드하여 정보를 가져가는데, 이때 JS코드는 실행하지 않기 때문.
  - 누적 레이아웃 이동(Cumulative Layout Swift)을 일정 수준 방지할 수 있음.
  - CSR(Client-Side Rendering)에 비해 보안성이 뛰어남.
• 단점
  - 서버 의존성이 심해질 수 있음.
  - API 호출이 많은 사이트가 아닌 경우, CSR에 비해 초기 로딩 속도가 느릴 수 있음.

반의어

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

 

관련어

• SEO(Search Engine Optimization) ; 검색 엔진 최적화
• FCP(First Contentful Paint) ; 최초 콘텐츠풀 페인트
• Cumulative Layout Swift ; 누적 레이아웃 이동
• Next.js
• Thymeleaf

 

참고

  - 김용찬(2024). 모던 리액트 Deep Dive. 위키북스

  - 그림 출처

    1. https://www.inrhythm.com/ir-propel-web-ssr-nextjs/