solidstep 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -707,14 +707,52 @@ If accidentally imported on the client, it will throw:
|
|
|
707
707
|
Error: This module is only available on the server side.
|
|
708
708
|
```
|
|
709
709
|
|
|
710
|
+
## Preloading/prefetching strategies
|
|
711
|
+
SolidStep supports various preloading and prefetching strategies to enhance user experience by loading data and resources ahead of time. This can significantly reduce perceived latency and improve navigation speed within your application. Solidstep does not include any preloading/prefetching by default, but you can implement your own strategies using the built-in fetch utilities and SolidJS features.
|
|
712
|
+
|
|
713
|
+
Some common strategies include:
|
|
714
|
+
- **Link Prefetching**: Use the `<link rel="prefetch">` tag to hint the browser to prefetch resources for links that users are likely to click on next.
|
|
715
|
+
- **Using Intersection Observer**: Implement lazy loading and prefetching of data when certain elements come into the viewport.
|
|
716
|
+
- **Using [instant.page](https://instant.page/)**: A small library that preloads pages on hover or touchstart events.
|
|
717
|
+
```tsx
|
|
718
|
+
export const RootLayout = (props) => {
|
|
719
|
+
return (
|
|
720
|
+
<body>
|
|
721
|
+
...
|
|
722
|
+
<NoHydration>
|
|
723
|
+
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
|
|
724
|
+
</NoHydration>
|
|
725
|
+
</body>
|
|
726
|
+
);
|
|
727
|
+
};
|
|
728
|
+
```
|
|
729
|
+
- **Using [Foresight.js](https://foresightjs.com/)**: A library that preloads pages based on user behavior and patterns.
|
|
730
|
+
```tsx
|
|
731
|
+
import { ForesightManager } from "js.foresight";
|
|
732
|
+
import { onMount } from "solid-js";
|
|
733
|
+
|
|
734
|
+
export const RootLayout = (props) => {
|
|
735
|
+
onMount(() => {
|
|
736
|
+
ForesightManager.initialize({
|
|
737
|
+
// Configuration options
|
|
738
|
+
});
|
|
739
|
+
});
|
|
740
|
+
return (
|
|
741
|
+
<body>
|
|
742
|
+
...
|
|
743
|
+
</body>
|
|
744
|
+
);
|
|
745
|
+
};
|
|
746
|
+
```
|
|
747
|
+
- **Custom Preloading Logic**: Write custom logic to preload data for specific routes or components based on user behavior or application state.
|
|
748
|
+
|
|
710
749
|
## Future Plans
|
|
711
750
|
- Revalidate on demand
|
|
712
|
-
- Preloading/prefetching strategies
|
|
713
751
|
- Support for dynamic site.webmanifest, robots.txt, sitemap.xml, manifest.json, and llms.txt
|
|
714
752
|
- Support loading and error pages for parallel routes
|
|
715
753
|
- Support deferring loaders
|
|
716
754
|
- Image/font optimizations
|
|
717
|
-
- Possible
|
|
755
|
+
- Possible SSG, ISR, and PPR
|
|
718
756
|
- Advanced caching strategies
|
|
719
757
|
- WebSocket support
|
|
720
758
|
|