Built-In Components
Nano JSX does provide some useful lightweight build-in components.
You will find their
source code here and some examples on
how to use these component in the examples section.
<Helmet />
Works just like react-helmet. Works client-side and SSR.
loading...<Img />
Lazy Loading Images. You should add a height and width if possible.
loading...<Router />
A isomorphic router is included.
loading...Problem:
- <Switch /> will only trigger a re-render if the <Route /> component changes.
- If <Route /> has a dynamic path like <Route exact path="/blog/:id"> and the user navigates from /blog/584' to '/blog/219', <Switch /> will NOT trigger a re-render and the user will never see '/blog/219'.
Solution:
You can use the Router Listener inside <Blog /> to listen for route changes.
This will allow you to fetch the new blog post (based on the new id in "/blog/:id") and update the
component.
(see example below and this video)
Router Listener
loading...<Suspense />
Use Suspense for async fetching resources from your server. Add cache if you want
to cache the result of the promise.
Check
the examples to see it in action.
loading...<Link />
Nano JSX provides a fancy Link Component for prefetching pages.
loading...<Visible />
This children of Visible will only be rendered and added to the dom, if they are visible. This is useful, for example, for a comment section. The root elements of Visible needs to be DOM element or a Fragment with at least one DOM node as direct child.
loading...