Next.js 将js服务器端旁边的组件导入到另一个组件（无法读取未定义的属性映射）

我正在测试一个简单的next.js react应用程序

误差如下；TypeError:无法读取未定义的属性“map”

服务器端.js:

...

export default function Home({books}) {
  
    return (

        <Grid container spacing={2}>            
            {
                books && books.map(row => (
                    <Grid key={row.id} item xs={12} sm={4}>
                       <p>{row.subject}</p>
                    </Grid>
                ))
            }
        </Grid>
        
    );
}

export async function getServerSideProps() {

    const { data } = await client.query({
        query: gql`
            query books{
                books{
                    id
                    subject                 
                  
                }
            }
        `,
    });

    return {
        props: {
            books: data.books,
        },
    };
}

...
const books= dynamic(
    () => import('./server-side'),
    { loading: () => <div><LinearProgress /></div> }
)

export default function Index() {

    return (
<React.Fragment>
            <books/>
</React.Fragment>
  );
}

。。。
导出默认函数Home（{books}）{
返回(
{
books&&books.map（行=>(
{row.subject}

))
}
);
}
导出异步函数getServerSideProps（）{
const{data}=wait client.query({
查询：gql`
查询书籍{
书{
身份证件
主题
}
}
`,
});
返回{
道具：{
书籍：数据，书籍，
},
};
}

---

index.js:

...

export default function Home({books}) {
  
    return (

        <Grid container spacing={2}>            
            {
                books && books.map(row => (
                    <Grid key={row.id} item xs={12} sm={4}>
                       <p>{row.subject}</p>
                    </Grid>
                ))
            }
        </Grid>
        
    );
}

export async function getServerSideProps() {

    const { data } = await client.query({
        query: gql`
            query books{
                books{
                    id
                    subject                 
                  
                }
            }
        `,
    });

    return {
        props: {
            books: data.books,
        },
    };
}

...
const books= dynamic(
    () => import('./server-side'),
    { loading: () => <div><LinearProgress /></div> }
)

export default function Index() {

    return (
<React.Fragment>
            <books/>
</React.Fragment>
  );
}

。。。
常数=动态(
（）=>导入（'./服务器端'），
{正在加载：（）=>}
)
导出默认函数索引（）{
返回(
);
}

---

TypeError:无法读取未定义的属性“map” 我正在使用Next.js。请看下面我的代码

---

据我所知，动态导入的目的是在客户端站点中添加组件/函数等，以使初始js大小保持较低。您正在获取整个SSR页面，这不起作用。

getServerSideProps

只能用于页面组件-这些页面组件需要位于

pages

文件夹中，您无法将它们导入其他组件。