웹 템플릿 엔진(Web Templete Engine)

렌더링 : HTML, CSS, 자바스트립트로 작성된 문서를 브라우저에 출력하는 것.

1990년대 중반. Static Site : 서버의 문서를 받아와서 보여주는 방식
1996년. iframe : 문서내에서 부분적으로 또 다른 문서 삽입
2005년. AJAX : 서버에서 필요한 데이터를 받고, JS 로 동적으로 출력.
1. CSR
: index.html(빈화면) + app.js (프레임워크, 소스 포함)

• 첫번째 화면의 로딩 시간이 길다.
• Low SEO 빈 화면으로 분석이 어려워 검색이 어렵다.
  ex) Angular, React , Vue
  템플릿 엔진) Mustache, Squirrelly
  *Mustache: Java+대부분의 언어 지원. 서버 클라이언트 템플릿이 모두 가능하다

2. SSR

• 첫번째 화면의 로딩 시간이 짧다.
• 서버의 과부화
• TTV, TTI 차이가 존재한다.
  템플릿 엔진) JSP, Thymeleaf, Velocity, Freemarker
  *Thymeleaf: 스프링에서 밀고있는 템플릿

3. SSG(Static Site Generation)
   1) React + Gatsby : 정적으로 서버에 저장. + 동적인 요소 JS
   2) Next.js : 기본 SSR 동작을 하지만, React와 함께 목적에 맞게 사용이 가능하다.

4. 템플릿 엔진 간단한 예문

{{! Mustache }}
Hello, {{name}} !!

{{! /*Squirrelly */}}
{{ @if (it.number === 3) }}
Number is three
{{ #elif (it.number === 4) }}
Number is four
{{ #else }}
Number is five
{{ /if}}`

<%--JSP--%>
  <%
    double num = Math.random();
    if (num > 0.95) {
  %>
      <h2>You'll have a luck day!</h2><p>(<%= num %>)</p>
  <%
    } else {
  %>
      <h2>Well, life goes on ... </h2><p>(<%= num %>)</p>
  <%
    }
  %>

<!--/* Thymeleaf */-->
<p th:text="#{home.welcome}">Welcome to our grocery store!</p>

##Velocity
<TABLE>
        #foreach( $pet in $petList )
          <TR>
            <TD>$count)</TD>
            <TD>$pet.name</TD>
            <TD>$pet.price</TD>
          </TR>
          #set( $count = $count + 1 )
        #end
      </TABLE>

<#--Freemarker-->
<#list  1..10  as i > 
     ${i}
 <#assign i=i+1?int>

출처: https://www.youtube.com/watch?v=iZ9csAfU5Os