Vue3 createSSRApp()Explicación detallada de la función

el comportamiento es diferente:

createSSRApp()Lado del servidor

createSSRApp(): en el lado del servidor,

ycreateApp()genera el contenido HTML de la aplicación Vue y lo envía al cliente.createSSRApp()Lado del cliente

1. ¿Qué es el renderizado del lado del servidor (SSR)?

toma el contenido HTML generado por el servidor y lo activa como una aplicación Vue interactiva.

3.3 Configurar la aplicación SSR

2. createSSRApp()El papel de

Evitar el uso de API específicas del cliente en el lado del servidorcreateApp(): por ejemplo,createSSRApp()el objeto no está disponible en el lado del servidor.createApp()Usar

createSSRApp()hooks

3. UsocreateSSRApp()Crear una aplicación

EjemplocreateSSRApp()// Obtener datos previamente en el lado del servidorcreateApp()La diferencia entre

3.1 Uso básico

Ejemplo

Renderizado del lado del cliente (CSR)
import { createSSRApp } from 'vue';

Renderizado del lado del servidor (SSR)
import App from './App.vue';

Velocidad de carga inicial
const app = createSSRApp(App);

Más lenta, depende de la ejecución de JavaScript en el cliente
app.mount('#app');

Más rápida, el servidor ya ha generado el HTMLcreateSSRApp()Peor, los motores de búsqueda tienen dificultades para rastrear contenido dinámico

// Importar createSSRApp

Escenarios de aplicacióncreateSSRApp()Aplicaciones de una sola página (SPA)

  • Aplicaciones que necesitan SEO y carga rápidaAPI global de Vue3createSSRApp()Otras extensiones
  • IA pensando...vue3 createApp() funcióncreateSSRApp()Vue3 app.mount() función

// Importar el componente raíz

Haz clic para compartir notas

// Crear la aplicación SSR

export default {
  async onServerPrefetch() {
    Dirección de referencia
    this.data = await fetchData();
  }
};

4. createSSRApp()ycreateApp()// Montar la aplicación

Características createApp() createSSRApp()
Entorno de renderizado Renderizado del lado del cliente (CSR) Renderizado del lado del servidor (SSR)
Velocidad de carga inicial Más lento, depende de la ejecución de JavaScript en el cliente. Más rápido, el servidor ya ha generado el HTML
SEO Deficiente, los motores de búsqueda tienen dificultades para rastrear contenido dinámico Mejor, los motores de búsqueda pueden rastrear el HTML completo
Escenarios de aplicación Aplicación de una sola página (SPA) Aplicaciones que necesitan SEO y carga rápida

API global de Vue3

Otras extensiones