1. SSR(Server-Side Rendering)이란?
SSR은 서버에서 HTML을 렌더링하여 클라이언트에 전달하는 방식이다.
즉, 브라우저가 페이지를 요청하면 서버에서 HTML을 완성해 보내주기 때문에 초기 로딩 속도가 빠르고, SEO(검색 엔진 최적화)에 유리하다.
SSR의 동작 과정
사용자가 웹사이트를 요청
서버에서 데이터를 가져와 HTML을 완성
완성된 HTML을 클라이언트(브라우저)로 전달
브라우저가 즉시 렌더링하여 화면에 표시
SSR의 장점
초기 로딩 속도 개선 → 클라이언트에서 JS 실행 없이 바로 렌더링
SEO 최적화 → 검색 엔진이 HTML을 직접 크롤링 가능
첫 화면 노출 속도 빠름 → 사용자 경험(UX) 향상
SSR의 단점
서버 부하 증가 → 모든 요청에서 HTML을 생성해야 함
페이지 간 전환 시 속도 저하 → 새로고침이 필요함
2. Jinja2란?
Jinja2는 Python 기반의 템플릿 엔진으로, HTML 안에서 파이썬 코드(변수, 조건문, 반복문 등)를 사용할 수 있도록 해준다.
즉, HTML을 동적으로 생성하는 데 도움을 주며, SSR 방식의 웹 애플리케이션을 쉽게 구현할 수 있다.
Jinja2의 기본 문법
변수 출력: {{ 변수명 }}
조건문: {% if 조건 %} ... {% endif %}
반복문: {% for item in 리스트 %} ... {% endfor %}
Jinja2 예제
<!DOCTYPE html>
<html>
<head>
<title>Jinja2 Example</title>
</head>
<body>
<h1>안녕하세요, {{ username }}님!</h1>
<h2>오늘의 할 일</h2>
<ul>
{% for task in tasks %}
<li>{{ task }}</li>
{% endfor %}
</ul>
</body>
</html>
→ {{ username }}, {% for %} 같은 문법을 사용하여 서버에서 동적으로 HTML을 생성함.
3. SSR + Jinja2 조합의 장점
서버에서 미리 HTML을 생성하므로, SSR을 쉽게 구현할 수 있음
SEO 친화적이고 초기 로딩 속도가 빠른 웹사이트 제작 가능
템플릿을 활용하여 코드의 재사용성을 높일 수 있음
사용 예시: Flask + Jinja2 + SSR
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
tasks = ["공부하기", "운동하기", "블로그 쓰기"]
return render_template("index.html", username="준", tasks=tasks)
if __name__ == "__main__":
app.run(debug=True)
→ Flask에서 Jinja2 템플릿을 사용하여 SSR 방식으로 HTML을 생성하는 코드
4. 결론
✔ SSR은 서버에서 HTML을 렌더링해 빠른 첫 화면을 제공하는 방식
✔ Jinja2는 SSR을 쉽게 구현할 수 있도록 도와주는 Python 템플릿 엔진
✔ 둘을 조합하면 빠르고 SEO 친화적인 웹 애플리케이션을 만들 수 있다.
