时间戳

首页 > 解决方案 > 带有 getInitialProps 和 getStaticProps 的页面

next.js - 带有 getInitialProps 和 getStaticProps 的页面

问题描述

我有一个页面，我需要使用 axios 获取包含凭据的数据，并根据 url 中的参数使用上一个请求中的数据发出另一个请求。

我不知道如何解决这个问题，因为我可以在页面getInitialProps和getStaticProps组件中使用它们，而在组件中我根本无法使用它们。

下面的代码有效，但我不知道如何分解它，以便在服务器端完成登录，以便我仍然可以从 URL 获取参数。

function Result({surveyId, responseId, sessionKey}) {
  return (
    <>
      <div>surveyId: {surveyId}</div>
      <div>responseId: {responseId}</div>
      <div>sessionKey: {sessionKey}</div>
    </>
  )
}

Result.getInitialProps = async ({ query }) => {
  // Example of URL
  // http://localhost:3000/result?surveyId=12345&responseId=6
  const surveyId = query.surveyId
  const responseId = query.responseId

  const data = { method: 'get_session_key', params: ['admin', 'password'], id: 1 }

  const options = { 
    headers: {
      'connection': 'keep-alive',
      'content-type': 'application/json'
    }
  }
  
  const sessionKey = await axios.post(url, data, options).then(
    (response) => {
      return response.data.result
    },
    (error) => {
      console.log(error)
    }
  )

  return { 
    surveyId: surveyId,
    responseId: responseId,
    sessionKey: sessionKey,
  }
}

标签： next.jslimesurvey

解决方案

getStaticProps，getInitialProps或者getServerSideProps，它们都只在页面中执行。因为客户端向页面发出请求，所以在幕后，next.js 设置路由的方式，每当请求到达路由时，next.js 首先检查该页面是否具有这些功能，以及是否具有它首先运行这些函数，将结果作为 props 获取，然后运行组件函数并将 props 传递给组件。

getsStaticProps用于静态文件生成。一个很好的例子是生成博客。运行时npm run build，下一个 js 将运行所有 api 调用并用博客填充页面。所以实际上，如果您检查构建文件夹，在getStaticPath执行的页面的 html 文件中，所有数据都已经在该 html 文件中。数据将被服务器缓存，因此当用户向那些静态生成的文件发出请求时，数据将立即被提供。所以你不应该在 getStaticProps 中运行登录过程，因为登录是一个动态过程。

所有这些功能都用于预渲染以实现更好的 SEO 优化。但是，如果您想加载特定于用户的数据，则不需要为 seo 目的预先呈现特定于用户的数据。你也可以做客户端。

或者您可以使用 next.js api 函数，您将在 api 目录中编写函数，然后从 getServerSideProps 向 api 路由发送请求。这样，如果您需要在不同的页面中运行相同的代码，而不是编写相同的代码进行身份验证，您将请求 api 函数，它会为您处理。

推荐阅读