SSR vs CSR 📝
서버사이드 렌러딩의 경우, 클라이언트 측에서 서버에게
요청을 보낼 때 서버 측에서 필요한 html, css, js, 미디어등을 렌더링에서 클라이언트의 화면에 보여주는 방식을 의미합니다. 클라이언트가 다른 페이지로 이동하거나 서버에게 또 다른 요청을 했을 때 다시 서버로부터 html, css, js를 렌더링한 결과를 화면에 보여주게 됩니다. 예를 들면, 로그인 버튼을 누르거나, 새로고침을 했을 때 깜빡 거리는 현상의 예시를 들 수 있습니다.
웹 페이지가 하는 기능이 많아지고, 모바일과 같은 컴퓨터보다는 성능이 낮은 기기의 사용자가 많아지면서 서버사이드렌더링의 오버헤드가 커지게 됩니다. 이를 해결하기 위해 등장한것이 클라이언트 사이드 렌더링입니다. 클라이언트 사이드 렌더링의 경우, 클라이언트에서 서버 측에 최초 요청을 보낼 때 정적파일을 모두 받아오는 것이 아닌 자바스크립트 파일을 전부 받아와 클라이언트 단에서 렌더링을 하고 화면에 보여주는 방식을 의미합니다.
클라이언트사이드렌더링에 관해서는 헷갈리는 개념이 등장하게 되는데요
싱글페이지애플리케이션이 클라이언트사이드렌더링과 같은것인가! 하는 주제가 있습니다. 싱글 페이지 애플리케이션이란 index.html과 같은 하나의 페이지로 페이지 이동없이 작동하는 웹 애플리케이션을 의미합니다. 우선 결론적으로 둘은 같지않습니다. 싱글 페이지 애플리케이션을 만들기 위해서는 서버로부터 필요한 데이터만 받아와야 하기때문에, 채택하게 된 방식이 클라이언트 사이드 렌더링일 뿐이지 둘이 같은 개념은 아니게 됩니다.
두가지 방식에는 장단점이 확연하게 나타납니다. 이 표를 같이 보도록하겠습니다. 우선, 서버사이드렌더링은 클라이언트 측에서 다운로드 하는 파일이 적어 속도가 빠릅니다. 하지만, 요청을 할 때 마다 서버는 처음부터 렌더링을 해서 보여주기때문에, 오버헤드가 발생하게 됩니다. 하지만, SEO에서 유리합니다. seo는 즉 서치엔진옵티마이제이션은 검색 엔진 최적화라는 뜻이고 웹 크롤링 봇이 html 분석해 웹 사이트가 검색 결과에 더 잘 보이게끔하는 과정을 의미합니다. 서버사이드렌더링은 렌더링된 html에서 크롤링을 하기 때문에 접근성이 좋습니다.클라이언트사이드렌더링은 서버로부터 모든 js파일을 받아옵니다. 그 후 html, css, js을 이용해 브라우저에서 렌더링하기 때문에 초기 로딩 속도가 느립니다. 하지만 그 후의 클라이언트 요청에 대해선 받아온 js로 처리하기 때문에 속도가 빨라집니다. 또한 데이터를 요청했을때 서버는 json과 같은 형식의 응답을 하기 때문에 부담이 적습니다. 하지만 맨 처음 렌더링할때 사실상 html에는 내용이 비어있기 때문에 크롤링이 안된다는
단점이있습니다.
클라이언트사이드렌더링이 누가봐도 효율적인데, 특히 seo에 대한 문제가 있어보입니다. 이를 해결하기 위해 Next.js라는 리액트 프레임워크를 사용하게 됩니다. 처음 로딩은 서버사이드렌더링으로 하고, 즉 검색에 대한 문제를 해결하고, 후에 클라이언트 사이드 렌더링으로 서버 부담의 문제를 해결합니다.
reference
