Soy nuevo en el desarrollo web con experiencia mínima en HTML/CSS y algo de JavaScript. Recientemente comencé a buscar en el marco de front-end Vue.js y estaba confundido acerca del concepto de aplicación de página única.
Mientras navegaba por el sitio web de documentación de Vue.js, noté que cada vez que hago clic en un enlace de guía de documentación diferente ( ver más abajo ) todos parecen tener diferentes páginas HTML en la URL.
Por ejemplo, la 'Instalación' tiene la URL https://v1.vuejs.org/guide/installation.html y la 'List Rendering' tiene la URL https://v1.vuejs.org/guide/list.html . Ambos parecen tener diferentes páginas HTML como se ve en la URL, pero ¿no debería haber solo 1 página HTML en un sitio web de SPA?
https://v1.vuejs.org/guide/installation.html
https://v1.vuejs.org/guide/list.html
Sí, técnicamente solo hay 1 página HTML: index.html. Vue genera las llamadas aplicaciones de una sola página. Vue tiene un enrutador que, en términos generales, simula subpáginas manipulando la URL. El contenido de www.example.com/about/us todavía se muestra a través de index.html. Debajo del capó, por supuesto, es mucho más complejo.
Sin embargo, otros marcos de trabajo de Vue, como Nuxt, también pueden generar páginas estáticas en el proceso de creación (no en "tiempo real") para mejorar el SEO. Estas a su vez son páginas HTML "reales".
Los primeros SPA tendían a tener un solo archivo index.html
que contenía un documento HTML básico y luego lo completaban (usando JS del lado del cliente) con contenido basado en la URL.
Los enfoques modernos prefieren que cada URL diferente presente un documento HTML útil y luego use JavaScript para cambiarlo a medida que el usuario navega por la aplicación.
Esto tiende a representar el contenido en la pantalla del usuario más rápido (ya que el contenido está allí y no necesita ser obtenido como un segundo paso con JS), es mejor alimento para los motores de búsqueda y funciona incluso si el JS falla por alguna razón . .
Hay dos enfoques generales para esto:
Ambos enfoques son compatibles con Nuxt (que usa Vue) y Next.js & Gatsby (que usan React).
Tenga en cuenta que la representación del lado del servidor le brinda múltiples URL que ofrecen diferentes documentos HTML, mientras que la representación estática le brinda múltiples archivos HTML.
Diferente ruta de URL no significa diferentes archivos. La aplicación de una sola página significa que puede navegar por todas las páginas sin actualizar el sitio web. Simplemente muestra diferentes vistas según las preferencias del usuario. YouTube es un buen ejemplo de aplicación de una sola página.
Index.html en aplicaciones de una sola página se genera a partir de index.js en tales casos, que se asocian aún más con diferentes rutas y componentes. Técnicamente, hay una sola página html: index.html