Server Side Rendering

Server Side Rendering

• 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식
  -> 말 그대로 서버에서 HTML 및 CSS 등을 생성하여 사용자에게 제공하는 것을 말함
  
  
• 필요한 이유
  -> 초기 로딩속도를 개선 하고 검색엔진 최적화를 용이하게 하기 위함
  
  
• 장점
  • 첫페이지 로딩속도가 CSR에 비해 훨씬 빠름
    -> Javascript가 HTML을 생성하기 전에도 이미 만들어진 HTML을 보여줄 수 있으므로 사용자로 하여금 더 빠른 반응속도를 체감하게 해줌
    -> 클라이언트 사이드 렌더링 방식보다 처음 서버에 데이터 요청하는 양이 적음
  • 모든 컨텐츠가 HTML에 담겨져 있기 때문에 Low SEO(검색엔진 최적화가 부적절하게 이루어져 검색결과 상위에 노출되지 않는 현상)문제가 없음
    
    
• 단점
  • 초기 로딩 이후 페이지 이동시 속도가 좀 느림
    -> 페이지 이동시마다 클라이언트가 서버에게 필요한 데이터를 요청하고 서버가 응답해주는 방식이라 느려짐

Server Side Rendering의 치명적 문제점

• HTML을 그려줄 수는 있어도 실제로 브라우저가 렌더링 한 것이 아니기 때문에 Javascript의 코드를 DOMElement와 매칭시켜서 동적인 페이지를 구현하지는 못한다는 것
  -> SSR로 인해 렌더링 된 HTML 페이지는 뼈대만 존재하는 바싹 마른 형태로 존재하게 됨
  -> 따라서 건조한 웹 페이지에 수분 공급(Hydration)을 해줘야함

• SSR은 초기로딩이 빠르고 검색엔진에도 잘 잡혀서 사용자 유입 면에서 이점을 가져올 수 있음
• Next.js는 SSR과 CSR을 병행해서 사용함
• SSR에서 만든 페이지는 다 좋은데 Javascript의 동적인 이벤트들을 Element에 할당하지 못함
  -> 그렇기 때문에 SSR에서 만들어진 매마른 페이지에 동적 이벤트라는 수분 공급을 해주는 과정을 Hydration이라함