2.5 KiB

Raw Blame History

Omi Snap - Prerender를 위한 Snap 템플릿

Omi 와 같은 프레임워크를 사용하면 자바스크립트 파일이 로드전 화면에는 아무것도 나타나지 않게 됩니다. 그래서 사용자는 잠시동안 아무것도 없는 화면을 보게 되서 나쁜 User Experience를 경험하게 됩니다. Omi Snap은 이런 부분을 해소하기 위해 렌더할 마크업(HTML/CSS)를 빌드 단계에서 HTML 파일에 삽입을 해줍니다. 그래서 사용자는 빈 화면 UI를 보게 되기 때문에 보다 낫은 User Experience를 제공할수 있게 됩니다.

Usage

$ npm i -g omi-cli # omi-cli 설치
$ omi init-snap myapp # omi-cli로 omi-snap 템플릿 생성
$ cd myapp
$ npm start     # develop
$ npm run build # 프로젝트 빌드 - 자동으로 snap기능 추가 되서 빌드됨

Snap(Prerender) 이란?

omi-cli로 템플릿을 생성하면 아래의 소스코드처럼 blank HTML을 생성합니다. 모든 화면은 자바스크립트 파일로 렌더되기 때문입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="./manifest.json">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>Omi</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="./static/js/index.bb813127.js"></script>
  </body>
</html>