SPA (Single Page Application)
- 과거 SSR 렌더링 방식(페이지 이동시 무조건 서버에서 렌더링)에서 깜빡임 현상으로 사용자 경험에 위배 -> 필요한 요소들만 변경을 위한 단일 페이지에서 랜더링 방식진행
- Node.js 환경과 생태계과 발달하면서 webpack, babel 등장
- Oauth2 Client Secret 노출에 대한 우려
- BFF(Backend For Frontend) 등장
MPA (Multi Page Application)
- 서버에서 렌더링(SSR) - 페이지 첫 및 이동시 페이지 반환
- 템플릿엔진(Thymeleaf, Freemarker, JMustache), JSP
🥪 CSR
- 클라이언트 렌더링 Client Side Rendering의 약자
- 컴퓨터 하드웨어 성능이 좋아져 클라이언트에서 렌더링 시도
렌더링 순서
- Url 진입시도
- 서버에서 API 응답시 비어있는 Html파일 생성 반환
- 클라이언트(웹브라우저)에서 응답 받은 Html파일에 Html, Css 등 적용(메타태그 포함)
- Javascript 페이지 이동기능 사용시 페이지별 Html 응답 방식이 아닌 기존 Html에서 재 렌더링 시도
관련 라이브러리
- 서버와 분리된 별도 클라이언트 javascript 서버 및 프레임워크
- react, vue, angular, svelte 등등
장점
- 페이지 이동시 렌더링 속도가 우수 (클라이언트에서 부분요소만 렌더링)
- 필요한 부분요소만 렌더링하여 깜빡이는 현상 미발생 (사용자 경험에 좋다)
- 서버 부하 감소
단점
- SEO(검색엔진)에서 미노출
- 최초 로딩시간이 가장 오래걸린다 빈 Html 파일, 모든 스크립트 파일(브라우저에서 렌더링 시도를 위해) - 다운로드 받는 과정에서 오버레이 띄우기 필요
- 어플리케이션이 커질수록 최초 로딩시간 더 길어짐
- 사용자 디바이스에 따른 성능폭 발생(옛날 휴대폰 등?)
스크래핑 방법
- Java 사용시 Jsoup 불가능 / Selenium(암시적, 명시적 대기) 가능
용도
🥡 SSR(MPA, SPA)
- 서버 렌더링(Server Side Rendering)의 약자
- 과거 컴퓨터 하드웨어 성능이 좋으편이 아니라 서버에서 렌더링 시도(MPA)
- 현재 컴퓨터 하드웨어 성능이 좋아져 첫페이지 이후 클라이언트에서 렌더링 시도 및 SEO를 위한(SPA) - Universal
관련 라이브러리
- MPA - 템플릿엔진(Thymeleaf, Freemarker, JMustache), JSP
- SPA - Nuxt.js, Next.js, Quasar
렌더링 순서
- Url 진입시도
- 서버에서 API 응답시점에서 렌더링된 Html파일을 생성(Html, Css 파싱 적용된 파일) 반환
- 페이지 이동시 서버에서 렌더링된 Html파일 응답(MPA), 클라이언트에서 부분요소 렌더링(SPA)
장점
- 렌더링된 Html파일 크롤링하여 SEO(검색엔진) 노출
단점
- MPA - 페이지 이동시 서버에서 렌더링형태여서 속도 느림 및 깜빡임(사용자 경험위배)
스크래핑 방법
- Java 사용시 Jsoup 가능 / Selenium 가능
용도
🧆 SSG
- 정적 파일(빌드시) 생성(Static Side Generator)의 약자
- Jamstack 연관(Javascript, Api, Markup 함축 약자)
- CDN(Content Delivery Network) 사용!
- 웹사이트 최초로 생겼을때도 빌드방식으로 생성된건 아니지만 Html, Css 페이지별로 작성해서 노출
렌더링 순서
- Webpack으로 번들링 및 빌드 진행시 페이지별 렌더링된 Html파일(Html, Css 파싱 적용된 파일) 별도 생성
- Url 진입시 이전에 생성된 Html 파일 반환
- 페이지 이동시 이전에 생성된 해당 페이지 Html 파일 반환
관련 라이브러리
- Vue - Nuxt.js, VuePress
- React - Next.js, Gatsby
- Netlify
장점
- CSR, SSR 에 비해 최초 페이지 로딩 속도가 가장 빠르다 (생성 후 파일 반환 형식이 아니라서)
- 페이지 로딩이 일관적이다
단점
스크래핑 방법
- Java 사용시 Jsoup 가능 / Selenium 가능
용도
- 회사 소개 페이지 (빠른 렌더링 속도가 중요<첫 페이지 진입시> - 이탈률 증가 방지)
- 블로그
🌯 추천! 및 참고 자료
드림코딩 - 렌더링 역사 와 설명
얄팍한코딩사전 - CSR, SSR, SSG란
