EJS로 SSR(Server-Side Rendering) 적용하기

SSR(Server-Side Rendering)이란?

SSR은 웹페이지의 콘텐츠를 브라우저가 아닌 서버에서 미리 HTML 형태로 만들어 클라이언트에 전달하는 방식이다.

 

장점

• 브라우저는 HTML을 받아 바로 화면에 렌더링하기 때문에 초기 로딩 속도가 빠르다.
• 웹사이트를 볼 때 클라이언트가 서버에 요청해서 API를 가져오지 않고 서버가 이미 HTML에 필요한 데이터를 다 담아서 보내준다.
  그래서 민감한 데이터가 클라이언트에 노출되지 않는다.

 

 

SSR 적용

1️⃣ EJS(Embedded JavaScript) 설치

npm install ejs

 

EJS(Embedded JavaScript)는 서버에서 HTML을 만들어서 클라이언트에 보여줘야 할 경우 HTML 안에 JavaScript를 삽입할 수 있게, 즉 동적인 페이지를 만들 수 있게 해주는 도구이다.

예를 들어

<h1><%= user.name %>님, 좋은 아침이에요!</h1>

 

<%= %> 사이에 JavaScript 코드를 넣으면 서버에서 user.name 값을 받아서 HTML 안에 넣을 수 있다.

 

 

 

2️⃣ 템플릿 파일 이동 및 설정

기존의 public/index.html 파일 위치를 → views/index.ejs로 이동시키고 확장자를 변경한다.

꼭 views 폴더에 ejs 파일이 있어야 하는 것은 아니다. 하지만 기본적으로 Express는 EJS 템플릿을 views 폴더에서 로드된다고 한다.

 

 

 

3️⃣ app.js에 뷰 엔진 설정

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(express.static(path.join(__dirname, 'public')));

 

 

 

 

4️⃣ VSCode에서 EJS Language Support 플러그인 설치

 

 

 

5️⃣ EJS 문법 적용

기존 HTML에서 데이터를 동적으로 넣을 부분에 EJS 문법(<%= %>, <% %>)을 사용해준다.

문법	설명
<%= %>	값을 출력 (HTML 이스케이프 O)
<%- %>	값을 출력 (HTML 이스케이프 X → HTML 태그 그대로 출력)
<% %>	JavaScript 코드 실행 (예: 조건문, 반복문 등)
<%# %>	주석 (브라우저에는 출력되지 않음)
<%% %>	리터럴 % 기호 출력
<% include 파일명 %>	다른 EJS 파일 포함

 

 

 

 

 

참고

https://boheeee.tistory.com/17