Можно ли вернуть помимо статической страницы данные с сервера?

Question

[YungJabo]

Делаю проект на Vue + Express.

Есть такой роут:

router.get("/exchange/tsx/:id", (req, res) => {
  res.sendFile(path.join(staticFilesPath, "index.html"));
});

Я возвращаю пользователю страницу на Vue из статики.

Мне дополнительно на этой странице сразу нужно получить все данные по транзакции, но я могу только одно вернуть что-то, в данном случае статическую страницу. Есть способы какие-то отправить все сразу - так было бы удобнее, получать из параметра запроса id, брать из бд и возвращать информацию.? А так я буду вынужден на Vue на странице делать дополнительный запрос на сервер.

Comments

[alexalexes]

То, что вы хотите - это уже не статика.
Либо получаете статическую страницу и запрашиваете доп. данные, либо изначально собираете контент страницы динамически.

[Aetae]

Ответы historydev и alexalexes верны. Если ты собираешься полноценно приложение строить - смотри полноценные SSR решения.

Но если это разовый костыль, то нет проблем в запросе получить нужные данные, а потом тупо вписать их в страницу, типа:

router.get('/exchange/tsx/:id', async (req, res) => {
  const { id } = req.params;

  try {
    const prefetchData = await getDataById(id);

    if (!prefetchData) {
      return res.status(404).send('not found');
    }

    let index = await fs.readFile(
      path.join(staticFilesPath, "index.html"), 
      'utf8'
    );

    index = index.replace('</head>', `
    <script>
      window.prefetchData = ${JSON.stringify(prefetchData)};
    </script>
    $&`);

    res.send(index);
  } catch (error) {
    console.error('Error:', error);
    res.status(500).send('An error occurred');
  }
});

Ну и внутри vue пытаться получить window.prefetchData.

[Антон Антон]

Еще можно попробовать использовать server push https://habr.com/ru/companies/badoo/articles/331216/

Answer 1

[Николай]

Как вариант, ранее на PHP делали следующее, при рендере страницы, можно создать некий атрибут и туда класть данные, и потом с ним работать, такой подход делал Bitrix в свое время, чтобы передать данных из сервера в js