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.