preact-lazy-route

preact-lazy-route

preact-lazy-route is a component built for preact-router. Using preact-lazy-route in combination with a module bundler such as webpack, allows you to implement code splitting on routes with the option to perform server side rendering in your preact application.

Install

$ npm install --save preact-lazy-route

Usage

import { h, render } from 'preact';
import Router from 'preact-router';
import LazyRoute from 'preact-lazy-route';

const App = () => (
  <Router>
    <LazyRoute path="/" component={() => import('./components/home')} />
    <LazyRoute path="/about" component={() => import('./components/about')} />
    <LazyRoute path="/settings" component={() => import('./components/settings')} />
  </Router>
);

render(<App />, document.body);

Loading Fallback

You can provide an optional loading component to be displayed while your component is being fetched.

<LazyRoute path="/"
    component={() => import('./components/home')}
    loading={MyLoadingComponent} />

Server Side Rendering

preact-lazy-route also allows for you to define an optional server side rendering path:

import path from 'path';

...

<LazyRoute path="/"
    component={() => import('./components/home')}
    ssrPath={path.resolve(__dirname, './components/home')}
    useSsr={!process.env.BROWSER} />

You will need to set useSsr to true when rendering on the server by setting an environment variable in your node process or using webpack's define plugin for your webpack bundle.

Node Environment

$ NODE=true node index.js

<LazyRoute path="/" useSsr={process.env.NODE} />

Webpack

import webpack from 'webpack';

export default {
  entry: {
    app: './src/app.jsx'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.BROWSER': JSON.stringify(true)
    })
  ]
};

<LazyRoute path="/" useSsr={!process.env.browser} />

License

MIT