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...

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...