使用 HTML 格式渲染（SSR）

Kraken 应用的入口是一个 JavaScript 文件，开发一个普通应用通常直接打出一个 JS bundle 或者是 bytecode 文件。考虑到前端 SSR 的场景，开发者往往需要通过服务端渲染等方式加快首屏的渲染速度，这时可以将入口改成 HTML 文件，以支持 SSR 渲染 Kraken 应用。

简单的例子

  1. <html>
  2.   <head>
  3.     <title>Kraken App</title>
  4.   </head>
  5.   <body>
  6.     <div
  7.       style="box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; align-content: flex-start; border-width: 0vw; border-style: solid; border-color: black; margin: 26.6667vw 0vw 0vw; padding: 0vw; min-width: 0vw; align-items: center;"
  8.     >
  9.       <img
  10.         src="https://img.alicdn.com/imgextra/i1/O1CN01CUE2IL1FdAGnYPawX_!!6000000000509-2-tps-350-116.png"
  11.         style="height: 24vw; margin-bottom: 2.6667vw;"
  12.       />
  13.       <span
  14.         style="box-sizing: border-box; display: block; font-size: 6vw; white-space: pre-wrap; font-weight: bold; margin: 2.6667vw 0vw;"
  15.         >Welcome to Your Kraken App</span
  16.       >
  17.       <span
  18.         style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
  19.         >More information about Kraken</span
  20.       >
  21.       <span
  22.         style="box-sizing: border-box; display: block; font-size: 4.8vw; white-space: pre-wrap; margin: 1.0667vw 0vw; color: rgb(85, 85, 85);"
  23.         >Visit http://openkraken.com/</span
  24.       >
  25.     </div>
  26.     <script>
  27.       console.log('eval JavaScript!');
  28.     </script>
  29.   </body>
  30. </html>

渲染效果：

使用 HTML 格式渲染（SSR） - 图1
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
使用 HTML 格式渲染（SSR） - 图2