💧
SSR / SSG
Implement SSR and SST without friction
Atomico and automatic SSR support, you will not need additional packages, example:
Example
Express js
Component.js
package.json
// 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.
To use SSR in Node without tools like Next.js, Fresh or Astro you should import the path
atomico/ssr/load from the serverThe @atomico/react package allows you to take advantage of support for SSR or SSG designed for React/Preact, example:
- 1.Next.js:
- 2.
@atomico/astro allows to integrate SSR and SSG support to Astro build, We have used this integration to create the atomicojs.dev site.
Last modified 9mo ago