React Hook在Next.js AMP页面中不起作用

Question

为什么以下内容被排除在amp渲染的页面之外？

1. React生命周期方法
2. 像onClick一样响应回调
3. React Hooks

我真正的问题是，如果我在此页面上启用AMP(取消注释第三行(，router.query.title将不会打印。

import { useRouter } from 'next/router';
import withLayout from 'components/MyLayout';
//export const config = { amp: true };
const Content = () => {
const router = useRouter();
return (
<React.Fragment>
<h1>{router.query.title}</h1>
<p>This is the blog post content.</p>
</React.Fragment>
);
};
const Page = () => (
<Content />
)
export default withLayout(Page);

Answer 1

AMP页面仅在服务器端渲染，因此自定义javascript，如react生命周期方法、钩子、react回调无法在客户端运行。所有javascript进程仅在服务器上运行，并返回HTML输出，没有任何反应库或自定义js捆绑文件。要创建一个动态的AMP网站，您应该在AMP生态系统中进行思考，并使用其插件&AMP；组成部分要在AMP中处理状态，您可以使用AMP-bind组件。