CSR vs. SSR 그리고 Next.js

1. CSR(Client Side Rendering)

CSR은 서버로부터 받은 HTML, CSS, Javascript파일을 browser side에서 렌더링하는 방식입니다. React나 Angular등 modern frontend frameworks로 만들어진 어플리케이션이 이 방식을 사용합니다.

1.1 CSR 순서

1. 유저가 브라우저에 www.naver.com(예시)를 입력하면, 서버는 빈HTML파일을 유저에게 보내면서 CSS, Javascript 등 렌더링에 필요한 파일을 함께 보냅니다.
2. 모든 자바스크립트 파일이 다운로드 될 때까지 유저는 빈 화면을 보게 됩니다. 자바스크립트 다운로드가 완료되면, 모두 컴파일 됩니다.
3. 그 이후 API 등 디스플레이에 필요한 추가 데이터들을 호출하고, 동적 웹페이지를 완성합니다.

1.2 CSR의 장점

• 페이지 일부의 ui 변경이 필요할 때, 전체 ui를 렌더링 할 필요가 없다는 장점이 있습니다. 전체를 다시 렌더링해야 하는 SSR과 비교해 빠르고 효율적입니다.

1.3 CSR의 단점

1. 초기 로딩시 렌더링에 필요한 Javascript 파일을 모두 받아야 하기 때문에, 초기 로딩이 느립니다.
2. 서버에서 받은 HTML파일은 빈 파일이기 때문에, 페이지 캐싱이 잘 안된다는 문제점이 있습니다.
3. SEO(Search Engine Optimization) 최적화가 어렵습니다. 우리가 어떤 검색어를 입력하면, 검색엔진이 가장 적합한 사이트를 찾기 위한 작업을 진행합니다. 그런데 CSR을 이용한 사이트는 초기 HTML이 빈 페이지이기 때문에 엔진이 페이지 안의 내용을 파악하기 어렵습니다.(그러나 최근 google은 prerender IO 등으로, 우리나라의 naver의 경우 SPA 사이트의 수집 및 색인을 지원하고 있다고 합니다.)

 

2. SSR(Server Side Rendering)

• SSR은 CSR과 달리 서버에서 웹페이지를 렌더링하는 방식입니다.

2.1 SSR 순서

1. 유저가 서버로 요청을 보내면, server는 데이터까지 모두 포함하여 HTML을 구성한 후 이를 client로 보냅니다.
2. HTML파일을 받지만 자바스크립트가 실행되기 전으로 유저는 interaction이 불가능한 웹사이트를 보게 됩니다.
3. 브라우저가 자바스크립트 파일을 다운로드 받아 실행합니다.
4. 유저가 이용할 수 있는 웹사이트가 됩니다.

2.2 SSR 장점

1. CSR과 달리 검색엔진 최적화(SEO)가 가능합니다.
2. 초기 로딩시 빈 html이 아닌 렌더링된 html을 보내기 때문에 유저는 초기 로딩이 빠르다는 것을 경험할 수 있습니다. 인터렉션을 위해 자바스크립트가 준비되는 동안 사용자가 사이트 내 컨텐츠를 이용할 수 있습니다.

2.3 SSR 단점

1. 페이지 이동시 필요한 html 파일을 매번 불러오기 때문에 전체 ui가 re-rendering되는 불필요한 작업이 진행됩니다. 유저 입장에서는 초기 로딩이 빠르지만, 페이지 이동시 로드가 느리다는 것을 경험하게 됩니다.
2. 불필요한 렌더링으로 서버 부하 등을 경험할 수 있습니다.

 

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/