是否可以通过服务器有条件地控制isAmp？

Question

更新： 我会改写我的问题，因为它不够清楚。 我在这里要完成的是将 isAmp 从 getInitialProps 传递给组件，以控制它是 amp 还是常规组件。

我为什么要这样做？ 因为如果页面正在加载已删除的项目，我想进行一些客户端操作；由于 amp 全部在服务器上完成，我不能使用反应钩子，也不能在 10 秒后重定向页面。 希望这能解释得更好。

我有一个 amp 页面，我想在删除项目状态 (href="page/itemId") 时将其转换为常规页面，以便在 10 秒后使用客户端重定向用户。

要制作页面放大器，我们只需在文件顶部添加此导​​出

export const config = { amp: true };

我感兴趣的模式是“混合”模式。 有没有办法通过服务器传递 isAmp 值，然后像下一个钩子一样传递给客户端

const isAmp = useAmp();

我希望将值直接传递给上面的第一行代码：

export const config = { amp: isAmp };

我正在执行此过程以使客户端代码正常工作，例如将页面重定向到另一个 url。仅适用于非 amp 页面。

Answer 1

正如documentation 所说，使用hybrid 模式。

import {useAmp} from 'next/amp'

export const config = {amp: 'hybrid'} // Hybrid mode

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About