JS | 서버 사이드 렌더링 VS 클라이언트 사이드 렌더링

[서버 사이드 렌더링 VS 클라이언트 사이드 렌더링]

1. 서버 사이드 렌더링 (SSR)

사용자가 웹페이지에 접속했을 때 서버에 해당 페이지에 대한 정보를 요청한다. 서버 사이드 렌더링은 요청을 할 때마다 새로고침이 발생하여 서버에 요청을 하게 된다.

• 장점
  - 검색 엔진 최적화(SEO)가 가능하다.
  - 초기 렌더링 속도가 빠르다.
  
  
  
• 단점
  - 페이지의 이동에 따라 여러번 렌더링이 될 때 과부하가 올 수 있다.

2. 클라이언트 사이드 렌더링 (CSR)

클라이언트사이드 렌더링은 최초 요청에서만 서버측에서 제공하고 그 이후에 페이지 변경이 일어날 때마다 클라이언트를 통해 렌더링한다. 즉, 사용자가 필요한 부분만 서버에서 로딩하게 된다.

• 장점
  - 사용자가 빠르게 인터랙션 할 수 있다.
  - 페이지에서 필요한 부분만 로딩하기 때문에 효율적이다.
  
  
  
• 단점
  - 검색 엔진 최적화(SEO)가 어렵다.
  - 초기 렌더링 속도가 느리다.
  - 보안문제가 존재한다.

---

🔖 참고

• https://asfirstalways.tistory.com/244
• https://adrian0220.tistory.com/165
• https://medium.com/aha-official/%EC%95%84%ED%95%98-%ED%94%84%EB%A1%A0%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EA%B8%B0-1-spa%EC%99%80-ssr%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EA%B7%B8%EB%A6%AC%EA%B3%A0-nuxt-js-cafdc3ac2053
• https://inuplace.tistory.com/273