SPA와 CSR, SSR에 관하여

LikeChoonsik's·2022년 3월 11일
0

React

목록 보기
6/9
post-thumbnail

SPA(Single Page Application)

spa란 말 그대로 한개의 페이지를 가진 어플리케이션이다. 이런 SPA로 개발을 하는 이유는 크게 몇가지가 있다.

  • 페이지 전체 새로고침 방지한다
  • 사용자 친화적이다
  • 초기 렌더링 후 데이터만 받아오기에 서버에 요청이 적다
  • 프론트와 벡엔드의 분리로 업무 분업화 및 협업에 좋다

CSR(Client Side Rendering)

csr이란 클라이언트(사용자)가 요청시 랜더링되는 방식을 뜻한다.
즉, react를 예시로 사용자가 웹페이지를 요청하여 서버에서 html이라는 파일을 클라이언트에게 보내주면 html body안에는 root만 있게되고 이 후에 js파일을 다운 받아 동적으로 화면에 띄워준다. 이런 CSR의 단점은

  • 느리다
  • SEO(Search Engine Optimization)에 좋지 않다
    이 있다. 이런 문제점을 해결하기 위해 SSR이 도입되었다.

SSR(Server Side Rendering)

SSR이란 웹사이트에 접속 시 서버에서 필요한 파일을 모두 만들어 사용자에게 보내주는 방식입니다. 장점으로는

  • CSR보다 속도가 빠르다
  • SEO에 적합하다
    라는 장점이 있지만 단점도 있습니다.
  • 전체적인 웹사이트를 서버에서 다시 받아오는 것과 동일하기에 깜박임 문제가 발생한다
  • 사용자가 많을 수록 서버에 과부하가 걸리기 쉽다
profile
춘식이는 너무 귀엽습니다.

0개의 댓글