4.1.1 싱글 페이지 애플리케이션의 세상
싱글페이지 애플리케이션이란?
렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스트립트에 의존하는 방식을 의미
- 실제 html 코드를 봤을 때 body 태그 내부에 아무런 내용이 존재하지 않지만,사이트 렌더링에 필요한 내용을 자바스크립트 코드로 삽입하여 사용한다.
- 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API 를 기반으로 모든 작동이 이뤄진다
- 단점: 최초에 로딩해야 할 자바스크립트 리소스가 커진다
- 장점: 한번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아 올 일이 적어져 좋은 UI/UX 를 제공
싱글페이지 렌더링 방식의 시작 & JAM 스택의 등장
1) 과거 PHP나JSP를 기반으로 웹 애플리케이션이 대부분 서버사이드 렌더링으로 동작
2) CommonJS 와 AMD 등장으로 자바스크립트 모듈화
3) 이후 자바스크립트에서도 MVx프레임워크 구현 -> 자바스크립트의 영역 커짐
4) React,Vue,Angular 라는 자바스크립트 프레임워크가 등장 했다.
5) 기존 LAMP(Linux,Apache,MySQL,PHP/Python) 스택 기반 SSR 개발에서 JAM(JavaScript,API,Markup)스택 기반 CSR 개발이 인기를 끌기 시작했다.
📌 JAM 스택은 프론트엔드 개발자들에게 좀 더 간편한 개발 경험을 제공했고, 더욱 간편하게 웹 애플리케이션을 만들 수 있게 되었다.
4.1.2 서버 사이드 렌더링이란?
최초에 사용자에게 보여줄 페이지를 서버에서 렌더링해 빠르게 화면을 제공하는 방식
- 서버 사이드 렌더링의 장점
- 최초 페이지 진입이 비교 빠르다.
- 일반적으로 서버에서 HTTP 요청을 수행하는것과 HTML을 문자열로 미리 그려서 내려주는 것이 클라이언트에서 작업하는 것 보다 빠름
- 검색 엔진과 SNS 공유 등 메타데이터 제공 쉽다.
- 검색 엔진 로봇은 HTML을 다운로드하고, 자바스크립트 코드는 실행 안함
- HTML 페이지 내부의 오픈 그래프, 메타 태그 정보를 기반으로 정보 수집
- 검색 에진에 제공할 정보를 서버에서 가공해서 HTML 응답으로 제공할 수 있음으로 검색 엔진 최적화에 용이
- 누적 레이아웃 이동이 적다
- 누적 레이아웃(Cumulative Layout Shift) : 사용자에게 페이지를 보여준 후 늦게 HTML 정보가 추가,삭제되어 화면이 덜컥 거리는 것 같은 부정적 사용자 경험을 의미
- 서버 사이드 렌더링은 API 요청이 완전히 완료된 이후 페이지 제공하기에 이러한 문제에 자유로움
- 사용자의 디바이스 성능에 비교적 자유롭다
- 자바스크립트 리소스 실행은 디바이스에서만 실행되므로 절대적으로 사용자 디바이스 성능에 의존적
- 보안에 좀 더 안전하다
- 싱글 페이지 렌더링은 애플리케이션의 모든 활동이 브라우저에 노출됨
- 인증 혹은 민감한 작업 서버 수행, 결과만 브라우저에 제공
- 최초 페이지 진입이 비교 빠르다.
- 서버 사이드 렌더링의 단점
- 소스코드를 작성할 때 항상 서버를 고려해야 한다
- 브라우저 객체(window,sessionStorage)등은 서버에서 사용 안됨
- 클라이언트 실행 코드가 많아질수록 서버 사이드 렌더링의 장점은 잃는다
- 적절한 서버가 구축돼 있어야 한다
- 사용자의 요청을 적절하게 대응할 수 있는 물리적 가용량 확보, 복구 전략 필요
- 서비스 지연에 따른 문제
- 싱글 페이지 애플리 케이션은 로딩중 안내 시 사용자 기다릴 여지 있음
- 페이지에 대한 렌더링 작업이 끝나기 전까지 사용자에게 어떤 정보도 제공할 수 없음
- 소스코드를 작성할 때 항상 서버를 고려해야 한다
4.1.3 SPA와 SSR을 모두 알아야 하는 이유
- 서버 사이드 렌더링 역시 만능이 아니다
- 웹 페이지에서 사용자에게 제공하고 싶은 내용이 무엇인지, 우선순위에 따라 페이지의 내용을 보여줄 지를 잘 설계하는 것이 중요
- 싱글 페이지 애플리케이션과 서버 사이드 렌더링 애플리케이션
- 멀티 페이지 애플리케이션에서는 라우팅으로 인한 문제를 해결하기 위한 다양한 API 브라우저가 추가되고 있다
- 페인트 홀딩(Paint Holding) : 같은 출처(origin) 에서 라우팅이 일어날 경우 화면을 잠깐 하얗게 띄우는 대신 이전 페이지 모습 보여주는 기법
- back forwad cache : 브라우저 앞으로 가기, 뒤로가기 실행 시 캐시된 페이지를 보여주는 기법
- Shared Element Transitions: 페이지 라우팅이 일어났을 때 두 페이지에 동일 요소가 있다면 해당 콘텍스트를 유지해 부드럽게 전환되게 하는 기범
- 위 기법들을 싱글 페이지에서도 구현 가능하나 서버에서 렌더링되는 멀티 페이지 애플리케이션이 더 나은 경험을 제공한다
- 멀티 페이지 애플리케이션에서는 라우팅으로 인한 문제를 해결하기 위한 다양한 API 브라우저가 추가되고 있다
- 현대 서버 사이드 렌더링
- 최초 진입 시에는 서버 사이드 렌더링 방식으로 서버에서 완성된 HTML을 제공 받고, 이후 라우팅에서는 서버에서 내려 받은 자바스크립트를 바탕으로 마치 싱글페이지 애플리케이션처럼 작동하도록 하는 프레임워크들이 존재 두 가지 장점을 완벽하게 취하는 제대로 된 웹서비스를 구축 가능하다
왜가 디폴트값인 프론트엔드 개발자