웹페이지 렌더링 방식

웹 페이지 렌더링 방식에는 크게 CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링), SSG(정적 사이트 생성) 세 가지가 있으며, 각 방식은 특징과 장단점이 달라 사용 상황에 따라 적절한 방식을 선택해야 합니다.

CSR(클라이언트 사이드 렌더링)

클라이언트 사이드 렌더링은 HTML 파일을 받아와서 Client(웹 브라우져)측에서 렌더링이 일어나는 방식입니다.

즉, 웹브라우저에서 자바스크립트로 HTML을 만드는 것입니다.

특징:

• 브라우저(클라이언트)에서 JavaScript를 사용하여 페이지를 렌더링합니다.
• 서버는 초기 HTML 구조와 JavaScript 파일만 제공하고, 데이터는 JavaScript를 통해 비동기적으로 가져옵니다.
• SPA(Single Page Application)에서 주로 사용됩니다.

장점:

• 초기 로딩 이후 페이지 전환이 빠르고 사용자 경험이 뛰어납니다.
• 서버 자원 사용량이 적습니다.
• 풍부한 사용자 인터랙션을 제공할 수 있습니다.

단점:

• 초기 로딩 속도가 느릴 수 있습니다.
• 검색 엔진 최적화(SEO)에 불리합니다.
• JavaScript가 비활성화된 환경에서는 페이지를 볼 수 없습니다.

사용 상황:

• 사용자 인터랙션이 많은 웹 애플리케이션 (예: 웹 게임, 소셜 미디어)
• SEO가 중요하지 않은 내부 관리자 페이지

SSR(서버 사이드 렌더링)

서버사이드 렌더링은 서버측에서 렌더링하는 방식입니다. 서버에서 브라우저에 보일 HTML 파일을 미리 준비해서 응답해 주는 형식입니다.

즉, 서버에서 HTML을 만들고 리스폰스로 보내는 것입니다.

특징:

• 서버에서 페이지를 렌더링하여 완전한 HTML을 클라이언트에게 전달합니다.
• 클라이언트는 서버에서 받은 HTML을 바로 보여줄 수 있습니다.
• 초기 로딩 속도를 개선하고 SEO 문제를 해결하는 데 유리합니다.

장점:

• 초기 로딩 속도가 빠릅니다.
• SEO에 유리합니다.
• JavaScript가 비활성화된 환경에서도 콘텐츠를 볼 수 있습니다.

단점:

• 서버 자원 사용량이 많습니다.
• 페이지 전환 시마다 서버에 요청을 보내야 하므로 사용자 경험이 CSR보다 떨어질 수 있습니다.

사용 상황:

• SEO가 중요한 웹 사이트 (예: 블로그, 뉴스 사이트, 쇼핑몰)
• 초기 로딩 속도가 중요한 웹 사이트

SSG(정적 사이트 생성)

클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가 요청을 받으면 이미 완성된 파일을 단순히 반환하여 브라우저에 보여지게 됩니다.

즉, 미리 HTML 파일을 만들어서 서버를 배포하는 것입니다.

특징:

• 빌드 시점에 모든 페이지를 미리 렌더링하여 정적 HTML 파일을 생성합니다.
• 서버는 미리 생성된 HTML 파일만 제공합니다.
• 서버에 요청이 들어올때 마다 페이지를 렌더링 하는것이 아닌 빌드타임에 페이지를 랜더링 하여 서버는 완성된 html 파일을 전달만 하는 방식입니다.

장점:

• 초기 로딩 속도가 매우 빠릅니다.
• SEO에 매우 유리합니다.
• 서버 자원 사용량이 거의 없습니다.
• 보안에 유리합니다.

단점:

• 동적인 콘텐츠나 사용자 인터랙션이 필요한 페이지에는 적합하지 않습니다.
• 콘텐츠가 변경될 때마다 빌드를 다시 해야 합니다.

사용 상황:

• 정적인 콘텐츠 위주의 웹 사이트 (예: 블로그, 포트폴리오, 문서 사이트)
• 콘텐츠 업데이트 빈도가 낮은 웹 사이트

요약:

• CSR: 사용자 인터랙션이 중요한 웹 애플리케이션
• SSR: SEO와 초기 로딩 속도가 중요한 웹 사이트
• SSG: 정적인 콘텐츠 위주의 웹 사이트