Vue3 createSSRApp()Сведения о функции

Vue3 全局 APIГлобальный API Vue3

createSSRApp()— это функция, специально используемая для серверного рендеринга (SSR, Server-Side Rendering).

createSSRApp()За счёт генерации HTML-содержимого на стороне сервера она улучшает начальную скорость загрузки страницы и показатели SEO.

иcreateApp()По сравнению с,createSSRApp()она лучше подходит для сценариев применения, требующих серверного рендеринга.

1. Что такое серверный рендеринг (SSR)?

Серверный рендеринг (SSR) — это процесс генерации HTML на сервере с последующей отправкой сгенерированного HTML клиенту для отображения. В отличие от традиционного клиентского рендеринга (CSR, Client-Side Rendering), SSR может помочь повысить начальную скорость загрузки страницы и улучшить поисковую оптимизацию (SEO).

При клиентском рендеринге браузер сначала загружает пустой HTML-файл, а затем динамически создаёт содержимое страницы с помощью JavaScript. При серверном рендеринге сервер уже сгенерировал полное HTML-содержимое, и браузеру нужно только отобразить это содержимое.

2. createSSRApp()Роль

В Vue.js 3,createApp()является стандартной функцией для создания клиентских приложений Vue. ИcreateSSRApp()являетсяcreateApp()вариант, специально предназначенный для создания приложений Vue, поддерживающих серверный рендеринг.

createSSRApp()Основная роль — генерировать HTML-содержимое приложения Vue на стороне сервера и отправлять его клиенту. Это обеспечивает согласованность приложения Vue на стороне сервера и на стороне клиента, тем самым избегая проблемы несоответствия результатов рендеринга между клиентом и сервером.

3. ИспользованиеcreateSSRApp()Создание приложения

ИспользованиеcreateSSRApp()Шаги по созданию приложения Vue аналогичны использованиюcreateApp()но особое внимание следует уделить некоторым конфигурациям, связанным с SSR.

3.1 Базовое использование

Пример

// Импорт createSSRApp
import { createSSRApp } from 'vue';

// Импорт корневого компонента
import App from './App.vue';

// Создание SSR-приложения
const app = createSSRApp(App);

// Смонтируйте приложение
app.mount('#app');

В этом примере мы используемcreateSSRApp()создали приложение Vue, поддерживающее серверный рендеринг, и смонтировали его в указанный DOM-элемент.

3.2 Различия между серверной и клиентской сторонами

На стороне сервера и на стороне клиента,createSSRApp()поведение различается:

  • Серверная сторона: На стороне сервера,createSSRApp()сервер сгенерирует HTML-содержимое приложения Vue и отправит его клиенту.
  • Клиентская сторона: На стороне клиента,createSSRApp()клиент подхватит HTML-содержимое, сгенерированное сервером, и активирует его как интерактивное приложение Vue.

3.3 Настройка SSR-приложения

При настройке SSR-приложения необходимо учитывать следующие моменты:

  • Избегайте использования клиентских API на стороне сервера: Например,windowилиdocumentобъект недоступен на стороне сервера.
  • ИспользуйтеonServerPrefetchхуки: При рендеринге на стороне сервера можно использоватьonServerPrefetchхуки для предварительной загрузки данных.

Пример

export default {
  async onServerPrefetch() {
    // Предварительная загрузка данных на стороне сервера
    this.data = await fetchData();
  }
};

4. createSSRApp()иcreateApp()Различия

Характеристика createApp() createSSRApp()
Среда рендеринга Рендеринг на стороне клиента (CSR) Рендеринг на стороне сервера (SSR)
Начальная скорость загрузки Медленнее, зависит от выполнения JavaScript на стороне клиента Быстрее, сервер уже сгенерировал HTML
SEO Плохо, поисковым системам трудно сканировать динамическое содержимое Лучше, поисковые системы могут сканировать полный HTML
Применимые сценарии Одностраничное приложение (SPA) Приложения, требующие SEO и быстрой загрузки

Vue3 全局 APIГлобальный API Vue3

Другие расширения