El SPA que hicimos juntos - Introducción a Nuxt.js

Nuxt.js

1 El SPA que hicimos juntos

  • SPA (aplicación web de una sola página) es una aplicación web de una sola página. La web ya no es una página, sino una aplicación general, una aplicación compuesta por un sistema de enrutamiento, un sistema de datos, un sistema de página (componente), etc.

  • El Vue que aprendimos antes es el líder en SPA.

  • Las aplicaciones SPA se utilizan ampliamente en escenarios que no tienen altos requisitos de SEO.

    Insertar descripción de la imagen aquí

2 ¿Qué es el SEO?

  • SEO: la optimización de motores de búsqueda utiliza varias tecnologías (medios) para garantizar que los motores de búsqueda maximicen nuestro contenido web, maximicen el peso y, en última instancia, generen más tráfico.

  • Es muy obvio que los programas SPA no son buenos para el SEO

    Insertar descripción de la imagen aquí

  • Solución SEO: integrar页面和数据 por adelantado

    • Interfaz: usando SSR
    • Backend: estatización de página (freemarker, thymeleaf, velocidad)

3 ¿Qué es la tecnología SSR?

  • Renderizado del lado del servidor, es decir, la página web se genera a través del renderizado del lado del servidor y luego se envía al cliente.

    • En SSR, el front-end se divide en 2 partes: cliente front-end y servidor front-end
    • Servidor front-end, utilizado para enviar ajax y obtener datos.
    • Cliente front-end, utilizado para representar datos y páginas ajax en páginas html y responder al programa de llamada (navegador, rastreador)

    Insertar descripción de la imagen aquí

  • Si el rastreador obtiene la página HTML, puede iniciar el programa de procesamiento, procesar el contenido de la página y finalmente completar la operación SEO.

4 Comparación entre SPA y SSR

Solicitud de una sola página SPA Representación del lado del servidor SSR
Ventaja 1. El contenido de la página se representa en el lado del cliente
2. Céntrese únicamente en la capa de Vista, bajo acoplamiento con el fondo y separación de los extremos frontal y posterior
3. Reducir la presión de renderizar imágenes en segundo plano
1. Mejor SEO, las herramientas del motor de búsqueda pueden ver directamente imágenes completamente renderizadas
2. Tiempo de creación de contenido más rápido, los usuarios pueden ver rápidamente la imagen completamente renderizada
Desventajas 1. La primera pantalla se carga lentamente
2. El SEO (optimización de motores de búsqueda) no es amigable
1. Más carga del lado del servidor
2. Más requisitos relacionados con la configuración y la implementación de la compilación, lo que requiere renderizado con Node.js
3. Condiciones de desarrollo son limitados y algunos ciclos de vida no serán válidos
4. Algunas API de navegador utilizadas habitualmente no se pueden utilizar

5 ¿Qué es Nuxt.js?

  • Nuxt.js es un marco de aplicación general basado en Vue.js.

    • Nuxt admite todas las funciones de vue, y este tipo de contenido es前端客户端 contenido.
    • El contenido específico de Nuxt es前端服务端 contenido.
  • Al abstraer la organización de la infraestructura cliente/servidor, Nuxt.js se centra principalmente en la presentación de la interfaz de usuario de la aplicación.
    `Contenido.

  • Al abstraer la organización de la infraestructura cliente/servidor, Nuxt.js se centra principalmente en la presentación de la interfaz de usuario de la aplicación.

  • Nuxt.js preestablece varias configuraciones necesarias para desarrollar aplicaciones de renderización del lado del servidor utilizando Vue.js.

Guess you like

Origin blog.csdn.net/haodian666/article/details/134982219