带有 getInitialProps 和 getStaticProps 的页面答案

【问题标题】：Page with getInitialProps and getStaticProps带有 getInitialProps 和 getStaticProps 的页面
【发布时间】：2021-03-05 12:54:22
【问题描述】：

我有一个页面，我需要使用 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,
  }
}

【问题讨论】：

您在问题中提到的组件是什么？第二个 API 调用是什么？你也不能在 getInitialProps 中实现它吗？否则，您可以使用 useEffect 钩子在 react 组件中进行 API 调用，因此请在 props 中传递您需要的信息。
我实际上并没有将组件放在示例中，我在文档中读到 getStaticProps 只能从页面级别访问。 nextjs.org/docs/basic-features/… 1.第一个API调用应该在服务器端进行，我想登录LimeSurvey，我通过登录名和密码来接收密钥， 2.在客户端，我想从中获取两个参数url 3. 下一个 LimeSurvey 调用 API 需要 key 和两个参数，我没有放在示例代码中，这个我可以在 getInitialProps 中做
目前还不清楚是什么问题。您正在服务器上进行第一次调用（通过 getInitialProps），并且将第二次调用所需的所有 3 个参数传递给组件。有什么问题？ “以便在服务器端完成登录”是什么意思？
我不想在 getInitialProps 中通过 XHR 传递登录名和密码。

标签： next.js limesurvey

【解决方案1】：

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

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

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

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

【讨论】：

你有什么建议？将登录名移至页面/api 有意义吗？

【解决方案2】：

我找到了另一个使用getStaticPaths 和dynamic routes 的解决方案。在我的情况下/pages/survey/[...params].js。

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

export function getStaticPaths() {
  return { paths: [], fallback: true }
}

export async function getStaticProps({ params }) {
  const surveyId = params.survey[0]
  const responseId = params.survey[1]

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

  const options = { 
    headers: {
      'connection': 'keep-alive',
      'content-type': 'application/json'
    }
  }

  const url = 'https://example.com'
  
  const sessionKey = await axios.post(url, data, options).then(
    (response) => {
      return response.data.result
    },
    (error) => {
      console.log(error)
    }
  )

  return {
    props: { surveyId, responseId, sessionKey },
    revalidate: false,
  }
}

【讨论】：