EJS - SSR 개요

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자 (초급~중급)
• SSR 기술 이해 및 Express + EJS 프로젝트 구성에 관심 있는 개발자
• SEO 최적화 및 초기 로딩 속도 개선에 관심 있는 개발자

핵심 요약

• SSR(Server-Side Rendering)은 서버에서 HTML 생성하여 클라이언트에 전달함으로써 SEO 및 초기 로딩 속도 개선
• EJS(Embedded JavaScript)는 서버에서 템플릿 렌더링을 위한 JavaScript 기반 템플릿 엔진
• Express + EJS로 기본 템플릿 구성 시 npm install express ejs 설치 필요

섹션별 세부 요약

1. SSR 개념

• SSR은 서버에서 HTML 생성하여 클라이언트에 전달
• SEO 및 초기 로딩 속도 향상의 주요 장점
• CSR(Client-Side Rendering)과 비교 시 SEO 성능이 우수하지만 복잡한 UI는 처리 불리

2. SSR vs CSR 비교

• SSR
• 장점: 초기 로딩 빠름, SEO 우수
• 단점: 복잡한 UI 처리에 한계
• CSR
• 장점: 동적 UI 구현 가능
• 단점: SEO 성능 저하, 초기 로딩 느림

3. EJS + Express 프로젝트 구성

• 폴더 생성 후 npm init -y로 프로젝트 초기화
• npm install express ejs로 Express 및 EJS 설치
• EJS 템플릿 파일을 Express 서버에서 렌더링하여 HTML 전달

결론

• SSR을 활용한 EJS + Express 프로젝트는 SEO 최적화와 초기 로딩 속도 개선에 효과적
• express 및 ejs 패키지 설치는 필수 단계
• 복잡한 웹 앱은 Next.js와 같은 하이브리드 접근 방식(SSR + CSR)을 고려할 것