Next.js中的车辆图像,在服务器组件中解析,通过next/image渲染,缓存在你已经缓存的地方。

Next.js 在每个路由上为您提供一个服务器,这正是车辆图像的归属。在加载列表的地方解析车辆,将 URL 传递给 next/image,然后让 ISR 决定任何内容何时再次运行。

LP nextjs: hero1
LP nextjs: hero2
LP nextjs: s1

服务器组件是集成

没有客户端状态需要管理,也没有效果需要编写。获取列表的组件也会解析其图像,浏览器接收到的标记已经包含了URL。

  • API 密钥保存在服务器环境变量中。
  • 没有客户端捆绑包成本,因为没有内容发送到浏览器
  • 在应用路由器和路由处理程序中表现相同

集成,Next.js 版本。

四个步骤,其中之一是您只需编辑一次并忘记的配置文件。

01
安装并配置

npm i vehicleimagery,将密钥放在环境变量中,并在 next.config 中将我们的图像主机添加到 remotePatterns 中。

02
在服务器组件中解析。

加载列表的同一组件会解析其车辆并获取每个角度的URL。

03
通过 next/image 渲染。

传递带有明确宽度和高度的 URL。优化器处理 srcset,固定尺寸处理布局偏移。

04
使用 ISR 缓存

车辆图像会随着你的目录变化而变化,而不是每次请求都变化。通常,以小时为单位的重新验证窗口已经足够宽松。

LP nextjs: s2

两个缓存,你都需要

我们的 CDN 缓存图像,您的 ISR 缓存保存分辨率结果。它们共同意味着繁忙的车辆详情页面可以在不向服务器发出任何调用的情况下为数千次访问提供服务。

  • 稳定的 ID 使重新验证可预测。
  • 缓存查找,而不仅仅是字节
  • 在目录更改时重建,而不是每次部署时。

Next.js中的车辆图像,实践中

最常见的错误是将车辆图像视为客户端的问题,在一个免费提供服务器的框架中。一个卡片组件中的useEffect在开发中可以工作,但在生产中会暴露凭证、降低最大内容绘制时间并随着数据的逐步加载而重新布局网格。

在渲染过程中解析可以一次性消除这三个问题。列表查询和图像查找发生在同一个地方,结果由与页面其余部分相同的重新验证规则缓存,next/image 看到一个普通的远程 URL。集成最终变成了您本打算编写的文件中的几行代码。

Next.js团队想要的

next/image 能与您的 URL 兼容吗?

是的。在 next.config 中将我们的图像主机添加到 remotePatterns,优化器就会像对待其他远程图像一样对待它们。

使用应用路由还是页面路由?

两者皆可。应用路由更适合,因为解析属于服务器组件,但 getServerSideProps 或 getStaticProps 调用完全相同。

我应该使用 ISR 还是每次请求都获取?

几乎所有情况下都是 ISR。车辆图像随着您的目录变化,而不是每个访客,因此几小时的重新验证窗口通常已经足够准确。

我可以在边缘运行时运行吗?

是的。SDK 使用 fetch,没有特定于 Node 的依赖项,因此边缘路由处理程序和中间件可以正常工作,无需使用 shim。

我需要优化器吗?

不需要。您可以请求您渲染的精确宽度,并跳过 next/image。优化器方便生成 srcset,但不是必需的。

我如何处理我们不覆盖的车辆?

响应会告诉你何时使用了备用车型年份,这样你就可以在显示它、显示品牌占位符或隐藏图像插槽之间做出选择。

在预览部署中试用

告诉我们哪些路由显示车辆及其渲染的尺寸。我们会返回您需要的 URL 和 remotePatterns 条目。

  • 适合您精确布局的尺寸变体。
  • 一个用于 next.config 的 remotePatterns 片段
  • 试用版涵盖完整的预览部署
谢谢。我们已经收到您的消息,并将为您的配置提供图像 URL。
出了点问题。请重试,或写信到 info@vehicleimagery.com。

在功能标志后发布。

提供几个 VIN 或规格,以及您将把它们放在哪些路由上。您当天就能获得 URL 和配置片段。

通常在同一工作日