Skip to main content

Render Template Earlier

Usually, the renderer need to wait worker ready and render template with data from worker. But when the tamplate is a static template and can render without data, the renderer do not need to wait worker data and can render template earlier.

For Example, a list page can render an empty list at first earlier, and render the full list when data ready. It can help improving page FP/FCP perfromance

Start from SDK library version 4.25.0


1. Add staticTemplate field in page config file#

{  "staticTemplate": {    "enable": true,    "data": { "userName": "visitor" }  }}

2. Make sure page tamplete is safe for earlier render#

<view>   <!-- The following will render based on staticTemplate config data on first render -->  <view>hi, {{userName}}!<view>  <view class="list">    <!-- The list should provide default value because data may not ready on first render when enable staticTemplate -->    <view bn:for="{{list || []}}" class="list-item">      <view>{{}}</view>      <view>{{item.title}}</view>    <view>  </view></view>