[자바스크립트] SSR

SSR(Server-Side Rendering)

• SSR는 웹 애플리케이션의 초기 로딩 시 서버에서 필요한 HTML, CSS, JS 파일을
  생성하여 클라이언트로 전달하고, 이를 받아와 화면을 구성하는 방식
  
  
• 동작 방식
  1. 초기 요청
     • 사용자가 웹 페이지에 접속하면, 클라이언트는 서버에 초기 페이지 로딩을 요청
  2. 서버에서 렌더링
     
     • 서버는 클라이언트에게 필요한 HTML, CSS, JS 파일 등을 생성하여 응답
     • 서버는 필요한 데이터를 가져와 페이지를 완전히 구성 후, HTML 형태로 클라이언트에 전달
  3. 클라이언트 렌더링
     
     • 클라이언트는 서버로부터 받은 HTML 파일을 받아와 화면을 구성
     • JS파일은 주로 상화작용적인 요소나 동적인 데이터 처리를 담당
• 장점
  1. 초기 로딩 속도
     
     • 서버에서 필요한 콘텐츠를 렌더링하여 클라이언트에게 전달하기 때문에,
       초기 로딩 속도가 빠르다.
  2. 검색 엔진 최적화(SEO)
     
     • 서버에서 렌더링된 HTML을 전달하기 때문에, 검색 엔진 크롤러가
       컨텐츠를 수집하고 인덱싱하기에 용이
  3. 접근성
     
     • SSR은 JS를 사용하지 않고도 페이지의 기능을 사용할 수 있기 때문에, 접근성이 좋다.
• 단점
  1. 화면 전환이 느릴 수 있음
     
     • 페이지 전환이 발생할 때마다 서버에 요청을 보내야 하기 때문에,
       화면 전환이 CSR에 비해 느릴 수 있다.
  2. 서버 부하
     
     • 서버에서 렌더링을 처리해야 하기 때문에, 서버의 부하가 증가할 수 있다.
  3. 개발 복잡성
     
     • SSR은 클라이언트와 서버의 역할이 혼합되어 있기 때문에,
       개발이 상대적으로 복잡할 수 있다.
• 활용
  • 웹 애플리케이션이나 웹사이트의 검색 엔진 최적화가 중요한 경우
  • 컨텐츠의 양이 많거나 복잡한 경우에 SSR을 사용하여 빠른 초기 로딩을 제공
  • 정적인 컨텐츠가 많이 사용되는 경우
  • JS를 비활성화한 상태에서 컨텐츠에 접근할 수 있고, 기능을 모든 사용자가 이용 가능
  • 클라이언트에서 요청을 최소화하고, 서버에서 데이터 처리를 할 수 있기 때문에 보안에 더 유리
  • 초기 로딩 속도와 SEO에 중점을 두는 웹 애플리케이션에서 주로 사용,
    정적인 컨텐츠가 많거나 검색 엔진 최적화가 필요한 경우에 적합