是否可以在 Next JS 中的页面内嵌入页面​​？

Question

假设有第 1 页和第 2 页。 第 1 页是服务器端呈现的 第 2 页是静态 HTML

我想要做的是将第 2 页嵌入到第 1 页中。 第 1 页提供有关当前登录用户的布局和上下文信息。 页面 2 是实际内容将显示在页面 1 的布局内。

有可能吗？我可以反之亦然吗？ （在 StaticHTML 中嵌入 ServerSideRendered 页面）

Answer 1

可以在服务器端渲染的页面（page1）中嵌入静态页面（page2），并将从page1获取的数据作为props传递给page2：

import Layout from '../path/to/layout'
import Page2 from './path/to/page2'

export default function Page1({data}){

  return(
    <Layout>
    <Page2 data={data}/>
    </Layout>
  )
}

export async function getServerSideProps(){
  const response = await fetch('/url/to/json/api')
  const data = response.json()

  return {
    props:{
      data
    }
  }
} 

但是我想不出它的用例。

不幸的是，它不能以其他方式工作。如果您将服务器端渲染页面 (page1) 嵌入到静态页面 (page2) 中，getServerSideProps 函数将不会被触发，并且数据对象将保持未定义状态。