如何将访问者点击从服务器（express.js）传递到next.js？

Question

我创建了一个简单的 next.js 应用程序并为其提供了 express.js 的后端，现在我想要的是每当有人访问该站点时，点击应该来自服务器，并且服务器应该传达点击的数量回到 next.js 应用程序。 server.js 文件的代码在这里：

const express = require("express");
const next = require("next");

var counter = 0;

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });

const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    server.get("*", (req, res) => {
      counter++;
      return handle(req, res);
    });

    server.listen(3000, (err) => {
      if (err) throw err;
      console.log("> Ready on http://localhost:3000");
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

如此处所示，我已将 counter 变量设置为零，并希望在发出 get 请求时将其增加（因此在 server.get 函数中编写了 counter++），但我如何在路由访问者上显示此命中数来访？

Answer 1

您可以使用 express 的res.locals 来传递请求对象上的数据。

app
  .prepare()
  .then(() => {
    const server = express();

    server.get('*', (req, res) => {
      counter++;
      res.locals.counter = counter;
      //----^
      return handle(req, res);
    });

    server.listen(3000, (err) => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

那么这个请求对象就会在需要的页面的getInitialProps中可用了。

// some-page.js

const Page = ({ counter }) => <div>{counter}</div>;

Page.getInitialProps = ({ req, res }) => {
  if (res) {
    // this means that you are on the server
    return { counter: res.locals.counter };
  }

  return {};
};