我不确定我是否正确理解nextjs SSR。我有一个使用getServerSideProps的索引页面，所以我假设这个页面预渲染为HTML，但它只渲染一个div，一个json对象和nextjs脚本，页面在客户端由JS渲染。
...
<body>
<div id="__next"></div>
<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"posts":[...
...在getServerSideProps中，博客文章通过API获取并传递给组件。
app/src/pages/index.tsx
...
const HomePage: NextPage<
InferGetServerSidePropsType<typeof getServerSideProps>
> = (props: HomePageProps) => {
return (
<DefaultTemplate dataTestId="index">
<IndexPage posts={props.posts} />
</DefaultTemplate>
)
}
...
export const getServerSideProps = async (context: GetStaticPropsContext) => {
const data = await fetchPosts()
const posts = data.posts || []
return {
props: {
posts,
},
}
}
export default HomePage所以我希望会有HTML f.e. <article><p>this that</p></article>作为源代码。
但它不是，我得到上面的脚本标记与JSON数据代替。
除了next返回上面的div之外，没有普通HTML是正确的吗？
我错过了什么？
1条答案
按热度按时间swvgeqrz1#
要使其工作，所有嵌套组件都必须是SSR。否则，您将得到确切的结果--只有最外面的一个
<div>，JSON和在客户端呈现其余部分的props和代码。