CSR - SSR

얼마 전 Vue를 사용해서 프로젝트를 만들어 완성했다.

기본적인 CSR로 개발을 했는데 초기 로딩 속도와 SEO 때문에 SSR 개발을 도와주는 Nuxt를 공부하게 되었다. 그에 앞서 CSR과 SSR을 정리하고자 한다~!

 

1. CSR(Client Side Rendering)

 CSR은 SPA(Single Page Application)에서 쓰이는 방법으로 웹서버(Nginx 등)에서 html과 static 파일 번들을 가져온 후, javascript를 통해 동적으로 Rendering하는 방법이다.

[장점] 동작하는데 데이터 갱신에만 리소스를 요청하므로 서버 부하가 덜하다.

         최초 이후 동작들은 빠르게 Rendering이 가능해서 UX가 뛰어나다.

[단점] 다만 SPA는 초기에 한번에 번들되어 오기 때문에 시간이 좀 걸리는 단점이 있다.

         검색 봇이 최초 페이지에 메타태그만 인식하여 SEO 검색엔진에 필요한 데이터가 캐치가 안된다. (구글은 제외라고 하는... javascript까지 실행은 해준다고 한다.)

 

 

그래서 사용하고자 하는 것이

2. SSR(Server Side Rendering)

 서버로부터 데이터가 포함된 완성 html 파일을 받아와서 보여준다. 웹서에 요청마다 새로고침이 일어남.

[장점] 초기 로딩 속도가 빠르다.

        검색엔진에 대한 SEO가 가능하다.

[단점] 매번 페이지에 새로고침 되기 때문에 UX가 떨어짐

        서버에 부하가 비교적 커진다.

 

그렇다면 어떤게 더 좋은 것인가?

 정답은 없는 것 같다. 각자 장단점이 명확하기 때문에 목적에 맞게 가져다 쓰면 될 것 같다. 나 같은 경우는 한 사이트 내에서 특정 페이지는 그 페이지에서 이동이 없고 특정 페이지에서는 다른 페이지로 이동이 많은 케이스가 있는데 SSR과 CSR을 각각 적용해주면 좋을 듯 하다.

 

 

 

참고

https://velog.io/@namezin/CSR-SSR

https://www.sarah-note.com/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9/posting2/