Режимы приложений #

SSR #

flue3 по умолчанию работает в режиме SSR. Это означает, что некоторые данные и разметка страницы будут подготовлены на сервере и браузеру придёт размеченный HTML, где уже на клиенте (браузере) будет происходить гидрация результатов рендера в интерактивное приложение. Подробнее

SPA #

Но так же flue3 может работать и в режиме обычного SPA, если в файле конфигурации указать ssr: false.

flue3.config.ts

import {defineConfig} from 'flue3';

export default defineConfig(({
    ssr: false,
});

Таким образои всё выполнение кода будет происходить только в браузере.

Индикатор загрузки SPA #

В режиме SSR прежде чем браузеру отобразить страницу, он будет ждать выполнение кода на сервере и уже получить готовый HTML. Но в режиме SPA мы выполняем все на клиенте, поэтому перед отрисовкой приложения мы будем видить белый экран.

В flue3 можно создать простой .html шаблон, который будет отображаться перед первой отрисовкой приложения, например индикатор загрузки.

flue3.config.ts

import {defineConfig} from 'flue3';

export default defineConfig(({
    loadingTemplateFilename: 'loading.html',
});

src/loading.html

<style>
    .loading {
        color: red;
        text-align: center;
    }
</style>

<div class="loading">
    Загрузка...
</div>