Firebase Hosting: Cloud Functions para Contenido Dinámico y SEO
Clase 15 de 22 • Curso de Firebase 5: Cloud Functions
Contenido del curso
Clase 15 de 22 • Curso de Firebase 5: Cloud Functions
Contenido del curso
Firebase hosting permite usar las cloud functions para procesamiento al lado del servidor. Esto permite que puedas generar contenido dinámico para tu sitio alojado en el hosting de firebase. Además puedes hacer:
¿Cómo lo haces? Primero creas una función, ejemplo:
exports.renderPost = functions.https.onRequest((req, resp) => { console.log(req.query.idPost) return admin .firestore() .collection('posts') .doc(req.query.idPost) .get() .then(post => { return resp.status(200).send(`<!doctype html> <head> <title>Post</title> </head> <body> <article> <div> <h2>${post.data().titulo}</h2> </div> <div> <iframe type="text/html" width="500" height="385" src='${ post.data().videoLink}' frameborder="0"></iframe> </div> <div> Video </div> <div> <p>${post.data().descripcion}</p> </div> </article> </body> </html>`) }) })
Ahora agregamos una configuración de rewrite en el archivo firebase.json:
{ "hosting": { "public": "public", "rewrites": [ { "source": "/post", "function": "renderPost" } ] } }
Desplegamos la función y la aplicación web a firebase y probamos con las URL
https://your-firebase-project-id.firebaseapp.com/post?idPost=ID_POST
Veremos que nos muestra una página con el contenido HTML definido en la función.
Además para mejorar el rendimiento al momento de renderizar la página podemos usar el caché de HTTP tanto el de los CDNs (Content Delivery Network) como el del browser. Esto lo puedes hacer de la siguiente forma:
resp.set('Cache-Control', 'public, max-age=300, s-maxage=600');
En esta línea estamos modificando el cache, asignado un tiempo de caché al browser de 5 minutos por medio del max-age y un tiempo de caché al CDN de 10 minutos por medio del s-maxage.
Enlace sugerido:
