javascript Next.js：在 getInitialProps() 中获取数据：服务器端 vs 客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49415755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Next.js: fetching data in getInitialProps(): server-side vs client-side
提问by ShdNx
I'm using Next.js, and I have a custom server using Express. I have a page that requires some data from the database.
我正在使用 Next.js，并且我有一个使用 Express 的自定义服务器。我有一个页面需要来自数据库的一些数据。
getInitialProps(), when running on the server, could just grab the data from the database and return it, without any problems.
However, getInitialProps()can also run on the client side (when the user initially requests a different page, then navigates to this one). In that case, since I'm on the client side, I obviously can't just fetch the data from the database - I have to use AJAX to talk to the server and ask it to retrieve it for me.
getInitialProps(), 在服务器上运行时，可以直接从数据库中抓取数据并返回，没有任何问题。但是，getInitialProps()也可以在客户端运行（当用户最初请求不同的页面，然后导航到该页面时）。在这种情况下，由于我在客户端，我显然不能只从数据库中获取数据——我必须使用 AJAX 与服务器对话并要求它为我检索它。
Of course, this also means that I have define a new Express route on the server to handle this request, which will contain exactly the same code as the server-side part of getInitialProps(), which is very undesirable.
当然，这也意味着我在服务器上定义了一个新的Express路由来处理这个请求，里面会包含和服务器端完全一样的代码getInitialProps()，这是非常不可取的。
What's the best way to handle this?
处理这个问题的最佳方法是什么？
采纳答案by ShdNx
Since no good solution seemed to have existed, I have created and published a library to provide a simple and elegant solution to this problem: next-express.
由于似乎没有好的解决方案，我创建并发布了一个库来为这个问题提供一个简单而优雅的解决方案：next-express。
回答by Rob
getInitialProps()always receives the request and response as parameters which are only set on the server:
getInitialProps()始终接收请求和响应作为仅在服务器上设置的参数：
static async getInitialProps({req}){
if(req){
// called on server
} else {
// called on client
}
}
https://github.com/zeit/next.js#fetching-data-and-component-lifecycle
https://github.com/zeit/next.js#fetching-data-and-component-lifecycle
回答by tom-james-watson
In your getInitialPropsyou should be making a http request to a new express route that has your logic for fetching from the database. That logic should never live in the UI layer.
在您的应用程序中，getInitialProps您应该向新的快速路由发出 http 请求，该路由具有从数据库中获取的逻辑。该逻辑永远不应该存在于 UI 层中。
This route should then be called regardless of whether you are on the client or on the server - you don't need to do any code branching.
无论您是在客户端还是在服务器上，都应该调用此路由 - 您不需要进行任何代码分支。
回答by bhurlow
Make an API distinct from your next.js app. Think of the next app as a frontend client that happens to render pages on the server
使 API 与您的 next.js 应用程序不同。将下一个应用程序视为恰好在服务器上呈现页面的前端客户端
