[next.js] CSR(Clinet Side Rendering)

다른 글들도 그렇지만, 제가 이해한 내용을 바탕으로 정리하는 것이라 이렇게 출처가 없는 글의 경우  보시는 분들은 참고용도로만 쓰시길 바랍니다. 혹시나 잘못된 저의 글로 인해서 누군가 피해를 보는 일은 원치 않습니다.

 

CSR(Clinet Side Rendering)

  클라이언트 사이드 렌더링은 브라우저 렌더링에 필요한 모든 데이터를 서버 측에서 보내주면, 해당 데이터를 브라우저 측에서 받아와서 필요한 HTML, CSS, JS 등의 파일을 생성하여 브라우저 자체적으로 화면을 렌더링하는 방식을 의미합니다.

  따라서 클라이언트 사이드 렌더링 방식의 웹 페이지는 초기  로딩 속도가 다른 렌더링 방식에 비해 느린 편 입니다. 하지만, 초기 렌더링이 느린 만큼, 그 이후에는 빠른 인터랙션 구현이 가능하여, 보다 모바일 앱과 같은 부드럽고 빠른 속도로 웹 페이지 인터랙션이 가능한 장점이 있습니다.

  하지만, CSR의 가장 큰 단점도 있으니, 초기 로딩이 느린 만큼 웹 페이지를 방문하는 사용자의 입장에서는 무한 로딩을 볼 수 있다는 점, 보안상 취약점과 SEO 최적화가 어렵다, CDN 에 캐싱이 어렵다는 단점이 있습니다.

---

보안상 취약점

  CSR 은 기본적으로 브라우저 렌더링에 필요한 모든 데이터를 서버 측에서 받아와서 클라이언트 측에서 해당 데이터를 가지고 브라우저 렌더링에 사용합니다. 즉,  api 키와 같이 보안이 중요한 데이터를 탈취할 위험성이 존재하고, 그 외에도 악의적인 스크립트 코드로 인한 개인정보 유출 등의 문제가 다른 렌더링 방식에 비해 단점으로 다가오기 때문에, 규모가 작고 중요한 정보가 많이 포함되지 않은 웹 앱이 아니라면 큰 규모의 사이트를 CSR 만으로 구성하기에는 많은 제약이 따를 수 있습니다.

---

SEO 최적화가 어렵다.

  검색 엔진은 보통 초기 페이지 로딩 시에 페이지 로딩 속도나 컨텐츠의 양 등을 고려하여 페이지의 랭킹을 결정합니다. 하지만 CSR 은 초기 렌더링 시 화면에 빈 HTML 파일을 보여주기 때문에 해당 사이트가 얼마나 많은 컨텐츠를 가지고 있는지 등에 관한 정보를 검색 엔진 입장에서는 파악하기 어렵습니다.

  따라서 해당 사이트가 아무리 좋은 기술을 사용해서 사용자 친화적으로 만들었다고 해도, 이러한 점들이 제대로 랭킹에 반영되지 않을 가능성이 다분할 수 있습니다.

  즉, 이러한 문제를 개선하기 위한 방식으로 SEO 최적화가 수월한 SSR , SSG, LSR 등의  렌더링 기법을 하이브리드(혼합) 해서 사용하는 방식을 사용 할 수 있습니다.

 

 

---

CDN 캐싱 매우 매우 어려움(사실상 불가능)

  만일 대한민국이라는 나라에서 미국 까지 웹 사이트를 렌더링하기 위한 데이터 교환이 이루어진다면, 즉 먼 거리의 사용자들이 대한민국에 있는 사이트를 이용한다고 가정해 봅시다.  이 때 대한민국과 미국의 거리는 매우 멀기 때문에, 데이터를 서로 직선 형태로 교환하는 것은 시간이 많이 걸리는 일이 될 수 있습니다(안정성이나 보안성, 효율성 측면에서도 문제가 될 수 있구요).

  즉, 대한민국과도 가깝고, 미국과도 가까운 중간에 있는 나라의 네트워크(CDN)를 사용하여 해당 중간 지점의 나라가 중개소 역할(각 나라의 데이터를 저장해두고 필요할 때 각 나라에 전달해주는 역할)을 해준다면, 미국과 대한민국 간의 데이터 교환에 필요한 시간이 많이 단축될 것입니다.  이렇듯, CDN 은 중개소 역할을 하는 네트워크 이며, CDN에 캐싱한다는 것은 각 나라가 필요로 하는 데이터를 저장해둔다는 말과 같습니다.

  하지만, CSR 에서는 CDN에 캐싱하는 것이 생각보다 어렵습니다. CSR은 웹 사이트를 렌더링하는 데 필요한 JS 파일 등이 HTML에 포함되어 있기 때문에, 해당 HTML 파일에 동적으로 변동이 심한 파일이 포함되는 경우 HTML 파일을 다시 생성하여 서버 측에서 클라이언트 측으로 보내줘야 하는 일이 빈번합니다.

  이러한 상황에서 CDN에 캐싱된 HTML 파일은 사용할 수 없게 되고, 혹여나 새로운 HTML 파일을 캐싱한다고 해도 이 또한 빠르게 바뀌는 HTML 파일로 인해 무용지물이 될 것이므로 CDN에 캐싱하는 것은 사실상 불가능하게 됩니다.

---

이러한 단점을 보완하기 위해..

  위와 같은 단점이 심각하다고 여긴 것인지 여러 가지 해결 방안들이 나왔습니다. 그 중 대표적인 것이 SSR, SSG, ISR 등이 있습니다. Next.js 에서는 SSR 을 기본으로 깔고 시작하며, CSR 방식을 포함해서 다양한 렌더링 방식을 혼합하여 보다 최적화되고 품질 높은 웹을 생성토록 지원하고 있습니다.