amazon-web-services - NEXTJS 放大缓慢的服务器响应

Question

我在 AWS Amplify 上安装了一个 SSR App Nextjs 12，它太慢了。

记录 getServerSideProps() 这是结果:加载页面需要 9 秒，但 getServerSideProps 中的代码只需要不到 0.5 秒。

这是服务器日志:

START RequestId: 94ced4e1-ec32-4409-8039-fdcd9b5f5894 Version: 300
2022-09-13T09:25:32.236Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    1 [09:25:32.236] -
2022-09-13T09:25:32.253Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    2 [09:25:32.253] -
2022-09-13T09:25:32.255Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    3 [09:25:32.255] -
2022-09-13T09:25:32.255Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    4 [09:25:32.255] -
2022-09-13T09:25:32.431Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    5 [09:25:32.431] -
2022-09-13T09:25:32.496Z    94ced4e1-ec32-4409-8039-fdcd9b5f5894    INFO    6 [09:25:32.496] -
END RequestId: 94ced4e1-ec32-4409-8039-fdcd9b5f5894
REPORT RequestId: 94ced4e1-ec32-4409-8039-fdcd9b5f5894  Duration: 9695.59 ms    Billed Duration: 9696 ms    Memory Size: 512 MB Max Memory Used: 206 MB 

这是代码:

export async function getServerSideProps(context) {
  console.log("1 [" + new Date().toISOString().substring(11, 23) + "] -");

  let req = context.req;
  console.log("2 [" + new Date().toISOString().substring(11, 23) + "] -");

  const { Auth } = withSSRContext({ req });

  console.log("3 [" + new Date().toISOString().substring(11, 23) + "] -");

  try {
    console.log("4 [" + new Date().toISOString().substring(11, 23) + "] -");

    const user = await Auth.currentAuthenticatedUser();
    console.log("5 [" + new Date().toISOString().substring(11, 23) + "] -");

    const dict = await serverSideTranslations(context.locale, ["common", "dashboard", "footer", "hedgefund", "info", "etf", "fs"]);
    console.log("6 [" + new Date().toISOString().substring(11, 23) + "] -");

    return {
      props: {
        exchange: context.params.exchange,
        ticker: context.params.ticker,
        username: user.username,
        attributes: user.attributes,
        ...dict,
      },
    };
  } catch (err) {
    return {
      redirect: {
        permanent: false,
        destination: "/auth/signin",
      },
      props: {},
    };
  }
}

Answer 1

这不是答案，而是替代方案。

我尝试使用 Amplify 实现我的实现，因为 Vercel 爱好帐户上的 getServerSideProps 给出了函数超时错误。但是，我认为 Amplify 的 Next.js 部署尚未优化。

我没有使用 getServerSideProps，而是使用了 getStaticPaths 和 getStaticProps，因此我总是限制从我的 API 获取的路径数量。

在客户端

export const getStaticPaths: GetStaticPaths = async () => {
  // This route to my API only gets paths(IDs)
  const res = await getFetcher("/sentences-paths"); 

  let paths = [];
  if (res.success && res.resource) {
    paths = res.resource.map((sentence: any) => ({
      params: { sentenceSlug: sentence._id },
    }));
  }

  return { paths, fallback: "blocking" };
};

在 API 上

const getSentencePaths = async (req, res) => {
  const limit = 50;

  Sentence.find(query)
    .select("_id")
    .limit(limit)
    .exec()
    .then((resource) => res.json({ success: true, resource }))
    .catch((error) => res.json({ success: false, error }));
};

这意味着即使我有 100 000 个句子，在构建时也只会渲染 50 个。其余句子是按需生成的，因为我们有 fallback: "blocking"。 See docs

这是我的 getStaticProps 的样子

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const sentenceSlug = params?.sentenceSlug;
  const response = await getFetcher(`/sentences/${sentenceSlug}`);

  let sentence = null;
  if (response.success && response.resource) sentence = response.resource;

  if (!sentence) {
    return {
      notFound: true,
    };
  }

  return {
    props: { sentence },
    revalidate: 60,
  };
};

正如您在上面看到的，我使用了 revalidate: 60 seconds see docs但由于您想使用 getServerSideProps，所以这不是完美的解决方案。

完美的解决方案是On-Demand Revalidation .有了这个，每当您更改页面中使用的数据时，例如更改 sentence 内容，您都可以触发 webhook 以重新生成由 getStaticProps 创建的页面.因此，您的页面将始终更新。

通过这个 youtube 教程实现按需重新验证，非常全面 https://www.youtube.com/watch?v=Wh3P-sS1w0I&t=8s&ab_channel=TuomoKankaanp%C3%A4%C3%A4 .

Vercel 上的 Next.js 运行速度更快、效率更高。希望我有所帮助。