node.js - 我可以为 Nuxt 页面强制 SSR 吗？

Question

在 Nuxt 应用程序中，我需要渲染一个页面，其中包含从 100MB .jsonl 文件获得的谷歌地图上显示的大量数据。我在 asyncData() 中使用 fs.createReadStream 来解析数据并将其提供给 Vue 组件。由于 fs 是仅服务器端的模块，这意味着我的应用程序在尝试在客户端呈现该页面时出错。

我想要它，所以这个特定页面将专门使用 SSR 呈现，这样我就可以在 Vue 组件中使用 fs。

本来想用一个自定义的Express中间件来处理数据，但是这样还是会导致下载几十MB到客户端，这是不能接受的。您可以在我的示例中看到我如何使用 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 也会向我显示一个错误叠加层，抱怨该问题。

标签： node.jsvue.jsserver-side-renderingnuxt.js