Así que estoy trabajando en un proyecto de CMS que permite a los usuarios crear sus propios sitios web como wordpress u otras plataformas de CMS...
Los usuarios pueden implementar diferentes modos en sus sitios web (modal de texto, modo de imagen, modo de búsqueda y otras cosas), y luego creamos un objeto con la información de la página creada.
El objeto contiene todas las informaciones de la página como el siguiente ejemplo:
{ 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. } ] }Lo que estoy haciendo ahora es almacenar estos objetos en una base de datos y cuando el usuario solicita una página, busco el objeto y luego genero un archivo JS de reacción. Pero este enfoque no es el mejor para el rendimiento o el SEO.
Entonces, me gustaría generar un archivo HTML a partir de estos Objetos y almacenarlos en la base de datos y cuando el usuario solicita una página, simplemente carga el archivo HTML generado en lugar de buscar el Objeto y llenar una página de reacción JS.
Si tiene una idea o enfoque para hacer esto, me gustaría su ayuda.
Sí, puede usar Next.js para manejar su caso. Next le permite obtener algunos datos externos y renderizar html según el resultado de la API.
Aquí un ejemplo de documentación adaptada para sus casos
// 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 BlogAquí hay documentos completos: https://nextjs.org/docs/basic-features/data-fetching/get-static-props