The Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).
npm install speculation-rulesThe Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).
You can read about it on the MDN here.
``bash`
npm i speculation-rules
| Props | type | default values |
| ------------- | ------------- | ------------- |
| prerenderRules | array | `[{where: {and: [{ href_matches: "/*" },{ not: { selector_matches: ".no-prerender" } },],},},] ``
| prefetchRules | array | [] `
For pages directory : use in _app.js
For App Directory : use in the root layout.js
`jsx
import Speculationrules from "speculation-rules";
`
This is the default Speculations configuration.
`js`
{
prerender: [{
where: {
and: [{
href_matches: "/*"
}, {
not: {
selector_matches: ".no-prerender"
}
}]
}
}],
prefetch: []
}
`jsx``
{
"where": {
"and": [
{ "href_matches": "/*" },
{ "not": { "href_matches": "/logout" } },
{ "not": { "href_matches": "/\\?(^|&)add-to-cart=*" } },
{ "not": { "selector_matches": ".no-prerender" } },
{ "not": { "selector_matches": "[rel~=nofollow]" } }
]
}
}
]}
prefetchRules={[
{
"urls": ["next.html", "next2.html"],
"requires": ["anonymous-client-ip-when-cross-origin"],
"referrer_policy": "no-referrer"
}
]}
/>