Запуск кода на стороне сервера один раз (при разработке и сборке), а затем использование данных на стороне клиента

** Обновлено с помощью плагина nitro **

Я использую Playwright на стороне сервера, чтобы получить некоторые данные со страницы, которые я хочу использовать в своем интерфейсе, это настройка с использованием плагина nitro.

  • Базовая структура проекта

    pages
      index.vue
    server
      db
        index.js
      plugins
        playwright.js
      routes
        playwright.js
    ...
    
  • Server/db/index.js

    export const db = [];
    
  • Server/routes/playwright.js

    import { db } from '../db';
    export default defineEventHandler(() => db);
    
  • Server/plugins/playwright.js

    import { chromium } from 'playwright';
    
    
    export default defineNitroPlugin(async () => { 
      const browser = await chromium.launch();
      // ...
      // some operations goes here
      // and some console logs for tracking progress
      // ...
      db.push(results); // results is the scraped data
    });
    

При запуске nuxt dev скрипт в plugins/playwright запускается, открывает браузер, очищает данные и сохраняет их в db, при этом все мои console.info регистрируются в терминале (в prod все по-другому).

Когда я открываю локальный хост, я получаю индексную страницу с извлеченными данными из базы данных без ошибок.

Однако при запуске nuxt generate CLI работает как обычно, и я вижу только некоторые из console.infos, напечатанных на терминале, как показано ниже.

yarn run v1.22.19
$ nuxt generate
Nuxi 3.0.0
Nuxt 3.0.0 with Nitro 1.0.0  

WARN  Using experimental payload extraction for full-static output. 
You can opt-out by setting experimental.payloadExtraction to false. 

i Client built in 1666ms
i Building server...  
√ Server built in 581ms
√ Generated public .output/public
i Initializing prerenderer
🎭 Starting Playwright server plugin
⚙️ Read User-specifed options
📄 Initiating a new page
// There are more console.infos than these three 
i Prerendering 3 initial routes with crawler

  ├─ / (290ms)
  ├─ /200.html (3ms)
  ├─ /404.html (5ms)
  ├─ /_payload.js (2ms)
√ You can now deploy .output/public to any static hosting!
Done in 6.21s.
 *  Terminal will be reused by tasks, press any key to close it. 

При запуске nuxt preview и открытии локального хоста я получаю индексную страницу с пустым массивом (начальное значение для db)

Нужно ли как-то заставить команду generate ждать, пока плагин nitro не завершит выполнение? и как я могу это сделать?

Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
0
239
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я не уверен, что это может помочь, но вы можете решить это, используя «готовый» хук:

Сначала создайте такой файл (./hooks/hooks.js):

export default (nuxtConfig) => ({
    ready: () => {
    // Execute your code here
    }
});

Затем добавьте его в свой nuxt.config.js:

import hooks from './hooks/hooks';
export default {
    // Other stuff
    hooks: hooks(this),
    // Other stuff
}

Я попробую это, но что this в hooks: hooks(this)?

Muhammad Mahmoud 18.11.2022 15:19

@MuhammadMahmoud Вы можете следить за документацией в Hooks Property

Adem kriouane 18.11.2022 15:48

После поиска я использовал нитро-плагин, и он работает в разработке, но не в производстве. Я обновил вопрос с более подробной информацией

Muhammad Mahmoud 21.11.2022 03:11
Ответ принят как подходящий

Проблема была в пакете драматурга, а не в самом nuxt, после того, как драматург заработал и использовал маршруты, приложение работало правильно.

Другие вопросы по теме