https://github.com/dashpilot/alpinejs-ssr
Dead simple server-side-rendering for Alpine.js
https://github.com/dashpilot/alpinejs-ssr
alpine-js alpinejs prerendering server-side-rendering ssg ssr
Last synced: 19 days ago
JSON representation
Dead simple server-side-rendering for Alpine.js
- Host: GitHub
- URL: https://github.com/dashpilot/alpinejs-ssr
- Owner: dashpilot
- Created: 2023-08-27T23:06:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T01:01:28.000Z (4 months ago)
- Last Synced: 2025-03-25T13:11:30.241Z (about 1 month ago)
- Topics: alpine-js, alpinejs, prerendering, server-side-rendering, ssg, ssr
- Language: JavaScript
- Homepage:
- Size: 11.7 KB
- Stars: 29
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Alpine.js SSR
## Dead simple server-side-rendering for Alpine.js
Alpine.js SSR allows you to server-side-render (SSR) your Alpine components in lightweight and dead-simple way. No need to set-up a Puppeteer-server, just import the module and off you go. After server-side-rendering your components stay fully hydratable and interactive!
## Why?
I love the simplicity and power of Alpine.js, but was missing the option of server-side rendering for SEO and robustness. There were no SSR options available for Alpine.js, so I built my own.
## How to?
First install the package from npm:
```
npm install alpinejs-ssr
```
Import the module and call the `compile` function:
```js
import {compile} from alpinejs-ssr
const html = `your Alpine.js html`
const data = {"your":"data"}
compile(html, data);
```
Check out example.js for a full demo
## Supported Alpine.js attributes
Supports most attributes that make sense in a server context:
`x-text`, `x-html`,`x-for`,`:src`,`:id`
Let me know if you're missing any. `x-if` has not been implemented for SSR, because it would break interactivity on the client-side if the server would remove those blocks.
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.