Що таке Wortex Render, і як його використовувати

В програмуванні є багато задач звʼязаних з костилями, котрі потрібно використовувати, щоб ваш додаток хоть якось запрацював. Причому далеко не факт, що костилі, які ви використовуєте, залежать від вас. 

Wortex Render - це по факту один з таких костилів, щоб зрозуміти що це, давайте уявимо ситуацію. Уявіть що вам по API з бекенду надходить більше 1000 строк записів, які вам потрібно вивести на сторінку одночасно. В більшості випадків ви зіткнетеся з проблемою фрізів, або Router Render Stopping, коли наприклад Vue буде намагатися відрендерити сторінку, ще до її завантаження, що заблокую переход між роутами, навіть якщо завантаження буде асинхронним. Wortex Render як раз і вирішує всі ці проблеми.

Wortex Render пропонує варіант, коли контент розділяється на частини, скажем віртуальна пагінація без пагінації. Тобто коли користувач попаде на сторінку, від побачить лише 20 записів, але з плином часу, через пів секунди зʼявиться ще 20, а потім ще 20, і так поки не відрендериться вся 1000 записів. Це, по факту, невелює проблему з Router Render Stopping, а також прибере фрізи з сторінки. Браузере абсолютно не важлива кількість контенту на сторінці, але на етапі первинного рендера, він не може одним скопом нормально відрендерити багато записів. 

Тепер на практиці

Як реалізувати Wortex Render. Припустимо що вам надійщов масив з 1000 записів. Розберемо на прикладі коду:

const cleanList = ref([]) // your 1000 elements list
const fetchHistory = astnc () => {} // your method to get data

const refReinder = ref(false)
const fullLoaded = ref(false)
const wortex = ref(20)

const wortexRender = () => {
  refReinder.value = setTimeout(() => {
    wortex.value = wortex.value + 20
    if(cleanList.value.length >= wortex.value) {
      wortexRender()
    } else {
      fullLoaded.value = true
    }
  }, 1000)
}

onBeforeMount(() => {
  wortex.value = 20
})

onMounted(() => { 
  fetchHistory().then(() => {
    wortexRender()
  });
})

onBeforeUnmount(() => {
  clearTimeout(refReinder.value)
})

Ми створюємо рекурсивний таймаут, який буде виконуватися до поки число елементів в значенні wortex не буде співпадати з кількістю елементів масиву. Тобто на начальному рендері буде лише 20 елементів, але кожної секунди будуть додаватися ще 20, до поки їх не стане 1000.

Звісно, хтось може сказати, а чому не зберігати все в IndexDB, або в Redis, і з відти не забирати данні по звичайній пагінації, яку зробити наприклад чепез звичайний observer. Дійсно, такий підхід більш правельний, але Wortex Render виконує інші задачі, наприклад коли у вас нема редісу, та ви не можете таку кількість данних записувати до indexDB, або просто не можете її використовувати через webview середовище. Wortex Render - це спосіб автоматичного підвантаження данних, коли ви не використовуєте пагінацію, а данні підвантажуються в фоні, і рендеряться одночасно. Тому в деяких випадках, Wortex Render може зберегти плавну роботу вашого додатку, навіть в таких ситуаціях

Відразу підкажу як вивести данні з таким підходом. Ви можете використиати computed від cleanList, з параметром slice wortex:

const computedList = computed(() => cleanList.value?.slice(0, wortex.value))

Таким чином контент на вашій сторінці буде автоматично підвантажуватися без додаткової логіки, внизу списку можете вивести індекатор завантаження на основі fullLoaded.value.