solidstep 0.1.5 → 0.1.7
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 +43 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -707,14 +707,55 @@ 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
|
+
|
|
749
|
+
## Environment Variables
|
|
750
|
+
As SolidStep is built using Vite, it follows the same guide as stated in [Vite docs](https://vite.dev/guide/env-and-mode) regarding environment variables.
|
|
751
|
+
|
|
710
752
|
## Future Plans
|
|
711
753
|
- Revalidate on demand
|
|
712
|
-
- Preloading/prefetching strategies
|
|
713
754
|
- Support for dynamic site.webmanifest, robots.txt, sitemap.xml, manifest.json, and llms.txt
|
|
714
755
|
- Support loading and error pages for parallel routes
|
|
715
756
|
- Support deferring loaders
|
|
716
757
|
- Image/font optimizations
|
|
717
|
-
- Possible
|
|
758
|
+
- Possible SSG, ISR, and PPR
|
|
718
759
|
- Advanced caching strategies
|
|
719
760
|
- WebSocket support
|
|
720
761
|
|