时间戳

首页 > 解决方案 > Next.js组件在 Netlify 上慢，在 Vercel 上快

reactjs - Next.js组件在 Netlify 上慢，在 Vercel 上快

问题描述

我有一个相对简单的 Next.js 应用程序，并且正在使用 Next.js 的<Image />组件来渲染两个小图像，如下所示：

<Row className="justify-content-center m-0 mt-3 text-center">
  <Col xs={4} md={3} lg={2} className="pr-xs-0  pr-sm-5 pl-0">
    <Image
      src="/assets/images/logo1.png"
      alt="Logo etc1"
      width={320}
      height={150}
    />
  </Col>
  <Col xs={4} md={3} lg={2} className="pl-xs-0 pr-0 pl-sm-5">
    <Image
      src="/assets/images/logo2.jpg"
      alt="Logo etc2"
      width={320}
      height={150}
    />
  </Col>
</Row>

这两个小图像（每个大约 50Kb）在开发过程中立即加载，但在 Netlify 上部署时它们花费了大量的时间（最多 4 秒！！）。

部署到 Vercel 的完全相同的存储库可以立即渲染图像。

值得一提的是，使用普通的 html标签在 Vercel 和 Netlify 上渲染它们的速度都非常快，但是当延迟加载 Next.js 的组件<img />时，我很困惑地看到在 Netlify 上加载这些不起眼的图像需要多长时间。<Image />

有什么我想念的吗？

标签： reactjsnext.jsnetlify

解决方案

Vercel 在您的应用程序前面使用某种服务器，用于在使用 next/image 时优化图像。

尝试使用 Next.js 的 Netlify 插件https://github.com/netlify/netlify-plugin-nextjs。但是仍然存在一些问题：https ://github.com/netlify/netlify-plugin-nextjs/issues/155

推荐阅读