You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Code-splitting, or lazy-loading part of your app, helps reduce the size 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.
@@ -77,15 +79,20 @@ const routes = [
77
79
]
78
80
```
79
81
80
-
On both client and server we need to wait for router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready) method Let's update our client entry:
82
+
On both client and server we need to wait for the router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready) method Let's update our client entry:
Copy file name to clipboardExpand all lines: src/guide/ssr/server.md
+3-2Lines changed: 3 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -2,13 +2,14 @@
2
2
3
3
The [code structure](./structure.html) and [webpack configuration](./build-config.html) we've described also require some changes to our Express server code.
4
4
5
-
- we need to create an application with a built `app.js` from the resulting bundle. A path to it can be found using the webpack manifest:
5
+
- we need to create an application with a built `entry-server.js` from the resulting bundle. A path to it can be found using the webpack manifest:
Copy file name to clipboardExpand all lines: src/guide/ssr/structure.md
+30-35Lines changed: 30 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,15 @@
4
4
5
5
When writing client-only code, we can assume that our code will be evaluated in a fresh context every time. However, a Node.js server is a long-running process. When our code is first imported by the process, it will be evaluated once and then stay in memory. This means that if you create a singleton object, it will be shared between every incoming request, with the risk of cross-request state pollution.
6
6
7
-
Therefore, we need to **create a new root Vue instance for each request.** In order to do that, we need to write a factory function that can be repeatedly executed to create fresh app instances for each request:
7
+
Therefore, we need to **create a new root Vue instance for each request.** In order to do that, we need to write a factory function that can be repeatedly executed to create fresh app instances for each request, so our server code now becomes:
The same rule applies to other instances as well (such as the router or store). Instead of exporting the router or store directly from a module and importing it across your app, you should create a fresh instance in `createApp` and inject it from the root Vue instance.
47
+
The same rule applies to other instances as well (such as the router or store). Instead of exporting the router or store directly from a module and importing it across your app, you should create a fresh instance in `createApp` and inject it from the root Vue instance each time a new request is made.
53
48
54
49
## Introducing a Build Step
55
50
@@ -76,42 +71,43 @@ src
76
71
├── components
77
72
│ ├── MyUser.vue
78
73
│ └── MyTable.vue
79
-
├── App.vue
80
-
├── app.js # universal entry
74
+
├── App.vue # the root of your application
81
75
├── entry-client.js # runs in browser only
82
76
└── entry-server.js # runs on server only
83
77
```
84
78
85
-
### `app.js`
79
+
### `App.vue`
86
80
87
-
`app.js` is the universal entry to our app. In a client-only app, we would create the Vue application instance right in this file and mount directly to DOM. However, for SSR that responsibility is moved into the client-only entry file. `app.js`instead creates an application instance and exports it:
81
+
You may have noticed we now have a file called `App.vue` in the root of our `src` folder. That's where the root component of your application will be stored. We can now safely move the application code from `server.js`to the `App.vue` file:
88
82
89
-
```js
90
-
import { createSSRApp } from'vue'
91
-
importAppfrom'./App.vue'
92
-
93
-
// export a factory function for creating a root component
94
-
exportdefaultfunction(args) {
95
-
constapp=createSSRApp(App)
83
+
```vue
84
+
<template>
85
+
<div>Current user is: {{ user }}</div>
86
+
</template>
96
87
97
-
return {
98
-
app
88
+
<script>
89
+
export default {
90
+
name: 'App',
91
+
data() {
92
+
return {
93
+
user: 'John Doe'
94
+
}
99
95
}
100
96
}
97
+
</script>
101
98
```
102
99
103
100
### `entry-client.js`
104
101
105
-
The client entry creates the application using the root component factory and mounts it to the DOM:
102
+
The client entry creates the application using the `App.vue` component and mounts it to the DOM:
106
103
107
104
```js
108
-
importcreateAppfrom'./app'
105
+
import { createSSRApp } from'vue'
106
+
importAppfrom'./App.vue'
109
107
110
108
// client-specific bootstrapping logic...
111
109
112
-
const { app } =createApp({
113
-
// here we can pass additional arguments to app factory
114
-
})
110
+
constapp=createSSRApp(App)
115
111
116
112
// this assumes App.vue template root element has `id="app"`
117
113
app.mount('#app')
@@ -122,12 +118,11 @@ app.mount('#app')
122
118
The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here.
0 commit comments