如何將 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