如何将 JS 反应页面转换为 HTML 页面

Question

所以我正在开发一个 CMS 项目，允许用户创建自己的网站，就像 wordpress 或其他 CMS 平台一样......

用户可以在他们的网站中实现不同的模态（文本模态、图像模态、搜索模态和其他东西），然后我们用创建的页面信息创建一个 object。

Object 包含所有页面信息，如下例所示：

{
 pageName: "Home page",
 pageLink: "home",
 pageSlug: "home-page",
 pageMetaDescription: "home meta description",
 pageMetaTitle : "home meta title",
 pageModals : [
  modal1: {
   //modal infos here.
  }
  modal2: {
   //modal infos here.
  }
 ]
}

我现在正在做的是将这些对象存储在数据库中，当用户请求页面时，我获取 object，然后生成一个 React JS 文件。 但这种方法对于性能或 SEO 来说并不是最好的。

所以我想从这些对象实际生成一个 HTML 文件并将它们存储在数据库中，当用户请求页面时，它只是加载生成的 HTML 文件而不是获取 Object 并填充反应 JS 页面。

如果您有这样做的想法或方法，我希望得到您的帮助。

Answer 1

是的，您可以使用 Next.js 来处理您的情况 接下来，您可以获取一些外部数据并根据 api 结果呈现 html

这是根据您的案例改编的文档中的示例

// pagesInfos will be populated at build time by getStaticProps()
function Blog({ pagesInfos }) {
  const { pageSlug, pageMetaDescription , pageMetaTitle ...} = pagesInfos
  return (
    <div>
      <h1>{postMetaTitle}</h1>
      <p>{pageMetaDescription}</p>
    </div>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../getPages')
  const pagesInfos = await res.json()

  // By returning { props: { pagesInfos } }, the Blog component
  // will receive `pagesInfos` as a prop at build time
  return {
    props: {
      pagesInfos,
    },
  }
}

export default Blog

这是完整的文档： https://nextjs.org/docs/basic-features/data-fetching/get-static-props