데이터 렌더링에 따른 분류(SPA, CSR, SSR, SSG, ISR)

 

 

웹 애플리케이션의 데이터 렌더링 방식에 따른 분류이다.

 

1. 클라이언트 렌더링 CSR (Client-Side Rendering):

- 특징: 초기에는 빈 HTML이 클라이언트로 전송되고, 이후 JavaScript를 사용하여 동적으로 페이지를 렌더링하는 방식

- 쉽게, React로 구현한 사이트처럼, 서버에 데이터를 요청해서 받은 값을 JavaScript와 같은 것으로 View를 그리는 것

 

- 장점

• 컨텐츠가 항상 최신이다.
• 로딩 화면이 있다.

- 단점

• 첫 페이지 로딩이 느리다.
• SEO에 친화적이지 않다.

1-2) SPA(Single Page Application)

- 특징 : 단일 페이지 사이트, 서버로부터 새 페이지(html)를 불러오지 않고 현재 페이지를 동적으로 변경하는 디자인 패턴

- SPA가 CSR의 한 종류라고 볼 수 있다.

- 장점

• 화면 이동이 빠르다
• 컨텐츠가 항상 최신이다.
• 트래픽이 감소한다.

- 단점

• 첫 페이지 로딩이 느리다.
• SEO에 친화적이지 않다.

 

2. 서버 렌더링 SSR (Server-Side Rendering):

 

- 특징: 클라이언트에서 요청을 하면, 서버에서 초기 HTML을 생성하여 클라이언트로 전송하고, 이후에는 클라이언트 측에서 동적으로 페이지를 업데이트하는 방식

- 쉽게, 예전 JSP처럼, 클라이언트에서 서버에 요청을 하면 값을 담은 View 페이지를 응답하는 형태(?)

 

- 장점

• CSR에 비해 첫 페이지 로딩이 빠르다
• SEO에 친화적이다.

- 단점

• 첫 페이지 로딩 이외엔 속도가 느리다

 

3. 그 외(?)

 

3-1) SSG (Static Site Generation):
- 특징: 빌드 시점에 미리 페이지를 생성하여 정적 파일로 저장하고, 클라이언트에 전달하는 방식. 서버에서 동적으로 렌더링하지 않음.

 

- 장점

• SEO에 친화적이다.
• TTV가 빠르다
• 보안이 뛰어나다
• CDN에 캐시가 된다.

- 단점

• 데이터가 정적이다

3-2) ISR (Incremental Static Regeneration):
- 특징: 정적 사이트를 미리 생성하되, 일부 페이지는 빌드 후에도 계속해서 동적으로 갱신할 수 있는 방식. 필요할 때마다 정적 페이지를 다시 생성하여 업데이트.

 

- 장점

• SSG의 장점
• 컨텐츠가 주기적으로 업데이트된다.
• SEO에 친화적이다.

- 단점

• 항상 최신 정보는 아니다

 

 

Reference

https://velog.io/@yena1025/Next.js%EC%9D%98-%EB%8B%A4%EC%96%91%ED%95%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D#%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81-ssr