SINGLE PAGE XHR
Single Page XHR enhancement for SSR powered web applications. SPX is a lightening fast, lightweight (8kb gzip) push~state solution that (pre)-fetches HTML over the wire and uses the response to perform targeted fragment replacements. The module maintains an in-memory snapshot cache of fetched pages which prevents subsequent requests from occurring, and instantaneous navigation in a controlled a persisted manner.
Documentation
Documentation lives on spx.js.org
Features
- Simple and painless drop-in integration.
- Pre-fetching capabilities using hover, intersection or proximity observers.
- Snapshot caching engine and per-page state control.
- Powerful pub/sub event driven lifecycle triggers.
- Provides a client side DOM hydration approach.
- Supports multiple replace, append and prepend fragment targets.
- Gracefully handles script and style asset evaluation.
- Attribute driven programmatic control.
Installation
PNPM
pnpm add spx
YARN
yarn add spx
NPM
npm install spx --save
CDN
https://unpkg.com/spx
Usage
SPX is distributed as an ESM module and designed for usage in browser. You need to establish a connection to invoke the module.
import spx from 'spx';
spx.connect({
targets: [
'header',
'main'
]
})(function (session) {
// Callback is invoked on DOMContentLoaded.
console.log(session)
});
An SPX connection will initialize an SPX session. In the above example we are targeting the <header>
and <main>
nodes. In your web application, ensure both elements exist for each page, for example:
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Hello World!</h1>
</main>
Take a look at the documentation to learn how to refine and configure SPX.
Special Thanks
Special Thanks / Спасибі to Alexey for the SPX npm registry name.
License
Licensed under MIT