https://github.com/scurker/preact-lazy-route

Lazy load preact route components
https://github.com/scurker/preact-lazy-route

code-splitting lazy-loading preact preact-components preact-router

Last synced: about 2 months ago
JSON representation

Lazy load preact route components

• Host: GitHub
• URL: https://github.com/scurker/preact-lazy-route
• Owner: scurker
• License: mit
• Created: 2017-04-23T02:04:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T19:06:49.000Z (about 2 years ago)
• Last Synced: 2024-04-14T21:46:38.106Z (9 months ago)
• Topics: code-splitting, lazy-loading, preact, preact-components, preact-router
• Language: JavaScript
• Size: 555 KB
• Stars: 16
• Watchers: 5
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# preact-lazy-route

[![npm](https://img.shields.io/npm/v/preact-lazy-route.svg?style=flat)](https://www.npmjs.com/package/preact-lazy-route)

[![travis-ci](https://travis-ci.org/scurker/preact-lazy-route.svg)](https://travis-ci.org/scurker/preact-lazy-route)

[![coveralls](https://coveralls.io/repos/github/scurker/preact-lazy-route/badge.svg?branch=master)](https://coveralls.io/github/scurker/preact-lazy-route?branch=master)

`preact-lazy-route` is a component built for [preact-router](https://github.com/developit/preact-router). Using `preact-lazy-route` in combination with a module bundler such as [webpack](https://webpack.github.io/), allows you to implement code splitting on routes with the option to perform server side rendering in your preact application.

## Install

```bash

$ npm install --save preact-lazy-route

```

## Usage

```js

import { h, render } from 'preact';

import Router from 'preact-router';

import LazyRoute from 'preact-lazy-route';

const App = () => (

  

     import('./components/home')} />

     import('./components/about')} />

     import('./components/settings')} />

  

);

render(, document.body);

```

### Loading Fallback

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

```js

 import('./components/home')}

    loading={MyLoadingComponent} />

```

### Server Side Rendering

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

```js

import path from 'path';

...

 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](https://webpack.js.org/plugins) for your webpack bundle.

#### Node Environment

```bash

$ NODE=true node index.js

```

```js

```

#### Webpack

```js

import webpack from 'webpack';

export default {

  entry: {

    app: './src/app.jsx'

  },

  plugins: [

    new webpack.DefinePlugin({

      'process.env.BROWSER': JSON.stringify(true)

    })

  ]

};

```

```js

```

## License

[MIT](/license)