Skip to content

Latest commit

 

History

History
134 lines (101 loc) · 3.44 KB

ssr-ssg.md

File metadata and controls

134 lines (101 loc) · 3.44 KB
description
Implement SSR and SST without friction

💧 SSR / SSG

Node

Atomico and automatic SSR support, you will not need additional packages, example:

{% tabs %} {% tab title="Example" %} {% embed url="https://stackblitz.com/edit/atomico-ssr-express?embed=1&file=index.js&hideExplorer=1&view=preview" %} {% endtab %}

{% tab title="Express js" %}

// 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}`);
});

{% endtab %}

{% tab title="Component.js" %} 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);

{% endtab %}

{% tab title="package.json" %} 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"
  }
}

{% endtab %} {% endtabs %}

Unlike other libraries, Atomico automatically hydrates when mounting the component in the DOM, so no additional client configuration is required.

{% hint style="info" %} To use SSR in Node without tools like Next.js, Fresh or Astro you should import the path atomico/ssr/load from the server {% endhint %}

SSR/SSG via @atomico/react

The @atomico/react package allows you to take advantage of support for SSR or SSG designed for React/Preact, example:

  1. Next.js:
  2. Fresh:

Astro build

@atomico/astro allows to integrate SSR and SSG support to Astro build, We have used this integration to create the atomicojs.dev site.

{% embed url="https://github.com/atomicojs/atomicojs.dev" %}