В приложении Nuxt мне нужно отобразить страницу с большим количеством данных, отображаемых на карте Google, полученных из файла .jsonl размером 100 МБ.Я использую fs.createReadStream внутри asyncData (), чтобы проанализировать данные и передать их компоненту Vue.Поскольку fs является модулем только на стороне сервера, это означает, что в приложении возникают ошибки при попытке отрисовки этой страницы на стороне клиента.
Мне бы хотелось, чтобы эта конкретная страница отображалась исключительно с использованием SSR, поэтому я могу использоватьв компоненте Vue.
Я думал об использовании специального промежуточного программного обеспечения Express для обработки данных, но это все равно приводит к загрузке десятков МБ на клиент, что недопустимо.Вы можете увидеть, как я запрашиваю его с помощью Axios в моем примере.
async asyncData( {$axios} ) {
const fs = require('fs');
if (process.server) {
console.log("Server");
async function readData() {
const DelimiterStream = require('delimiter-stream');
const StringDecoder = require('string_decoder').StringDecoder;
const decoder = new StringDecoder('utf8');
let linestream = new DelimiterStream();
let input = fs.createReadStream('/Users/Chibi/WebstormProjects/OPI/OPIExamen/static/stream.jsonl');
return new Promise((resolve, reject) => {
console.log("LETS GO");
let data = [];
linestream.on('data', (chunk) => {
let parsed = JSON.parse(chunk);
if (parsed.coordinates)
data.push({
coordinates: parsed.coordinates.coordinates,
country: parsed.place && parsed.place.country_code
});
});
linestream.on('end', () => {
return resolve(data);
});
input.pipe(linestream);
});
}
const items = await readData();
return {items};
} else {
console.log("CLIENT");
const items = this.$axios.$get('http://localhost:3000/api/stream');
return {items };
}
}
Даже при правильной визуализации NUXT покажет мне наложение ошибки с жалобой на проблему.
