290570
Spring/SpringBoot, CSR/SSR 본문
#Spring
- Application Framework
*Framework 란?
- Application 개발 위한 다양한 요소 제공해주는 틀
(Library 와 혼동 유의 - Library는 Application 코드 작성 시 활용하는 도구)
(Framework가 Application을 호출 / Application이 Library를 호출)
#웹의 변화
- 1세대 : 서버를 통해 HTML, CSS 로드 / 페이지 이동 마다 화면 깜빡임
- 2세대 : 동적인 웹사이트 구현 위해 Ajax 등장 / 서버에서 받아온 HTML 위 필요한 데이터만 서버에 재요청하여 변경
- 3세대 : React, Angular, Vue 등의 라이브러리 및 프레임워크 등장
HTML, CSS 자체를 Javascript 통해 동적으로 생성하는 SPA (Single Page Application)이 주를 이룸
Frontend와 Backend 역할 구분 명확해짐
CSR 방식 (Client Side Rendering) = 브라우저에서 Javascript를 읽어 페이지를 렌더링(생성)
- 4세대 : SSR 방식 (Server Side Rendering) = CSR과 반대로 HTML 내용을 모두 채워서 client에게 전송
*CRS (클라이언트 사이드 렌더링)
- 웹 환경을 앱처럼 필요한 부분만 변경 가능
- React, Vue.js 같은 기술 이용해 웹 브라우저의 Javascrip가 페이지 생성 과정을 데이터만 받아와서 처리
- 클라이언트에서 HTML 페이지를 만든다고해서 클라이언트 사이드 렌더링
*SSR (서버 사이드 렌더링)
- 서버에서 HTML 페이지 만들어 클라이언트에게 제공
- 클라이언트(웹브라우저)는 완성된 결과 보여주는 역할만 담당
- JSP, Thymeleaf 등
*CSR <> SSR
- CSR 은 Javascript 통해 페이지 불러오기 때문에 첫 페이지 로딩 시간 느림
- SSR 은 첫 페이지 로딩은 빠르지만, 다른 변경사항 또는 나머지 페이지 불러오는 시간이 더 느림
- CSR 은 SEO(Search Engine Optimization)에 취약 : 검색 잘 안됨, 동적으로 HTML 내용 채워주기 때문
둘의 단점 보완 위해 Next.js 같은 프레임워크 나옴
*CSR이 SEO에 취약하다는게 무슨 의미인지
- CSR은 : 사용자가 웹사이트 접속 시 빈 HTML 문서와 Javascript 파일 브라우저에 전송
브라우저가 받은 Javascript 파일을 실행하여 필요한 데이터를 서버에서 받아오고, 그 데이터를 이용해 HTML 콘텐츠 동적으로 생성 >> 화면에 페이지 보임
즉, CSR은 웹 페이지의 실제 콘텐츠가 서버에서 바로 제공되는게 아니라 브라우저가 Javascript를 실행해서 그려주기 때문에 서버에서 받는 초기 HTML문서는 거의 내용이 없는 빈 페이지
- SEO는 : 구글 같은 검색 엔진에서 웹 페이지가 더 잘 검색되고 상위에 노출되도록 웹페이지 최적화 하는 방법
검색 엔진은 웹 페이지를 크롤링해서 그 페이지의 내용 분석 및 그 정보 바탕으로 검색 순위 반영
즉 CSR 방식에서 초기 HTML이 거의 빈 상태로 전송되고 Javascript가 실행 된 후에 화면에 그려짐
검색 엔진 크롤러 들이 웹페이지를 방문할때 Javascript가 실행되기 전인 경우가 많음
따라서 그 페이지에 HTML이 빈 상태 = 내용이 없는 상태라고 판단할 가능성이 높음
사용자는 Javascript가 실행된 후 컨텐츠가 정상적으로 다 보일지라도 검색엔진은 동적 내용을 읽지 못한상태로 인덱싱에 실패하여 검색 결과 노출되지 않거나 낮은 순위로 노출됨
(*인덱싱 : 크롤링 통해 읽어들인 HTML 정보 DB에 저장)
#Spring 현재
- 과거 HTML/CSS 같은 리소스 응답하는 역할도 했지만, 현재는 Data를 주로 응답해주는 역할
- Data는 보통 JSON 포맷 사용
#Spring vs SpringBoot
Spring - DI, AOP, 트랜잭션 관리, 데이터 접근 등 다양한 기능 제공
SpringBoot - Spring 더 쉽게 사용할수 있도록 돕는 확장도구 / Plumbing 손쉽게 해주는 도구
*Plumbing - 어플리케이션의 기초적인 설정, 밑바탕 작업 의미
(기본 설정값 제공 / xml 파일 대신 properties, yml 같은 간단한 설정 파일 제공 / Tomcat, Jetty 같은 내장 웹 서버 기본적으로 포함 / 트랜잭션 관리 / DB 설정 / 보안 설정 / 종속성 관리)