# 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" %}

```javascript
// 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.

&#x20;

```javascript
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

```json
{
  "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**:&#x20;
   * Example: <https://example-next-js-mocha.vercel.app/>
   * Repo: <https://github.com/atomicojs/example-next-js>
2. **Fresh**:&#x20;
   * Example: <https://atomico-webcomponents-tgd58wd8ntcg.deno.dev/>
   * Repo: <https://github.com/atomicojs/example-fresh-deno>

### **Astro build**

[@atomico/astro](https://github.com/atomicojs/astro) allows to integrate SSR and SSG support to Astro build, We have used this integration to create the [atomicojs.dev](https://atomicojs.dev/) site.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atomico.gitbook.io/doc/guides/ssr-ssg.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.