如何在自定义 Express 服务器上呈现 Next JS 页面

Posted 2023-02-22

【中文标题】如何在自定义 Express 服务器上呈现 Next JS 页面

【英文标题】：How to render Next JS page on a custom Express server

【发布时间】：2020-06-29 18:19:34

【问题描述】：

我正在开发一个 NextJS 项目，我需要在服务器上加载一个表单，以便能够上传文件，因此我在自定义服务器中使用了 multer 和 express。

现在，在 GET 请求中，我想渲染一个特定的页面，但我不确定如何做到这一点。我不想在服务器中有任何 html，只是对页面的调用。这甚至可能吗？

server.get('/', (req,res) => 
  res.send(ReactDOMServer.renderToString(<myPage />))
);

当我启动服务器时，我得到以下信息：

/Users/MONOLITH-Strat-Audrey/Projects/sandbox/multer-file-upload/server.js:41

res.send(ReactDOMServer.renderToString(<myPage />))

                                                                        ^

SyntaxError: Unexpected token

在服务器中我这样调用页面，这显然是行不通的。

const myPage = require('./pages/index')

对于参考，这是我的 github 与所有代码。 Github Repo

【问题讨论】：

你导入 react 了吗？

@Nirus 刚刚做了，我错过了添加反应，但仍然不起作用

如果回答有帮助请采纳。它也可能对其他人有所帮助。

【参考方案1】：

您的代码中存在多部分错误。

切勿在

server.js

或节点入口点文件中导入 React 组件。 所有页面都应位于

pages

目录中，以便

Next.js

解析并提供服务。

---

以下是所做的更改并开始工作

从 server.js

中删除或评论以下行

const myPage = require('./pages/index')

在 第 48 行 - server.js

  server.get('/',function(req,res)
    // res.write(ReactDOMServer.renderToString(<myPage />))
    return app.render(req, res, '/', query)
  );

在您的 components/file.js render 方法中返回 jsx

class File extends Component 
  render() 
    return (<form action="/uploadfile" enctype="multipart/form-data" method="POST"> 
      <input type="file" name="myFile" />
      <input type="submit" value="Upload a file"/>
    </form>)
  

---

使用 Next.js 的自定义服务器参考

Next.js

中的 s-s-r - https://nextjs.org/docs/basic-features/pages#two-forms-of-pre-rendering

Next.js

自定义服务器 - https://nextjs.org/docs/advanced-features/custom-server 自定义服务器示例 - https://github.com/zeit/next.js/tree/canary/examples/custom-server

【讨论】：

我知道您应该尽量不要这样做以避免性能问题。但有时在某些情况下您需要这样做。我试图按照本教程进行操作。 tylermcginnis.com/react-router-server-rendering

@Monica 如果您使用 next.js，您不必手动使用 hydration 和 domToString 方法来做繁重的工作。您指出的教程纯粹是反应 s-s-r，没有 Next.js。 无论如何，我已经在 GitHub 上创建了一个拉取请求，以便您的 repo 更正代码。请采纳。祝学习愉快！