SPA(Single Page Application)
하나의 페이지로 이루어진 홈페이지
하나의 페이지로만 구성되어 있어 CSR에 적합
데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침되지 않고 다른 페이지로 넘어가지 않음
Vue, Angular, React
PHP나 JAVA로 정적인 페이지 하나만 구성된 홈페이지라면 SPA
MPA(Multi Page Application)
여러 개의 페이지로 이루어진 홈페이지
여러 개의 페이지로 구성되어있으므로 보통 클라이언트에서 서버에서 요청을 보내면 렌더링하고 클라이언트에게 응답을 주는 방식인 SSR 환경 사용
CSR(Client Side Rendering)
초기 로드 시 빈 HTML과 모든 로직이 담겨있는 JS를 다운로드
빈 HTMLdp JS를 이용하여 DOM을 동적으로 생성하여 그려냄
장점
JS를 이용하여 동적으로 DOM을 그리기 때문에 원하는 내용만 업데이트 하기 때문에 서버 부담이 적음
단점
HTML 파일을 하나만 받아오기 때문에 각 페이지에 대한 정보를 담기 힘들어 SEO에 취약함
최근 구글봇 성능이 향상해서 CSR에서도 SEO를 구분할 수 있다고 하지만 그래도 MPA를 더 선호)
모든 로직이 담겨있는 JS를 다운로드하기 때문에 첫 진입 시 로딩 속도가 김, 브라우저가 JS를 실행하고 이를 감당할 CPU 필요
- CSR의 검색엔진 최적화
React + Gatsby, React + Next.js, Angular + Universal
애플리케이션을 정적 페이지로 만들어 서버에 배포하여 SEO를 챙기고 있음(SSG)
SSR(Server Side Rendering)
서버에서 렌더링하여 완성된 HTML 파일을 로드
클라이언트에서 요청할 때마다 각 상황에 맞는 THTML 파일을 넘겨주기 때문에 여러 가지일 수밖에 없음 => MPA와 밀접
장점
클라이언트에서 요청한 페이지의 HTML을 다운로드하기 때문에 CSR보다 초기 진입 시 로딩이 빠름
서버에서 렌더링 후 개별 페이지를 넘겨받는 것이므로 각 페이지에 대한 정보를 입력하기 쉬움 > CSR보다 SEO 향상 가능
단점
링크 이동 클릭 시 새로운 HTML 파일 자체를 서버에서 받아오기 때문에 화면 깜빡임 현상이 있음
(부분 업데이트를 하는 CSR과는 달리 새로운 HTML을 받아옴)
헤더, 푸터같은 중복된 내용도 다시 렌더링하여 받음 > 페이지 이동은 SSR이 더 느림
JS다운이 늦어진다면 기능이 아예 동작하지 않음(SSR은 HTML을 먼저 다운받아 화면 확인 가능)
SSG(Static Site Generation)
빌드 시에 미리 HTML을 생성하고 캐싱하여 다음 요청에 재사용하는 방식으로 동작
정적 페이지를 생성하므로 초기 로딩이 빠르고 SEO에 유리하며 ISR(Incremental Static Regeneration)과 함께 동적 데이터 업데이트를 지원
ISR(Incremental Static Regeneration)
SSG의 기능을 확장하여 동적 데이터를 캐싱하고 업데이트할 수 있는 방법을 제공
정적 페이지를 캐싱하면서 동적 데이터를 업데이트할 수 있어 SEO와 성능을 모두 향상시킴
Nest JS
Node.js를 기반으로 한 서버사이드 웹 애플리케이션을 구축하기 위한 프레임워크
BE
- 모듈 기반 아키텍처를 사용하여 코드를 모듈화하고 재사용성을 높이며, 큰 규모의 애플리케이션을 쉽게 관리 가능
- 의존성 주입(Dependency Injection) 패턴을 채택하여 컴포넌트 간의 의존성을 쉽게 관리하고 모듈 간에 서비스를 공유가능 => 테스트 용이성과 코드의 가독성을 향상시킴
- Express 및 Fastify 등 웹 프레임워크를 기반으로 동작하여 웹 서버를 빠르고 안정적으로 사용가능
- Middleware를 사용하여 요청을 처리하고 가공가능 => 로깅, 인증, 권한 부여 등의 기능을 쉽게 구현 가능
- GraphQL 및 REST 지원
- Websocket 지원
- CLI를 통한 컨트롤러, 서비스, 모듈 자동 생성 가능
- 강력한 에러 처리, 테스팅, 확장성
FE
-
빠르게 페이지를 로드하기 위한 Code splitting(모든 코드를 호출하는 SPA, 코드를 자동으로 분할해서 해당 페이지에 필요한 것만 렌더링)
-
페이지를 기반으로 한 Client Side Rendering 제공
-
개발 환경에서 자동으로 Fast Refresh가 됨
-
file-system based 라우팅(pages) + Dynamic Routing(pages/[id]/[name].js)
-
Link를 통해 페이지를 새로 고침하지 않고 이동 가능(import Link from 'next/Link', Link href=
/${id}) -
build 시점에 Link 컴포넌트가 브라우저에 표시될 때마다 백그라운드에서 링크된 페이지의 코드를 자동으로 설정(SPA와 비슷한 페이지 전)
-
Head 컴포넌트를 통해서 페이지별 title 설정 가능 + Metadata Contents >> SEO(검색엔진최적화) 적합
요약
Nest.js는 CSR, SSR 방식의 장점을 모두 가지고 있음 => SSG와 SSR을 모두 지원
즉, 초기로딩 시간도 짧고, SEO도 유리하고, 페이지 간 전환 속도도 빠르다
사용자가 초기에 server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 된 정적페이지를 클라이언트에 보낸다.
클라이언트에서 JS를 다운받고 React를 실행한다.
React를 로딩하는 동안 사용자는 pre-rendering된 페이지를 보게되고, React가 로딩이 되면 pre-rendering된 페이지와 연결되어 일반적인 React app처럼 작동하게 된다(hydration)
사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR 방식으로 server가 아닌 클라이언트에서 처리한다.
SSG(Static-site generation)
getStaticProps 함수를 사용하여 페이지가 최초로 요청될 때 한 번만 실행되는 '빌드 타임(build Time)'에 데이터를 불러와 페이지를 미리 만듦
정적 파일로 저장되어 다음에 같은 요청이 들어올 때는 캐싱된 페이지를 보여주기 때문에 속도가 빠름
상호작용해서 데이터가 변하지 않는 페이지를 미리 서버에 생성 > 요청에 따라 재사용하는 캐싱을 사용
static pre-rendering된 페이지는 자바스크립트가 disable되어도 볼 수 있음
build 단계 때 fetching data를 가져와 페이지를 prerendering
build 이후 호출되는 데이터가 변경되더라도 prerendering된 페이지는 값이 변경되지 않음
but 변화가 잦은 데이터는 사용불가능 => SWR 라이브러리 활용
ISR(Incremental Static Regeneration)
기본적으로 Nestjs는 pre-rendering(SSR)
정적 생성은 build 시에 html을 생성(미리 만들어두는 경우)
SSR은 요청시 html을 생성(항상 최신 상태를 유지해야하는 경우)
Pre-Rendering
initial load html
js 동작만 없는 html을 먼저 화면에 보여줌. 아직 js 파일이 로드되기 전이므로 Link와 같은 컴포넌트는 동작하지 않음
hydration
initial load에서 html을 로드한 뒤 js 파일을 서버로부터 받아 html을 연결시키는 과정
pre-rendering이 존재하지 않는다면 JS전체가 로드되어야 하기 때문에 최초 load에서 사용자에게 보여지지 않음
SSG의 Pre-Rendering
getStaticProps: 페이지 내부에서 외부 데이터를 사용
getStaticPaths: 페이지의 url에서 외부 데이터를 사용
Reference
