Universal routing
Router5 is capable to run on the server and in clients. This enables you to reuse the same routes for both client-side navigation and server-side pre-rendering. This is essentially done via two steps:
- 1.Server-side - Pass to your router the current URL (using
start), and pass the resolved state to your client. - 2.Client-side - Pass to your router the starting state received from the server and pass it to your router, so it can start with the provided state (and won't run the transition to the already activated page).
Create your router (client & server)
You can use the same code for configuring your router on both client and server sides. The history plugin, for example, can be safely used on Node.js and in browsers.
1
const createRouter = require( 'router5' ).default;
2
const browserPlugin = require( 'router5-plugin-browser' );
3
​
4
function createRouter() {
5
const router = createRouter([
6
{ name: 'home', path: '/home' },
7
{ name: 'about', path: '/about' },
8
{ name: 'contact', path: '/contact' },
9
{ name: '404', path: '/404' }
10
], {
11
trailingSlash: true,
12
defaultRoute: '404'
13
})
14
​
15
router.usePlugin(browserPlugin({
16
useHash: false
17
}))
18
​
19
return router
20
}
21
​
22
export default createRouter
Copied!
Server-side Routing
For universal applications, you need to:
- Create a new router instance for each request, using the request URL
- Send the state to the client and start your router with this initial state
server.js1
import express from 'express';
2
import createRouter from 'router5';
3
import swig from 'swig';
4
​
5
const app = express();
6
​
7
// Swig is used for templating in this example
8
// Use what you are comfortable with
9
app.engine( 'html', swig.renderFile );
10
app.set( 'view engine', 'html' );
11
app.set( 'views', './views' );
12
​
13
app.get( '*', ( req, res ) => {
14
// Create a new router for each request
15
const router = createRouter();
16
​
17
router.start( req.originalUrl, function done( error, state ) {
18
if ( error ) {
19
res.status( 500 ).send( error );
20
} else {
21
res.send(/* Use your router state, send some HTML! */ );
22
}
23
});
24
​
25
} );
26
​
27
app.listen( 8080, function logServerStart() {
28
console.log( 'Server is listening on port 8080...' );
29
} );
Copied!
base.html1
<!doctype html>
2
<html lang="en-US">
3
<head>
4
<title>Example Server-side Routing</title>
5
</head>
6
​
7
<body>
8
<script src="/js/router.js"></script>
9
<script type="text/javascript">
10
/**
11
* Load the App's inital state from the server
12
* @type {JSON}
13
*/
14
var initialState = JSON.parse('{{ initialState | safe }}');
15
​
16
​
17
/**
18
* Start our Router
19
* @param {Error} error Router start error
20
* @param {Object} state State Object
21
* @return {undefined}
22
*/
23
app.router.start(initialState, function(error, state) {
24
if (error) console.error('router error', error);
25
});
26
</script>
27
</body>
28
​
29
</html>
Copied!
From here forth, you can continue to use router5 as if it was a regular Single-Page Application.
Performance
A new router has to be created server-side on each request. If your app is large (containing dozens of routes), the creation of your router will take up to a couple of hundred milliseconds.
Instead of creating a new router for each request, router5 includes a cloning mechanism: create a base router, and clone it for each request.
A user reported a gain from 300ms to 10ms per request for creating a new router, with cloning.
1
import { createRouter, cloneRouter } from 'router5'
2
​
3
const baseRouter = createRouter(/* ... */);
4
​
5
const router = cloneRouter(baseRouter);
Copied!
Last modified 3yr ago
Copy link