es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo rendereo un componente web nativo con Deno?

10 Jun, 2023 Programación

Tengo un componente web nativo (no, no es un componente de React) que me gustaría representar en el lado del servidor (ssr) en Deno.

Aquí está el componente web:

import { api } from '/global.js';

class StatsBar extends HTMLElement {
  constructor() {
    super();
    this.stats = {};
  }

  async getStats() {
    const res = await fetch(`${api}/stats`);
    const data = res.ok && await res.json();
    this.stats = data;
  }

  async connectedCallback() {
    await this.getStats();

    this.innerHTML = `
        <style>
            .stats {
                margin: 2rem 0;
                display: block;
                width: 100%;
                text-align: center;
                padding: 1rem;
            }
        </style>
        <div class="stats">
            Read <a href="/recent">${this.stats.urls.count.toLocaleString()}</a> articles on <a href="/tags">${this.stats.tags.count.toLocaleString()}</a> topics by ${this.stats.visits.count.toLocaleString()} visitors so far...
        </div>
    `;
  }
}

customElements.define("stats-bar", StatsBar);

export default StatsBar;

Hace una API para obtener datos, todo esto funciona bien en el lado del cliente en los navegadores, pero luego Google no puede rastrearlo porque aún no se lleva bien con JavaScript.

Quiero ver si es posible (con Deno y Oak) renderizar este componente en el lado del servidor.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible renderizar el componente web mencionado anteriormente en el lado del servidor utilizando Deno y Oak.

    El primer paso consistiría en crear un archivo del servidor (por ejemplo, index.ts) que importe Oak y el componente StatsBar. El servidor deberá poder responder a solicitudes HTTP y renderizar nuestro componente cuando se le solicite.

    A continuación, debemos asegurarnos de que las dependencias del componente se carguen en el entorno del lado del servidor. Deberá importar ‘web-comp’ (un polyfill para componentes web) y ‘node-fetch’ (un polyfill fetch) en su archivo del lado del servidor, lo que hará que estas bibliotecas JS estén disponibles en el entorno de Deno.

    Luego, usaríamos el siguiente código en nuestro servidor:

    import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
import StatsBar from "./StatsBar.ts";

const app = new Application();
const router = new Router();

router.get("/", async (ctx) => {
  const statsBar = new StatsBar();
  await statsBar.getStats();

  const document = new DOMParser().parseFromString(`
    <html>
      <head>
        <title>Ejemplo de renderizado del lado del servidor</title>
      </head>
      <body>
        ${statsBar.outerHTML}
      </body>
    </html>
  `, "text/html");

  ctx.response.body = document.documentElement.outerHTML;
});

app.use(router.routes());

await app.listen({ port: 8000 });

    En el código anterior, estamos creando un servidor simple de Oak que escucha en el puerto 8000. Cuando recibimos una solicitud HTTP a “/”, creamos una instancia del componente StatsBar y llamamos a su método getStats para realizar la llamada a la API, tal como lo haríamos en el navegador. Luego, creamos un documento HTML con nuestro componente agregado al cuerpo, y devolvemos el documento HTML completo como respuesta.

    Con esta configuración, el servidor renderizará nuestro componente StatsBar, lo que significa que los motores de búsqueda podrán rastrear adecuadamente el contenido. Esta técnica puede ser útil para mejorar la optimización para motores de búsqueda (SEO) de un sitio web.

Comments are closed.