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

Question

So I'm working on a CMS project that allows users to create their own websites just like wordpress or other CMS platforms...

The users can implement different modals into their websites (text modal, image modal, search modal and other stuff), and then we create an object with the created page infos.

The Object contains all the page infos like the example bellow:

{
 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.
  }
 ]
}

What I'm doing now is stocking these Objects on a database and when the user requests a page, I fetch the object and then generate a react JS file. But this approach isn't the best for performance or SEO.

So I would like to actually generate an HTML file from these Objects and store them in the database and when the user requests a page, it just loads the generated HTML file instead of fetching the Object and populating a react JS page.

If you have an Idea or approach to do this, I would like your help.

Answer 1

Yes you can use Next.js to handle your case Next allow you to fetch some external data and render html based on api result

Here an example from documentation adapted for your cases

// 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

Here is full docs: https://nextjs.org/docs/basic-features/data-fetching/get-static-props