SSR Example

[maxwaiyaki]

Is there an SSR example for Alpine.js??

[ryangjchandler]

Hi @maxwaiyaki, Alpine doesn't have any SSR support since the original design idea / philosophy was to use it with your existing server side / rendered markup. Just sprinkling bits of reactivity on top.

Since then x-for has been added, but there's no solid approach for using x-for with existing lists.

[Angelelz]

Is this still the case in 2024?

[acrodrig]

This is what I am doing for SSR (using JSDOM), it is rather clunky though.

Object.assign(global, { navigator: new JSDOM().window.navigator });
Object.assign(global, { MutationObserver: class { observe() {} } });

// eslint-disable-next-line @typescript-eslint/no-var-requires
const Alpine = require("alpinejs");
const xml = fs.readFileSync(__dirname + "/../test/simple.xml");
const { window } = new JSDOM(xml, { contentType: "application/xml" });

Object.assign(global, { window, document: window });

const el = window.document.documentElement;
Alpine.initializeComponent(el, {});

[devgauravjatt]

ReferenceError: MutationObserver is not defined

[devgauravjatt]

give a full code with html

[dashpilot]

I've just released Alpinejs SSR which is simple to use and also supports Alpine.js hydration/interactivity after server-side-rendering.