CSR vs. SSR
1. CSR(Client Side Rendering)
CSR은 서버로부터 받은 HTML, CSS, Javascript파일을 browser side에서 렌더링하는 방식입니다. React나 Angular등 modern frontend frameworks로 만들어진 어플리케이션이 이 방식을 사용합니다.
1.1 CSR 순서
-
유저가 브라우저에 www.naver.com(예시)를 입력하면, 서버는 빈HTML파일을 유저에게 보내면서 CSS, Javascript 등 렌더링에 필요한 파일을 함께 보냅니다.
-
모든 자바스크립트 파일이 다운로드 될 때까지 유저는 빈 화면을 보게 됩니다. 자바스크립트 다운로드가 완료되면, 모두 컴파일 됩니다.
-
그 이후 API 등 디스플레이에 필요한 추가 데이터들을 호출하고, 동적 웹페이지를 완성합니다.
1.2 CSR의 장점
- 페이지 일부의 ui 변경이 필요할 때, 전체 ui를 렌더링 할 필요가 없다는 장점이 있습니다. 전체를 다시 렌더링해야 하는 SSR과 비교해 빠르고 효율적입니다.
1.3 CSR의 단점
- 초기 로딩시 렌더링에 필요한 Javascript 파일을 모두 받아야 하기 때문에, 초기 로딩이 느립니다.
- 서버에서 받은 HTML파일은 빈 파일이기 때문에, 페이지 캐싱이 잘 안된다는 문제점이 있습니다.
- SEO(Search Engine Optimization) 최적화가 어렵습니다. 우리가 어떤 검색어를 입력하면, 검색엔진이 가장 적합한 사이트를 찾기 위한 작업을 진행합니다. 그런데 CSR을 이용한 사이트는 초기 HTML이 빈 페이지이기 때문에 엔진이 페이지 안의 내용을 파악하기 어렵습니다.(그러나 최근 google은 prerender IO 등으로, 우리나라의 naver의 경우 SPA 사이트의 수집 및 색인을 지원하고 있다고 합니다.)
2. SSR(Server Side Rendering)
- SSR은 CSR과 달리 서버에서 웹페이지를 렌더링하는 방식입니다.
2.1 SSR 순서
-
유저가 서버로 요청을 보내면, server는 데이터까지 모두 포함하여 HTML을 구성한 후 이를 client로 보냅니다.
-
HTML파일을 받지만 자바스크립트가 실행되기 전으로 유저는 interaction이 불가능한 웹사이트를 보게 됩니다.
-
브라우저가 자바스크립트 파일을 다운로드 받아 실행합니다.
-
유저가 이용할 수 있는 웹사이트가 됩니다.
2.2 SSR 장점
- CSR과 달리 검색엔진 최적화(SEO)가 가능합니다.
- 초기 로딩시 빈 html이 아닌 렌더링된 html을 보내기 때문에 유저는 초기 로딩이 빠르다는 것을 경험할 수 있습니다. 인터렉션을 위해 자바스크립트가 준비되는 동안 사용자가 사이트 내 컨텐츠를 이용할 수 있습니다.
2.3 SSR 단점
- 페이지 이동시 필요한 html 파일을 매번 불러오기 때문에 전체 ui가 re-rendering되는 불필요한 작업이 진행됩니다. 유저 입장에서는 초기 로딩이 빠르지만, 페이지 이동시 로드가 느리다는 것을 경험하게 됩니다.
- 불필요한 렌더링으로 서버 부하 등을 경험할 수 있습니다.
Next.js
CSR은 초기 로딩 속도가 느리고 SEO에 취약하다는 단점이 있습니다. SSR은 불필요한 렌더링이 된다는 장점이 있습니다.
이 두가지 단점을 해결하고 두 방식의 장점을 살리기 위해 등장한 것이 Next.js입니다.
Next.js는 첫 로딩시 server에서 데이터가 채워진 html을 렌더링해 client로 보내 SEO 최적화를 해결하고, 첫 로딩 이후에는 필요한 부분만 re-rendering하는 CSR방식을 이용해 서버 부하를 줄이도록 했습니다.
참고사이트:
https://reactjs.org/docs/create-a-new-react-app.html#nextjs
https://nextjs.org/learn/basics/create-nextjs-app
https://www.blog.duomly.com/client-side-rendering-vs-server-side-rendering-vs-prerendering/
