Vue.js

# Начало работы

Данное руководство находится в стадии активной разработки

# Установка

Для создания приложения с отрисовкой на стороне сервера потребуется сначала установить пакет @vue/server-renderer:

npm install @vue/server-renderer
## ИЛИ
yarn add @vue/server-renderer
1
2
3

# Примечания

  • Рекомендуется использовать Node.js версии 12+.
  • Версии @vue/server-renderer и vue должны совпадать.
  • @vue/server-renderer полагается на некоторые встроенные модули Node.js и поэтому может использоваться только с Node.js. В будущем возможно появится более простая сборка, которая сможет быть запущена и в других средах выполнения JavaScript.

# Отрисовка приложения Vue

В отличие от клиентского приложения Vue, которое создаётся с помощью createApp, приложение с SSR нужно создавать с использованием createSSRApp:

const { createSSRApp } = require('vue')

const app = createSSRApp({
  data() {
    return {
      user: 'Василий Пупкин'
    }
  },
  template: `<div>Текущий пользователь: {{ user }}</div>`
})
1
2
3
4
5
6
7
8
9
10

Теперь, можно использовать функцию renderToString для отрисовки экземпляра приложения в строку. Она возвращает Promise, который разрешается отрисованным HTML.


 










 

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = createSSRApp({
  data() {
    return {
      user: 'Василий Пупкин'
    }
  },
  template: `<div>Текущий пользователь: {{ user }}</div>`
})

const appContent = await renderToString(app)
1
2
3
4
5
6
7
8
9
10
11
12
13

# Интеграция с сервером

В этом руководстве для запуска приложения будет использоваться Express (opens new window):

npm install express
## ИЛИ
yarn add express
1
2
3
// server.js

const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')
const server = require('express')()

server.get('*', async (req, res) => {
  const app = createSSRApp({
    data() {
      return {
        user: 'Василий Пупкин'
      }
    },
    template: `<div>Текущий пользователь: {{ user }}</div>`
  })

  const appContent = await renderToString(app)
  const html = `
  <html>
    <body>
      <h1>Мой первый заголовок</h1>
      <div id="app">${appContent}</div>
    </body>
  </html>
  `

  res.end(html)
})

server.listen(8080)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

При запуске этого скрипта Node.js теперь сможем получить статичную HTML-страницу по адресу localhost:8080. Но этот код ещё не гидратирован: Vue ещё не взял на себя управление статическим HTML, отправленным сервером, чтобы превратить его в динамический DOM, который может реагировать на изменения данных на стороне клиента. Это будет рассмотрено далее, в разделе гидратация клиентской части.

← Написание универсального кода →