Частично обновлять содержимое HTML с помощью сервера Express - PullRequest
Новая
       7

Частично обновлять содержимое HTML с помощью сервера Express

0 голосов
/ 12 сентября 2018

На моем веб-сайте необходимо загрузить некоторые файлы JSON, и в целом я бы использовал fetch на стороне клиента , например, так: 

fetch(jsonFileLocation)
  .then(res => res.json())
  .then(json => {
    document.getElementById("jsonOutput").innerText = JSON.stringify(json, null, 2);
  });

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

Я мог бы сначала проанализировать JSON, затем res.render() полностью HTML, но я не хочу, чтобы процесс синтаксического анализа файла JSON задерживал остальную часть страницы, поэтому в моем Node / Express / Pug setup Я попытался сделать два рендера: 

res.render('index', {
  title: 'Homepage',
  mainContent: '...'
});

fs.readFile(jsonFileLocation, 'utf8', (err, data) => {
  if (err) { 
    return;
  }
  res.render('index', {
    jsonOutput: JSON.stringify(json, null, 2)
  })
})

Но это дает мне ошибку Error: Can't set headers after they are sent..

Как лучше подойти к этой проблеме?

1 Ответ

0 голосов
/ 24 сентября 2018

Это не проблема мопса (или узла / экспресса), а способ работы HTTP - один запрос имеет один ответ.Отправка второго ответа нарушает этот принцип.

Я бы предложил загрузить файл JSON на сервер прямо в переменную JavaScript в шаблоне pug, а затем заставить клиента выполнить всю работу по его анализу.

Маршрут: 

res.render('index', {
  title: 'Homepage',
  mainContent: '...',
  jsonOutput: JSON.stringify(json, null, 2)
});

Внутри вашего шаблона мопса: 

script.
  var jsonOutput = !{jsonOutput || []};

Если вы обращаетесь к одним и тем же файлам снова и снова, вы также можете сохранить их в переменной вверх вашего маршрута, поэтому он сохраняется в памяти.В качестве альтернативы вы можете использовать плагин line-cache для того, чтобы сделать это с некоторыми дополнительными опциями, или даже использовать redis cache для размещения контента JSON.

...