Question

我有一个带有 NextJS 的 ExpressJS 服务器，如示例 here 所示。有些页面我想从我的快速服务器上渲染。

我想出了以下解决方案：

// server.js

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

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

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

  server.get('/server-rendered', (req, res) => {
    // get data from database
    return app.render(req, res, '/server-rendered', { ...req.query, dbData })
  })

  server.all('*', (req, res) => handle(req, res))

  server.listen(3000)
})

// pages/server-rendered.js

const ServerRenderedPage = ({ dbData }) => (
    <div>
        {JSON.stringify(dbData, null, 4)}
    </div>
)

export const getServerSideProps = (context) => ({
    props: {
        dbData: context.query.dbData
    }
})

export default ServerRenderedPage

上述解决方案工作正常。但是，我注意到在生产中，当页面被服务器呈现时，HTML 包含一个 id 为 __NEXT_DATA__ 的脚本（用于对页面进行保湿），但它在 {{1} 中都包含 dbData } 和 pageProps（见下文）：

query

因此，如果我从我的 express 服务器传递大量数据，页面加载速度会变慢，因为它的大小会比它需要的大得多，因为 <script id="__NEXT_DATA__" type="application/json"> { "props": { "pageProps": { "dbData": {} } }, "query": { "dbData": {} }, // ... } </script> 脚本标记中有重复的数据。

对于如何将数据从自定义 NextJS 服务器传递到页面，有没有人有更好的解决方案？

我知道我可以在 __NEXT_DATA__ 中获取数据，但这比直接从自定义 NextJS 服务器呈现页面要慢。

Answer 1

因此，我想出了一个解决方案，用于将数据从 Express NextJS 服务器传递到 NextJS 页面，而无需在 HTML 中输出两次数据。

TYPE((.|\n)*)DE  11    NUMERIC: 000011 -> '000011'((.|\n)*)

// server.js

server.get('/server-rendered', async (req, res) => {
    // get data from database
    res.dbData = await db.query()

    return app.render(req, res, '/server-rendered', req.query)
})

或者，您可以按照@juliomalves 的建议直接从 // pages/server-rendered.js export const getServerSideProps = ({ res }) => ({ props: { dbData: res.dbData } }) 中的数据库中获取数据，如下所示。

getServerSideProps

如何使用 NextJS 将数据从 Express Server 传递到页面？

1 个答案: