Next Js API:使用 s-s-r 反应页面的响应

Posted

技术标签:

【中文标题】Next Js API:使用 s-s-r 反应页面的响应【英文标题】:NextJs API: respond with s-s-r react page 【发布时间】:2020-11-19 23:23:20 【问题描述】:

目标:

从 nextjs api 响应服务器端呈现的 html

为什么我需要这个:

我正在使用 React 构建自定义内部 html 页面编辑器,其中页面模型表示为 JSON。我想将页面模型 JSON 发送到 nextjs api,将其传递给 react 组件并取回 html。

我尝试的是直接调用ReactDOMServer.renderToString的api:

export default (req, res) => 

  const model = req.body.pageModel

  const body = ReactDOMServer.renderToString(
      <App
        model=model
      />)

  res.statusCode = HttpStatus.OK
  res.setHeader("Content-Type", "text/html")
  res.end(`
  <!DOCTYPE html>
  <html >
    <head></head>
    <body>
        $body
    </body>
  </html>
`)

问题:

有没有办法重用 nextjs 渲染方法而不是 ReactDOMServer.renderToString 和 JS 字符串模板,以便我能够指定和使用我自己的 _app.js_page.js 来响应 api?

以下内容将适合我的需要:

const html = next.render(<App model=model>)
res.end(html)

【问题讨论】:

有完全相同的问题。你找到解决办法了吗? 【参考方案1】:

如果您愿意使用现成的解决方案,我建议您研究 React 富编辑器,https://draftjs.org/ 是最受欢迎的。它们带有一系列功能,尤其是您需要的功能和 HTML 兼容性。

【讨论】:

谢谢。我正在构建的页面编辑器将在其中包含用于文本元素编辑的富文本编辑器。它不适合页面布局构建。

以上是关于Next Js API:使用 s-s-r 反应页面的响应的主要内容,如果未能解决你的问题,请参考以下文章

Next Js 自定义路由和 s-s-r

使用 next.js 与传统 s-s-r 进行服务器端渲染

Next.js 与 FortAwesome 和 s-s-r

在 s-s-r 和动态 URL 中使用 Apollo 进行查询 (Next.js)

如何实现redux-toolkit和next,js又不丢s-s-r

React-tooltip 和 Next.js s-s-r 问题