SPA, CSR, SSR

hotbreakb·2022년 6월 25일
0

기존 사이트의 문제

  1. 버튼 하나 눌렀을 뿐인데 바뀐 데이터를 보여주기 위해 화면 전체가 깜빡하면서 페이지가 새로 로딩된다.
    • 브라우저에서 값이 바뀌었다는 것을 서버에 알린다.
    • 서버는 바뀐 값을 데이터베이스에 저장한다.
    • 서버는 데이터베이스에서 바뀐 값을 가지고 사이트를 새로 만들어서 브라우저에 전달한다. == SSR
      이것을 ajax로 해결할 수 있었지만, 일일이 프로그래밍하기 귀찮았다.
  2. 서버에서 웹과 앱을 나누어서 다르게 사이트를 만들어서 전송해주었다. 하나만 만들면 될 거 같은데.
    • 서버가 데이터만 보내주는 건 어떨까?😲

➡️ SPA(single Page Application)

SPA

링크를 클릭할 때마다 다른 페이지로 이동하지 않고 같은 페이지에서 자바스크립트로 HTML요소를 동적으로 바꿔준다.

CSR

서버에서 HTML, CSS, Javascript를 브라우저에 전송하면 브라우저에서 알아서 렌더링한다.

  • 서버는 데이터를 주고받는 역할만 하고
  • 브라우저는 직접 화면을 만든다.

예) React, Vue, Angular

문제점

  • 처음에 화면이 로딩되는 속도가 다소 느리다.
    - 브라우저에서 렌더링을 직접하기 때문에 시간이 소요된다.

SSR

Next.js나 Nuxt.js로 만든 웹을 SSR 모드로 돌리기 위해 node.js가 깔린 서버에서 프로젝트를 어플리케이션으로 실행해서 프론트엔드를 배포한다. 페이지 접속 시 바로 나타나야 할 것들을 정해서 서버에서 미리 렌더링해서 보여준다.

SEO(Search Engine Optimization)

검색 엔진은 크롤링으로 웹사이트를 돌아다니며 구조와 컨텐츠를 파악하여 목차와 색인을 만들어두고 사용자에게 적합한 정보를 보여준다.

참고 자료

profile
글쟁이 프론트 개발자, 헬렌입니다.

0개의 댓글