2

I have a native web component (no, not react component)...that I would like to render server side (ssr) in Deno.

Here is the web component:

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;

It makes an api to get data, this all works fine client side in browsers, but then google can't crawl it becuase google still doesn't do well with javascript.

I want to see if its possible (With Deno and Oak) to render this component server side.

chovy
  • 72,281
  • 52
  • 227
  • 295

0 Answers0