使用nextjs渲染html页面的特定部分

ngynwnxp  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(193)

我尝试使用nextjs只是我的网站的一部分。
导航栏已经存在于其他框架中,甚至没有React。我想在<div id="nextjs_div">...</div>中使用nextjs,即。只是我网站的一部分。
问题是,nextjs呈现了一个包含head和body组件的整个HTML页面。所以我想要的基本上是删除这些组件,只呈现一个div,它将被挂载到我的页面中。
我尝试修改page/_document,但无法成功。
你有一个想法,我怎么能做到这一点。

mcdcgff0

mcdcgff01#

我主要是为任何来自谷歌的人写这篇文章,因为我希望/怀疑OP在3年后仍然有这个问题。
这里有两种可能的用例:
1.使用NextJS作为模板/组件框架,支持使用JSX和服务器端渲染来创建部分HTML文档
1.使用NextJS作为React服务器,并创建部分HTML文档,这些文档本身在客户端上是React性的。
用例1是可行的,相对简单,如果有点黑客,但不是NextJS支持的用例。
用例2将涉及使用下面的代码作为起点。我的建议是用renderToString替换renderToStaticMarkup,然后开始研究NextJS如何实现React水合,因为你必须自己做。合理地说,如果你可以做任何事情来避免这样做,请使用React。
要使用NextJS呈现部分HTML文档,需要通过页面路由器和renderToStaticMarkup使用API处理程序。如果你使用renderToStaticMarkup与应用程序路由器,它会抱怨。
文件./src/pages/test.tsx

import type { NextApiRequest, NextApiResponse } from "next"
import { renderToStaticMarkup } from 'react-dom/server'

export default handler(
  req: NextApiRequest,
  res: NextApiResponse<string>
): void => {
  if (req.method !== 'GET') {
    return void res.status(405)
      .send(`Only GET requests are allowed on this endpoint`)
  }

  const jsxElement = <div id="nextjs_div">Test</div>
  const plaintextHtml = renderToStaticMarkup(jsxElement)
  res.status(200).send(plaintextHtml)
}
kiz8lqtg

kiz8lqtg2#

Next.js是一个用于创建完整页面的框架,很可能不适合用于创建页面的一部分。你可以使用React。
如果你可以从导航栏生成HTML,那么你可以将其插入到Next.js项目中。
参见Add HTML header to Document.js example

相关问题