.hbs, CSR, SSR, SSG, Jam stack

.hbs (handlebars) - 간단한 템플릿 언어

• 템플릿과 입력 개체(object)를 사용하여 HTML 또는 다른 텍스트 형식을 생성.
• Handlebars 템플릿은 Handlebars 표현식이 포함된 일반 텍스트 형식처럼 보여짐.

 

ex) The fastest way to test Handlebars is to load it from a CDN and embed it in an HTML file.

<!-- Include Handlebars from a CDN -->

<script>

  // compile the template

  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");

  // execute the compiled template and print the output to the console

  console.log(template({ doesWhat: "rocks!" }));

</script>

 

참고자료 - https://handlebarsjs.com/guide/#nested-input-objects

 

CSR - Client Side Rendering

• 고객의 브라우저에서 HTML, JS 및 CSS 코드 가져와서 사용.
• JS를 불러와서 페이지 변경.

 

SSR - Server Side Rendering

• 서버에서 모든 정보를 다 불러온다름에 고객 페이지에 표시.
• 정보를 미리 불러온다음에 페이지를 표시하기 때문에 속도가 빠름.
• React와 Vue의 경우엔 Node JS 위에 올려서 사용.

 

SSG - Static Site Generator (ex. Hugo, Jekylle, Hexo)

• 정적파일(ex. Json, Yam)을 가져와서 렌더링을 다 마친 파일을 생성하여 웹페이지에 보여주는 방식.

 

JAM stack - Javascript, API, Markup, Stack

• 정적사이트 생성기들을 사용한 서비스 설계
• 자바스크립트를 활용한 다양한 라이브러리와 툴들로 정적인 프론트엔드 마크업 페이지를 미리 생성(Pre-Rendering)
• 로그인, 결제, 댓글기능들은 외부 API 서비스로 설계를 분리 (Decoupling)
• Netlify, Vercel - Github 연결 후 build와 배포 자동화. CDN으로 배포함으로써 가격도 낮춤.

참고자료 - https://jamstack.org/