Jinja2 Template Engine

Jinja2 템플릿 엔진

flask를 통해 서버환경을 구성 할때 같이 설치되는 템플릿 엔진이다.
Jinja2를 사용하면 html 코드 안에서 파이썬 코드를 작성 할 수 있다.

@ 기본 사용법

// 변수 선언
{% set 변수명 = 할당값 %}

// 변수 사용
{{ 변수명 }}

// for문
{% for i in rage(10) %}
	<div>jinja2 for statement</div>
{% endfor %}

// if문
{% if num == 1 %}
		<h1>good</h1>
{% elif num == 2 %}
		<h1>bad</h1>
{% else %}
		<h1>not</h1>
{% endif %}

// 페이지 확장
child.html
{% extends "부모html" %}
{% block 해당 템플릿이름 %}
변경하고자 하는 소스코드
...
{% endblock %}

parent.html
<div>
    {% block 해당 템플릿이름 %} {% endblock %}
</div>

Jinja2로 화면을 그릴때와 Ajax로 화면을 그릴때 차이점

Ajax로 어떠한 API에 요청을 보내어 받은 데이터로 화면을 그릴 때는 이미 화면이 한번
렌더링 된 후 다시 Ajax로 받아온 데이터로 렌더링이 이루어 지기 때문에 html 템플릿에 담겨진 텍스트나 이미지가 보여 진 후 새로 그려지게 된다.

Jinja2는 html 템플릿이 최초에 그려질때 API에서 데이터를 받아와 바로 렌더링 하기 때문에 이러한 단점이 보완이 된다.

그래서 Jinja2는 서버사이드렌더링 Ajax는 클라이언트사이드 렌더링이 되는 것이다.

SSR (Server Side Rendering) & CSR (Client Side Rendering)

• SSR
  SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다.

• CSR
  CSR은 SSR보다 초기 전송되는 페이지의 속도는 빠르지만 서비스에서 필요한 데이터를 클라이언트(브라우저)에서 추가로 요청하여 재구성해야 하기 때문에 전제적인 페이지 완료 시점은 SSR보다 느려진다.

참고할만한 자료 Rendering on the Web