Fastify 使用 next.js 为渲染提供 react 道具

Question

我正在将 Next.js 的示例服务器与 Fastify 一起使用并对其进行试验，我想知道是否有办法将 JSON 对象作为道具传递到渲染中？我试图在文档中找到任何内容，但找不到任何相关信息。

我使用的服务器代码是这样的，

const fastify = require('fastify')();
const Next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

fastify.register((fastify, opts, next) => {
    const app = Next({ dev })
    app.prepare().then(() => {

        fastify.get('/', (req, res) => {
            let object = {"hello": "world"}; // object I want to pass as a prop
            return app.render(req.req, res.res, '/index', req.query).then(() => {
                res.sent = true
            })
        })

        next()
    }).catch(err => next(err))
})

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

Answer 1

您的问题并非特定于 Fastify，而是与所有服务器框架相关。

基本思路是将 req & res 对象传递给 Next 的 getInitialProps。

所以你可以把你的数据放在上面。

例如，express 的 Response 对象具有特定于此作业的 locals 属性。

因此，为了传递数据，请将其附加到 req / res。

fastify.get('/', (req, res) => {
  const object = { hello: 'world' }; // object I want to pass as a prop
  res.res.myDataFromController = object;
  return app.render(req.req, res.res, '/index', req.query).then(() => {
    res.sent = true;
  });
});

// some next page.jsx

const IndexPage = ({ dataFromGetInitilProps }) => (
  <div> {JSON.stringify(dataFromGetInitilProps, null, 2)} </div>
);

IndexPage.getInitilProps = ctx => {
  const { res } = ctx;

  // res will be on the context only in server-side
  const dataFromGetInitilProps = res ? res.myDataFromController: null; 

  return {
    dataFromGetInitilProps: res.myDataFromController,
  };
};

export default IndexPage;

Fastify 使用 next.js 为渲染提供 react 道具

Fastify giving a react prop to a render with next.js

reactjs

next.js

fastify