|
| 1 | +# Routing and Code-Splitting |
| 2 | + |
| 3 | +## Routing with `vue-router` |
| 4 | + |
| 5 | +You may have noticed that our server code uses a `*` handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server! |
| 6 | + |
| 7 | +It is recommended to use the official `vue-router` for this purpose. Let's first create a file where we create the router. Note similar to `createApp`, we also need a fresh router instance for each request, so the file exports a `createRouter` function: |
| 8 | + |
| 9 | +``` js |
| 10 | +// router.js |
| 11 | +import Vue from 'vue' |
| 12 | +import Router from 'vue-router' |
| 13 | + |
| 14 | +Vue.use(Router) |
| 15 | + |
| 16 | +export function createRouter () { |
| 17 | + return new Router({ |
| 18 | + mode: 'history', |
| 19 | + routes: [ |
| 20 | + // ... |
| 21 | + ] |
| 22 | + }) |
| 23 | +} |
| 24 | +``` |
| 25 | + |
| 26 | +And update `app.js`: |
| 27 | + |
| 28 | +``` js |
| 29 | +// app.js |
| 30 | +import Vue from 'vue' |
| 31 | +import App from './App.vue' |
| 32 | +import { createRouter } from './router' |
| 33 | + |
| 34 | +export function createApp () { |
| 35 | + // create router instance |
| 36 | + const router = createRouter() |
| 37 | + |
| 38 | + const app new Vue({ |
| 39 | + // inject router into root Vue instance |
| 40 | + router, |
| 41 | + // use spread operator to mix in the App component |
| 42 | + ...App |
| 43 | + }) |
| 44 | + |
| 45 | + // return both the app and the router |
| 46 | + return { app, router } |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | +Now we need to implement the server-side routing logic in `entry-server.js`: |
| 51 | + |
| 52 | +``` js |
| 53 | +// entry-server.js |
| 54 | +import { createApp } from './app' |
| 55 | + |
| 56 | +export default context => { |
| 57 | + // since there could potentially be asynchronous route hooks or components, |
| 58 | + // we will be returning a Promise so that the server can wait until |
| 59 | + // everything is ready before rendering. |
| 60 | + return new Promise((resolve, reject) => { |
| 61 | + const { app, router } = createApp() |
| 62 | + |
| 63 | + // set server-side router's location |
| 64 | + router.push(context.url) |
| 65 | + |
| 66 | + // wait until router has resolved possible async components and hooks |
| 67 | + router.onReady(() => { |
| 68 | + const matchedComponents = router.getMatchedComponents() |
| 69 | + // no matched routes, reject with 404 |
| 70 | + if (!matchedComponents.length) { |
| 71 | + reject({ code: 404 }) |
| 72 | + } |
| 73 | + |
| 74 | + // the Promise should resolve to the app instance so it can be rendered |
| 75 | + resolve(app) |
| 76 | + }, reject) |
| 77 | + }) |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +Assuming the server bundle is already built (again, ignoring build setup for now), the server usage would look like this: |
| 82 | + |
| 83 | +``` js |
| 84 | +// server.js |
| 85 | +const createApp = require('/path/to/built-server-bundle.js') |
| 86 | + |
| 87 | +server.get('*', (req, res) => { |
| 88 | + const context = { url: req.url } |
| 89 | + |
| 90 | + createApp(context).then(app => { |
| 91 | + renderer.renderToString(app, (err, html) => { |
| 92 | + if (err) { |
| 93 | + if (err.code === 404) { |
| 94 | + res.status(404).end('Page not found') |
| 95 | + } else { |
| 96 | + res.status(500).end('Internal Server Error') |
| 97 | + } |
| 98 | + } else { |
| 99 | + res.end(html) |
| 100 | + } |
| 101 | + }) |
| 102 | + }) |
| 103 | +}) |
| 104 | +``` |
| 105 | + |
| 106 | +## Code-Splitting |
| 107 | + |
| 108 | +Code-splitting, or lazy-loading part of your app, helps reducing the amount of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen. |
| 109 | + |
| 110 | +Vue provides async components as a first-class concept, combining it with [webpack 2's support for using dynamic import as a code-split point](https://webpack.js.org/guides/code-splitting-async/), all you need to do is: |
| 111 | + |
| 112 | +``` js |
| 113 | +// changing this... |
| 114 | +import Foo from './Foo.vue' |
| 115 | + |
| 116 | +// to this: |
| 117 | +const Foo = () => import('./Foo.vue') |
| 118 | +``` |
| 119 | + |
| 120 | +This would work under any scenario if you are building a pure client-side Vue app. However, there are some limitations when using this in SSR. First, you need to resolve all the async components upfront on the server before starting the render, because otherwise you will just get an empty placeholder in the markup. On the client, you also need to do this before starting the hydration, otherwise the client will run into content mismatch errors. |
| 121 | + |
| 122 | +This makes it a bit tricky to use async components at arbitrary locations in your app (we will likely improve this in the future). However, **it works seamlessly if you do it at the route level** - i.e. use async components in your route configuration - because `vue-router` will automatically resolve matched async components when resolving a route. What you need to do is make sure to use `router.onReady` on both server and client. We already did that in our server entry, and now we just need to update the client entry: |
| 123 | + |
| 124 | +``` js |
| 125 | +// entry-client.js |
| 126 | + |
| 127 | +import { createApp } from './app' |
| 128 | + |
| 129 | +const { app, router } = createApp() |
| 130 | + |
| 131 | +router.onReady(() => { |
| 132 | + app.$mount('#app') |
| 133 | +}) |
| 134 | +``` |
| 135 | + |
| 136 | +An example route config with async route components: |
| 137 | + |
| 138 | +``` js |
| 139 | +// router.js |
| 140 | +import Vue from 'vue' |
| 141 | +import Router from 'vue-router' |
| 142 | + |
| 143 | +Vue.use(Router) |
| 144 | + |
| 145 | +export function createRouter () { |
| 146 | + return new Router({ |
| 147 | + mode: 'history', |
| 148 | + routes: [ |
| 149 | + { path: '/', component: () => import('./components/Home.vue') }, |
| 150 | + { path: '/foo', component: () => import('./components/Foo.vue') }, |
| 151 | + { path: '/bar', component: () => import('./components/Bar.vue') } |
| 152 | + ] |
| 153 | + }) |
| 154 | +} |
| 155 | +``` |
0 commit comments