기존 사이트의 문제
- 버튼 하나 눌렀을 뿐인데 바뀐 데이터를 보여주기 위해 화면 전체가 깜빡하면서 페이지가 새로 로딩된다.
- 브라우저에서 값이 바뀌었다는 것을 서버에 알린다.
- 서버는 바뀐 값을 데이터베이스에 저장한다.
- 서버는 데이터베이스에서 바뀐 값을 가지고 사이트를 새로 만들어서 브라우저에 전달한다. == SSR
이것을 ajax로 해결할 수 있었지만, 일일이 프로그래밍하기 귀찮았다.
- 서버에서 웹과 앱을 나누어서 다르게 사이트를 만들어서 전송해주었다. 하나만 만들면 될 거 같은데.
➡️ 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)
검색 엔진은 크롤링으로 웹사이트를 돌아다니며 구조와 컨텐츠를 파악하여 목차와 색인을 만들어두고 사용자에게 적합한 정보를 보여준다.
참고 자료