Next에서의 CSR/SSR

 

CSR/SSR in NextJS

 

 

검색 엔진 최적화와 사용자 UX 관점에서, 리액트의 적합한 사용을 알아보자.

1. CSR/SSR

 

Client-Side Rendering(CSR)은 검색 엔진 최적화에서, Server-Side Rendering(SSR)에 비해 큰 단점이 존재한다.CSR은 초기 웹 서버 요청시 빈 HTML과 동적 렌더링을 위한 Javascript를 불러오기때문이다.또한, 서버에서 보내는 리소스들의 양이 많이 때문에 SSR에 비해서 초기 로딩 속도가 느리다.검색 엔진 최적화(SEO)와 초기 저하된 로딩 속도를 감수 할 수 있으면 CSR을 사용한다.페이지 렌더링시 기존 동적 요소들을 이용하기 때문에 사용자 경험이 좋은편이다.

 

SSR은 페이지 렌더링 또는 라우팅마다 매번 완성된 HTML을 가져오기 때문에, SEO와 초기 로딩 속도 둘 모두의 장점을 취할 수 있다.하지만 증가된 서버 요청 횟수로 서버 부하의 문제가 생긴다.

 

2. NextJS

 

NextJS 프레임워크는 CSR과 SSR 둘 모두의 장점을 어느정도 갖고 오는 방법을 제공한다.

블로그와 같이 정적인 컨텐츠를 제공하고, 또한 실시간 피드를 제공하는 서비스에서는 이 두 가지 방식을 적절하게 사용해야 한다.

1. 렌더링 되는 첫 페이지는 SSR 방식을 사용하여 채워져있는 HTML을 제공한다.

2. 그 이후 페이지간 이동시 선택적으로 CSR을 사용해 동적 렌더링을 위한 Javascript같은 사이즈가 큰 리소스들을 모두 받아온다.