@lite-ssr/vue NPM

🗒️ УСТАНОВКА

Установка зависимостей (Vue):

pnpm i lite-ssr @lite-ssr/vue @unhead/vue

Заменяем createApp на createApp из @lite-ssr/vue, подключаем unhead и экспортируем приложение в src/main.ts

import { createApp } from '@lite-ssr/vue'

import './style.css'
import App from './App.vue'

const app = createApp(App)
app.mount('#app');

export default app // Обязательно экспортируем app

Экспортировать приложение требуется для того, чтобы lite-ssr мог использовать один entry-файл для рендера приложения на сервере и клиенте, а так же для проброса префетч-данных между сервером и клиентом.

Настройка /lssr.config.ts

// lssr.config.ts
import { defineLssrConfig } from "lite-ssr";
import { VueRenderer } from "@lite-ssr/vue";

export default defineLssrConfig({
    renderer: VueRenderer // Подключаем VueRenderer
    entry: "/src/main.ts"
});

🔎 ИСПОЛЬЗОВАНИЕ

Создание асинхронных сторов

Для организации получения данных на стороне сервера и клиента, библиотека предоставляет возможность создавать префетч-сторы, для упрощения работы с асинхронными запросами

Пример создания стора:

// useData.ts
import { ref } from "vue";
import { definePrefetchStore } from "@lite-ssr/vue";

export const useData = definePrefetchStore('data', () => {
    // Инициализация стейтов
    const data = ref<null | any>(null);
    const loading = ref<boolean>(false);
    const error = ref<boolean>(false);

    // Инициализация асинхроных функций
    const fetchData = async (id: number) => {
        loading.value = true;

        const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
        
        if (response.ok) {
            data.value = await response.json();
        } else {
            data.value = null;
            error.value = true;
        }

        loading.value = false;
    };

    // Возвращаем стейты и функции
    return {
        data,
        loading,
        error,
        fetchData
    }
})

! ВАЖНАЯ ИНФОРМАЦИЯ !

Префетч-сторы, как и сторы Pinia требуют уникального наименования. Это нужно для правильной передачи информации полученной на стороне SSR клиенту !

Пример использования получившегося стора:

<!--App.vue-->
<template>
    <div>
        <span v-if="loading">Загрузка данных...</span>
        <span v-else-if="error">Не удалось загрузить данные</span>
        <pre v-else>{{ serializedData }}</pre>
    </div>
</template>

<script setup lang="ts">
    import { computed, onMounted } from 'vue'
    import { useData } from "./useData";

    // Подключаем наш стор
    const { fetchData, data, loading, error } = useData(); 

    // Сериализуем данные для удобочитаемости
    const serializedData = computed( 
        () => data ? JSON.stringify(data, null, '\t') : ''
    )

    // Получаем данные при монтировании компонента
    fetchData(1);
</script>

Важная информация! Асинхронные методы возвращаемые префетч-стором, являются асинхронными, однако на стороне SSR они регистрируются через хук onPrefetch, соответственно их нельзя использовать внутри других хуков (прим. onMounted). И ффактически, на стороне SSR эти методы ничего не вернут. На стороне клиента они работают как обычные асинхронные методы.

Префетч данных внутри компонента через useAsyncData (ОСУЖДАЕМ!)

Библиотека так же предоставляет собственную альтернативу useAsyncData из Nuxt. Но мы настоятельно рекомендуем не использовать его, по причине низкой производительности

<!--App.vue-->
<template>
    <div>
        <span v-if="loading">Загрузка данных...</span>
        <span v-else-if="error">Не удалось загрузить данные</span>
        <pre v-else>{{ serializedData }}</pre>
    </div>
</template>

<script setup lang="ts">
    import { computed, defineProps } from 'vue'
    import { useAsyncData } from "@lite-ssr/vue";


    // Инициализируем асинхронный запрос
    const fetchTodo = async (id: number) => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
        if (!response.ok) throw new Error();
        return response.json();
    };

    // Выполняем запрос
    const { data, loading, error } = useAsyncData('data', () => fetchTodo(1));

    // Сериализуем данные для удобочитаемости
    const serializedData = computed( 
        () => data ? JSON.stringify(data, null, '\t') : ''
    )
</script>

Повторимся, мы крайне не рекомендуем использовать этот подход. Т.к. для отслеживания полученных значений функции требуется получать путь компонента, его пропсы и др. информацию для верной передачи этих данных на клиент. Вместо этого лучше используйте Префетч-сторы!

🧑‍💻Кастомный index.html

Фреймворк имеет собственный index.html, на основе которого генерируется конечный html файл. В целом подключение библиотек можно сделать через само приложение, либо в секции headв lssr.config.ts.

Если вам всё-таки требуется указать собственную реализацию index.html, необходимо добавить соответствующий путь в конфигурацию плагина lssrVite:

lssrVite({
    head: "./index.html"
})

Стандартный index.html:

<!DOCTYPE html>
<html>
  <head>
    <!--preload-links-->
    <!--entry-styles-->
  </head>
  <body>
    <!--app-html-->
    <!--initial-state-->
    <!--entry-scripts-->
  </body>
</html>