[Web] 웹 페이지 렌더링 방식 (CSR, SSR, SSG, ISR)

 

 

렌더링의 종류

 

목차

1. 서론
2. SSR (Server-Side Rendering)
3. CSR (Client-Side Rendering)
4. SSG (Static Site Generation)
5. ISR (Incremental Static Regeneration)
6. 결론
7. 참고사이트

 

서론

리액트가 클라이언트 사이드 렌더링인 것을 알고 있었다. 그래서 첫 접속 했을 때 모든 js파일을 다운로드하고 웹 사이트를 보여주는 방식이라고 알고 있었다. 하지만 더 자세히 알지 못했고 Nextjs가 나오면서 렌더링 방식들을 정리하는 것이 좋을 것이라 생각했다.. 각 페이지마다 전략적으로 렌더링 방식을 적용할 수 있기에 이번 기회로 SSR, CSR, SSG, ISR에 대해 알아보자

 

 

SSR (Server-Side Rendering)

SSR의 특징

서버 측 렌더링 (SSR)은 서버에서 HTML 콘텐츠를 생성하여 클라이언트로 전송하는 방식을 말합니다.

 

mdn 문서에 SSR에 대한 정의를 위의 말로 표현하고 있다.

사용자의 요청하는 것에 따라 서버에서 Html을 브라우저로 전송하는 방식이다.

 

장점

1) 첫 로드 시 CSR보다 비교적 빠른 로딩 속도를 가지고 있어 콘텐츠를 빠르게 볼 수 있다.

2) 서버에서 html을 보내 렌더하기에 온전한 구조를 가지고 있습니다. 이에 따라 SEO에 좋은 영향을 준다.

 

단점

1) 작은 부분을 업데이트 하더라도 전체페이지를 서버에 요청하므로 서버에 부하가 있을 수 있다.

2) 전체페이지를 받아오므로 화면 깜빡임으로 인해 사용자 경험이 좋지 않을 수 있다.

 

사용처 

SEO가 중요한 회사 소개 사이트나 블로그, 이커머스 등의 사이트에 적합하다.

 

 

CSR (Client-Side Rendering)

CSR 동작 방식

클라이언트 측 렌더링(CSR)은 브라우저에서 JavaScript를 사용하여 HTML 콘텐츠를 생성하는 방식을 말합니다.

 

mdn 문서에 CSR에 대한 정의를 위의 말로 표현하고 있다.

CSR은 초기 렌더 시에 html, javaScript파일을 받아 브라우저에서 실행하며 이후 컨텐츠를 업데이트하는 경우 부분적으로 서버에 요청하여 전체 페이지가 변경되는 것이 아닌 일부분만 업데이트가 된다.

 

장점

1) 첫 로드되면 모든 javaScript 번들 파일을 다운로드받아 페이지 전환 시 서버에서 받아오는 시간을 줄여 부드로운 사용자 경험을 줄 수 있다.

2) 서버에 요청 시 필요한 부분만 변경되기에 서버에 부하가 SSR에 비해 비교적 낮다.

 

단점

1) 첫 로드시에 모든 javaScript 번들링된 파일을 다운로드 받기에 초기 로딩 시간이 길어진다. javaScript 실행 전까지 DOM이 없기 때문에 빈화면 또는 로딩화면이 길어질 수 있다.

2) 검색 엔진 크롤러가 자바스크립트를 실행하지 못하는 경우 콘텐츠를 제대로 인식하지 못할 수 있다. (SEO에 불리함)

 

사용처

회사 내에서 사용하는 ERP나 검색 상위 노출이 되지 않아도 되는 어드민 페이지 등에 사용할 수 있다.

 

 

 

SSG (Static Site Generation)

SSG 프로세스

SSG는 빌드 시점에 HTML을 미리 생성해두는 방식이다.

사용자가 요청 시 서버에서 미리 생성된 HTML파일을 그대로 전송한다.

 

장점

1) 미리 생성된 HTML 파일을 전송하므로 로딩 속도가 매우 빠르다.

2) 서버 측 로직이 없어서 보안이 뛰어나다.

 

단점

1) 변경사항을 반영하기 위해서는 다시 빌드를 해야하는 번거로움이 있다.

2) 사용자별 맞춤 페이지나 실시간 데이터를 보여주기에 어렵다.

 

사용처

업데이트가 자주 이루어지지 않은 기업 웹사이트, 블로그 등이 있다.

 

 

 

ISR (Incremental Static Regeneration)

ISR의 장단점

Next.js를 사용하면 사이트를 빌드한 후 정적 페이지를 생성하거나 업데이트할 수 있습니다. Incremental Static Regeneration (ISR)을 사용하면 전체 사이트를 재빌드할 필요 없이 페이지별로 정적 생성을 사용할 수 있습니다.

 

ISR은 SSG의 단점을 보완한 방식으로 SSG의 빠른 속도를 유지하면서 데이터를 주기적으로 업데이트할 수 있게 해준다.

 

장점

1) SSG 장점을 가지고 있어 빠른 초기 로딩 속도와 높은 보안성을 가지고 있다.

2) 일정 시간 간격으로 HTML파일을 재 생성하므로 콘텐츠 업데이트를 비교적 쉽게 처리할 수 있다.

 

단점

1) HTML파일이 다시 생성되기 까지 데이터 업데이트 간 딜레이가 발생할 수 있다. (업데이트 이전의 컨텐츠가 표시될 수 있다)

2) SSG에 비해 revalidate 시간 설정 등 추가적인 설정이 필요하다

3) 특정 사용자가 업데이트 직전의 페이지를 보고 다른 사용자가 업데이트 이후 페이지를 보는 상황인 데이터 일관성 문제가 발생할 수 있다.

 

사용처

실시간 처리까지 진행되지 않는 블로그나 뉴스페이지 정도가 있을 것이다.

 

 

결론

어떤 렌더링 방식을 선택해야할까

 

렌더링 방식은 하나만 정답이 있는 것이 아니라 각 웹사이트의 성격에 맞게 전략적인 선택이 중요한 것 같다.

Next.js같은 프레임워크는 페이지 단위로 SSR, CSR, SSG, ISR을 섞어서 사용할 수 있기 때문에 상황에 따라 최적의 전략을 선택할 수 잇을 것이다.

 

 

참고사이트

https://www.educative.io/answers/ssr-vs-csr-vs-isr-vs-ssg

SSR vs. CSR vs. ISR vs. SSG

https://sangminnn.tistory.com/entry/%EB%8D%94-%EC%A2%8B%EC%9D%80-%EC%9C%A0%EC%A0%80-%EA%B2%BD%ED%97%98%EC%9D%84-%EC%9C%84%ED%95%9C-Streaming-SSR

더 좋은 유저 경험을 위한 Streaming SSR

https://medium.com/@khushbuchoksi/what-are-csr-ssr-ssg-and-isr-d59201e3b060

What are CSR, SSR, SSG, and ISR?

https://developer.mozilla.org/en-US/docs/Glossary/SSR

Server-side rendering (SSR) - Glossary | MDN

https://developer.mozilla.org/en-US/docs/Glossary/SSG

Static site generator (SSG) - Glossary | MDN

https://developer.mozilla.org/en-US/docs/Glossary/CSR

Client-side rendering (CSR) - Glossary | MDN

https://nextjs-ko.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

Incremental Static Regeneration (ISR) – Nextjs 한글 문서

https://www.napkin.ai/

Napkin AI - The visual AI for business storytelling