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 do 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 a 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 a 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. You can either use some environment variable in your node process or use webpack's define plugin to set a variable when bundling in webpack.

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