서버사이드 렌더링 개념

참고: https://www.youtube.com/watch?v=iZ9csAfU5Os(드림코딩)

 

1990년대 까지는 모든 웹사이트들이 Static Stites(정적인 사이트)여서 서버에 이미 만들어진 HTML문서들이 있고 사용자가 브라우저를 통해 www.hello.com 등에 접속하면 서버에 있는 문서를 받아와서 브라우저에서 띄워주는 형태였다. 

 

이때 문제점은, 페이지 내에서 다른 링크를 클릭하면 다시 서버에서 해당페이지의 HTML문서를 받아와서 페이지 전체가 업데이트 되어야해서 사용성이 떨어짐.

 

1996년 <iframe>태그가 개발되어 부분적으로 문서를 받아와 업데이트 할 수 있게됨

 

1998년 XMLHttpRequest(AJAX)가 발명되어 문서를 받아오는게 아닌, JSON같은 작은 데이터 형태로 서버에서 정보를 받아오고 JS를 이용해서 페이지 업데이트 하는 방식이 쓰이게됨.

 

 

SPA(Single Page Application)

• 네이버지도 처럼 사용자가 한페이지에서 머무르면서 필요한(내가 클릭한 곳에 관한 정보)정보만 서버에서 받아 업데이트 하는 방식

 

CSR(Client Side Rendering)

• 컴퓨터 성능이 높아지고 react와 같은 여러가지 JS프레임워크가 나오면서 사용하게 된 방식. html은 텅텅 비어져있고 js파일을 서버로부터 다운받아 보여주는것

문제점

1. 사용자가 첫 화면을 볼때까지 오래걸린다
2. html파일이 비어있기 때문에 SEO에 좋지않다

개선방법

첫 화면의 로딩시간을 줄이기 위해 꼭 필요한 것만 보낼 수 있는 방법을 고민한다.

 

 

SSR(Server Side Rendering)

• CSR방식의 문제점때문에 도입되게 됨.

사이트에 접속하면 서버에서 필요한 데이터를 모두 가져와서 HTML파일을 만들어 동적으로 제어할 수 있는 소스코드 일부(JINJA 템플릿)와 함께 클라이언트에게 전달. 받아온 html파일을 바로 사용자에게 보여줄 수 있음.

 

장점

1. CSR을 사용했을 때보다 첫페이지 로딩이 빨라짐
2. 모든 컨텐츠가 html에 들어있기 때문에 SEO에 더 나은 결과를 보여줌

문제점

1. Blinking 이슈가 존재한다 (사용자가 클릭하게되면 전체 웹사이트를 서버에서 다시 받아오기 때문에 user experience가 좋지 않음)
2. 사용자가 많을 수록 서버에 과부하가 걸리기 쉬움
3. 사용자가 빠르게 웹사이트를 볼 수는 있지만 JS가 마저 다운받아지지 않았을 경우에는 사이트를 클릭해도 반응이 없을 수 있음. TTV(Time to View) != TTI(Time to Interact)

 

SSG(Static Site Generation)

• CSR과 SSR을 혼합해서 사용하는 방식.
• 예를들어 React는 CSR 방식에 특화된 프레임워크이지만 Gatsby라는 라이브러리를 사용하면 정적으로 미리 문서를 만들어 서버에 배포해두는 것이 가능하다. Next.js를 사용해서도 가능하다.