Atomico and automatic SSR support, you will not need additional packages, example:
// If your version of node accepts top-level await just point to 'atomico/ssr'
import 'atomico/ssr/load';
import { html } from 'atomico';
import { Component } from './static/component.js';
import express from 'express';
const app = express();
const port = 3010;
app.use(express.static('static'));
app.get('/', (req, res) => {
res.send(`
<script type="importmap">
{
"imports": {
"atomico": "https://unpkg.com/atomico"
}
}
</script>
<script src="./component.js" type="module"></script>
${html`<${Component} value=${100}>
<h1>Message from server!</h1>
</${Component}>`.render()}
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
For this case we are using a JS-only component to avoid compilation in the example. you can achieve the same with JSX or TSX.
import { c, html, css, useProp } from 'atomico';
function component() {
const [value, setValue] = useProp('value');
return html`<host shadowDom>
<h1>Atomico webcomponent</h1>
<button onclick=${() => setValue(value + 1)}>${value} Increment</button>
<slot/>
</host>`;
}
component.props = {
value: { type: Number, value: 0 },
};
component.styles = css`
:host{
font-size: 32px;
font-family: arial;
}
`;
export const Component = c(component);
customElements.define('my-element', Component);
You will not need any additional package, atomic internally understands that the component must be hydrated
{
"name": "node-starter",
"type": "module",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node index.js"
},
"dependencies": {
"@atomico/site": "^0.1.0",
"atomico": "^1.61.1",
"express": "^4.17.1"
}
}
Unlike other libraries, Atomico automatically hydrates when mounting the component in the DOM, so no additional client configuration is required.
The @atomico/react package allows you to take advantage of support for SSR or SSG designed for React/Preact, example:
