Гайды / Работа с SSR

В этом разделе рассмотрим, как правильно работать с SSR (Server-Side Rendering) в Nuxoblivius, чтобы строить интерфейсы, которые будут одновременно отзывчивыми и безопасными для пользователя.

Работа с запросами

При использовании await внутри <script setup>

Во Vue есть две проблемы:

1. Выполнение запроса замораживает приложение на время ожидания.

2. Отсутствие await может привести к утечке данных или некорректному отображению.

Для решения этих проблем предусмотрен хук useLazySpread(). Он работает схожим образом с Promise.all, но с одним отличием: на клиенте ожидание (await) будет игнорироваться, что делает интерфейс отзывчивее.

<script setup lang="ts">
import { useLazySpread } from "nuxoblivius";
import { Posts } from "@/service/Posts";
import { Comments } from "@/service/Comments";

await useLazySpread([
  Posts.byId.get(postId),
  Comments.byPostId.get(postId),
  () => /* Other async stuff */
]);
</script>

Таким образом, на сервере данные будут загружены до рендера, а на клиенте интерфейс не будет "зависать".

Работа с Store

При SSR стоит помнить, что серверное приложение (например, на Node.js) запускается один раз и живёт до момента остановки вручную.

Если вы используете defineStore или defineSingleton, то их экземпляры будут существовать всё время жизни процесса. Это может привести к ситуации, когда данные "утекают" между пользователями.

Чтобы избежать этой проблемы, в Nuxoblivius предусмотрен хук deleteDump(), который очищает состояние до значений по умолчанию.

Если используете модуль для Nuxt

Все вопросы и проблемы уже решены для Nuxt, вот инструкция по настройке

import { deleteDump } from "nuxoblivius";

// Например, внутри middleware для SSR:
app.use((req, res, next) => {
  deleteDump();
  next();
});

Это гарантирует, что каждый новый запрос будет работать с "чистым" состоянием.

Советуем глянуть

DI очень хорошо справляется с контролем времени жизни существ, советуем глянуть статью с Гайдом по DI