标签: getserversideprops

我正在阅读 Nextjs 获取文档的数据部分，我想到了一个问题。

Nextjs 可以使用 getStaticProps、getStaticPaths、getInitialProps 和 getServersideProps 获取数据，对吗？

但正如我引用的那样，有些发生在构建时：

getStaticProps（静态生成）：在构建时获取数据

这个构建时间是什么时候发生的？

是在我们运行 npm run build 时吗？（构建生产版本）

或者当用户访问我们的 Nextjs 应用程序时？（在每个请求上）

希望有人可以帮助我，也许它可以帮助其他人！

我使用DOMPurify.sanitize()insidedangerouslySetInnerHTML={{}}来显示innerHtml从数据库返回的。出于最初的目的，我在此页面上使用getServersideProps()with next-redux-wrapper。

我安装了 dompurify: npm i -S dompurify，当前版本是：“^2.2.6”。

我的代码：

    import DOMPurify from 'dompurify';
    import { useSelector } from 'react-redux';
    import { END } from 'redux-saga';
    import wrapper from '../redux/storeSetup';

    const EmployeePage = () => {
    
        const blog = useSelector(state => state.data);

        const html_body = blog[0].body_html;
    
        const clean = DOMPurify.sanitize(html_body);
    
        return(
           <div className="mainContainer">
                <div dangerouslySetInnerHTML ={{ __html: clean }} />
                <ul>
                    {blog.map((item) => (
                        <li key={item.author}>
                            <span>{item.author}</span><br/>
                            <span>{item.title}</span>
                            <h4>{item.body_delta}</h4>
                            <p>{item.body_html}</p>
                            <p>{item.created_on}</p> …

因此，我基于这个NextJS 示例构建了一个 Next 应用程序，这意味着我有 GraphQL 路由和一个用于从应用程序中的 API 获取数据的 Apollo 服务器。该示例展示了如何在 getStaticProps() 中获取，这对我来说效果很好，但我需要实现 getServerSideProps()，因为提供的内容取决于 URL 查询和参数，最多有 6000 个不同的 URL，因此我无法使用 getStaticPaths()。该代码在开发模式下工作完全正常...但是，当部署到 Vercel 时，它在开始时工作，有时在稍后工作，但 95% 的时间在页面上显示 504 BAD GATEWAY 错误。

[s]/[v].tsx 的代码：https://pastecord.com/uwojuzudaw.typescript

下面这句话大家都很熟悉：You should not use getInitialProps, but getServerSideProps instead. 我已经使用构建了我的应用程序getInitialProps，现在我面临以下问题：“我是否应该将 getInitialProps 替换为 getServerSideProps？”，如果是这样，我应该如何以正确的方式进行操作而不损坏我的应用程序？

今天，我getInitialProps在几个重要的地方使用：

1. 在我的习惯_app.js中react-redux：

class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        return {
            pageProps: {
                ...(Component.getInitialProps
                    ? await Component.getInitialProps(ctx)
                    : {})
            }
        };
    }

    render() {
        const { Component, pageProps, store } = this.props;
        return (
            <>
                <Provider store={store}>
                    <Component {...pageProps} />
                </Provider>
            </>
        );
    }
}

export default withRedux(initStore)(withReduxSaga(MyApp));

2. 在页面的一些 HOC 中：检查用户是否通过身份验证（否则重定向），如果用户通过身份验证，则初始化 redux 存储，获取用户信息。 …

我在 next.js 中使用 getServerSideProps 函数和 Next-Auth ，但出现 TypeError：

TypeError: Cannot destructure property 'nextauth' of 'req.query' as it is undefined.

当我使用控制台检查时，它确实返回未定义。

我一直在关注 NextAuth.js 的官方文档：https ://next-auth.js.org/configuration/nextjs#getserversession

我的功能：

export const getServerSideProps = async (context: { req: NextApiRequest; res: NextApiResponse<any>; }) => {

  const session = await getServerSession(context.req, context.res, authOptions)

  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false
      }
    }
  }

  return {
    props: {
      session,
    }
  }
}

当我做：

const {req: query} = context
console.log(query == undefined)

控制台返回 false，但 …

有没有办法从多个 API 路由中获取数据getServerSideProps()？

我有一个表，我需要显示来自多个 MongoDB 集合的数据，并试图弄清楚如何提取这些数据。

本质上，我需要结合这两个功能，但似乎无法找到最好的方法

export async function getServerSideProps() {
  const res = await fetch(`${process.env.APP_DOMAIN}/api/${apiRoute}`);
  const { data } = await res.json();
  return { props: { operations: data } };
}

export async function getServerSideProps() {
  const res = await fetch(`${process.env.APP_DOMAIN}/api/${apiRoute2}`);
  const { data } = await res.json();
  return { props: { incidents: data } };
}

我可能正在尝试一些愚蠢的事情，因此非常感谢指向正确方向的指针！！

我已经设置了一个带有 nookies 的 cookie，它存储用户选择的所有产品的值。我想使用 getServerSideProps 在服务器端获取 cookie 并将值作为道具传递。我必须在所有页面上显示 cookie 的值。

当我在 _app.js 中尝试 getServerSideProps 时。它没有工作，甚至没有运行代码。

有什么办法吗？