如何从Express服务器向Next.js页面发送JSON对象？

Question

我刚接触 Next.js 和 Express，正在尝试从服务器向客户端发送 POST 数据，此处的客户端是我的 Web 浏览器。我已成功在服务器上接收数据，现在想将这些数据发送到相应的页面。

以下是 server.js 文件的代码：

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

  server.use(express.json());

  server.post("/posts", (req, res) => {
    req.body.data
    res.send(req.body.data);
    console.log("Post data : ",req.body.data)
  });

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

现在我想将req.body.data发送到posts页面。我们如何使用nextjs实现这一点？有任何帮助或建议将不胜感激。谢谢。

- anup

Answer 1

在您的Express应用程序中创建一个端点，通过 res.json() 将数据返回给客户端。

然后，在您的React应用程序中访问它（可能是在 getInitialProps 方法中），通过向其发出Ajax请求。

- Quentin

---

非常感谢您，@Quentin。 - anup

就像我们在 get 中可以返回一样，我们也可以在 post 中返回。我正试图做以下事情： server.post("/posts", (req, res) => { req.body.data res.send(req.body.data); console.log("Post data : ",req.body.data) res.json(); return app.render(req, res, '/posts', { id: "Anup" }) }); 这会起作用吗？ - anup

@anup，不是这样的。你试图对同一个请求进行三次响应。你应该按照我说的去做。 - Quentin

@Quentin 如果数据是通过ajax调用的，它仍然会是SSR吗？谷歌跟踪器能否跟踪使用ajax渲染的数据以进行SEO优化？感谢您的解决方案。 - yozawiratama

Answer 2

响应的json方法可以直接发送json。

res.json(req.body.data);

- Vishnudev Krishnadas

---

非常感谢您，@Vishnudev。 - anup