Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor

 

 

 

  • ¡Registro!
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. ¿Qué es un generador de sitio estático?
      1. Ventajas
      2. Contras
      3. gatsby
      4. VuePress
    2. ¿Qué es el renderizado del lado del servidor?
      1. Ventajas
      2. Contras
      3. Siguiente.js
      4. Nuxt.js
    3. Una mirada más cercana a las diferencias
    4. Conclusión
      1. Recursos adicionales

    Los sitios generados estáticamente o las aplicaciones renderizadas previamente y del lado del servidor son dos formas modernas de crear aplicaciones front-end utilizando marcos de JavaScript. Estos dos modos, aunque diferentes, a menudo se confunden como lo mismo y en este tutorial aprenderemos sobre las diferencias entre ellos.

     

    Actualmente, JavaScript le permite crear tres tipos de aplicaciones: aplicaciones de una sola página (SPA), sitios pre-renderizados o generados estáticamente y aplicaciones renderizadas del lado del servidor. Los SPA presentan muchos desafíos , uno de los cuales es la optimización de motores de búsqueda (SEO). Las posibles soluciones son hacer uso de un generador de sitio estático o renderizado del lado del servidor (SSR).

    En este artículo, los repasaremos, analizando sus pros y sus contras para obtener una visión equilibrada. Veremos qué es la generación estática, así como los marcos que nos ayudan a crear sitios generados estáticamente, como Gatsby y VuePress . Aprenderemos qué es una aplicación renderizada del lado del servidor y también aprenderemos sobre los marcos para crear una, como Next.js y Nuxt.js. Finalmente, cubriremos las diferencias entre estos dos métodos y veremos cuál debería utilizar para crear su próxima aplicación.

    Puede encontrar todos los fragmentos de código en este artículo en GitHub .

    ¿Qué es un generador de sitio estático?

    Un generador de sitios estáticos (SSG) es una aplicación de software que crea páginas HTML a partir de plantillas o componentes y una fuente de contenido determinada. Dale algunos archivos de texto y contenido, y el generador te devolverá un sitio web completo; este sitio web completo se denomina sitio generado estático. Esto significa que las páginas del sitio web se generan en el momento de la construcción y su contenido no cambia a menos que agregue nuevo contenido o componentes y luego reconstruya ; debe reconstruir el sitio web si desea que se actualice con el nuevo contenido.

     

    Cómo funciona la generación de sitios estáticos ( vista previa grande )

    Este enfoque es bueno para crear aplicaciones cuyo contenido no cambia con frecuencia. Por lo tanto, no necesariamente lo usarías para un sitio web que deba modificarse según el usuario o uno que tenga una gran cantidad de contenido generado por el usuario. Sin embargo, un blog o un sitio web personal sería un uso ideal. Veamos algunas ventajas de los sitios generados estáticamente.

    Ventajas

    • Velocidad
      Debido a que todas las páginas y el contenido de su sitio web se generarán en el momento de la construcción, no tiene que preocuparse por las llamadas API a un servidor para obtener contenido, lo que hará que su sitio web sea muy rápido.
    • Implementación
      Una vez que se haya generado su sitio estático, le quedarán archivos estáticos. Por lo tanto, se puede implementar fácilmente en una plataforma como Netlify .
    • Seguridad
      Un sitio generado estáticamente comprende únicamente archivos estáticos, sin ninguna base de datos que un atacante pueda explotar inyectando código malicioso. Por tanto, la vulnerabilidad a un ciberataque es mínima.
    • Control de versiones
      Puede utilizar software de control de versiones (como Git) para gestionar y realizar un seguimiento de los cambios en su contenido. Esto resulta útil cuando desea deshacer los cambios realizados en el contenido.

    Contras

    • Si el contenido cambia demasiado rápido, puede resultar difícil mantenerse al día.
    • Para actualizar el contenido, debe reconstruir el sitio web.
    • El tiempo de construcción aumenta según el tamaño de la aplicación.

    Ejemplos de generadores de sitios estáticos son Gatsby y VuePress . Veamos cómo crear un sitio estático usando estos dos generadores.

    gatsby

    Según el sitio web oficial :

    "Gatsby es un marco gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos".

    Esto significa que a los desarrolladores que estén familiarizados con React les resultará fácil comenzar con Gatsby.

     

    Para utilizar este generador, primero debes instalarlo usando npm:

    npm install -g gatsby-cli

    Esto instalará Gatsby globalmente en su máquina. Debe ejecutar este comando solo una vez en su máquina. Una vez que se complete la instalación, puede crear su primer sitio estático usando el siguiente comando:

    gatsby new demo-gatsby

    Esto creará un nuevo proyecto Gatsby, al que he llamado demo-gatsby. Después de esto, puede iniciar el servidor de su aplicación ejecutando el siguiente comando:

    cd demo-gatsbygatsby develop

    Su aplicación Gatsby debería ejecutarse en localhost:8000 .

    Página de inicio predeterminada de Gatsby ( vista previa grande )

    La estructura de carpetas de la aplicación se ve así:

    --| gatsby-browser.js --| LICENSE --| README.md--| gatsby-config.js--| node_modules/ --| src/----| components----| pages----| images--| gatsby-node.js --| package.json --| yarn.lock--| gatsby-ssr.js --| public/----| icons----| page-data----| static

    Para este tutorial, solo veremos la src/pagescarpeta. Esta carpeta contiene archivos que se generarán en rutas en el sitio web.

    Para probar esto, agregue un nuevo archivo ( newPage.js) a esta carpeta:

    import React from "react"import { Link } from "gatsby"import Layout from "../components/layout"import SEO from "../components/seo"const NewPage = () = ( Layout SEO / h1Hello Gatsby/h1 pThis is my first Gatsby page/p button Link to='/'Home/Link /button /Layout)export default NewPage

    Aquí, estamos importando Reactdesde el paquete, por lo que cuando su código se transpile a JavaScript puro, aparecerán reactreferencias allí. ReactTambién estamos importando un Linkcomponente de gatsby; es una de las etiquetas de ruta de React que se utiliza en lugar de la etiqueta de anclaje nativa ( a href="#"Link/a). Acepta un toaccesorio, que toma una ruta como valor.

    Importamos un Layoutcomponente, que se agregó a la aplicación de forma predeterminada. Este componente maneja el diseño de las páginas anidadas en su interior. También importamos el SEOcomponente a este nuevo archivo. Este componente acepta una titlepropiedad y configura este valor como parte de los metadatos de su página. Finalmente, exportamos la función NewPage, que devuelve JSX con el contenido de la nueva página.

    En su index.jsarchivo, agregue un enlace a esta nueva página que acabamos de crear:

    import React from "react"import { Link } from "gatsby"import Layout from "../components/layout"import Image from "../components/image"import SEO from "../components/seo"const IndexPage = () = ( Layout SEO / h1Hi people/h1 pWelcome to your new Gatsby site./p pNow go build something great./p div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }} Image / /div Link to="/page-2/"Go to page 2/Link {/* new link */} button Link to="/newPage/"Go to new page/Link /button /Layout)export default IndexPage

    Aquí, hemos importado los mismos componentes que se usaron en el newPage.jsarchivo y realizan la misma función en este archivo. También hemos importado un Imagecomponente de nuestra componentscarpeta. Este componente se agrega de forma predeterminada a la aplicación Gatsby; ayuda con la carga diferida de imágenes y la entrega de archivos de menor tamaño. Finalmente, exportamos la IndexPagefunción, que devuelve JSX que contiene nuestro nuevo enlace y algo de contenido predeterminado.

     

    Ahora, si abrimos el navegador, deberíamos ver nuestro nuevo enlace en la parte inferior de la página.

    Página de inicio de Gatsby con nuevo enlace ( vista previa grande )

    Y si hace clic en "Ir a una página nueva", debería llevarlo a la página recién agregada.

    Nueva página de Gatsby ( vista previa grande )

    VuePress

    VuePress es un generador de sitios estáticos impulsado por Vue.js , vue-router y webpack . Requiere poca o ninguna configuración para comenzar. Si bien hay muchos generadores de sitios estáticos, VuePress se destaca del resto por una única razón: su objetivo principal es facilitar a los desarrolladores la creación y el mantenimiento de documentación excelente para sus proyectos.

    Para utilizar VuePress, primero debes instalarlo:

    // Globally…yarn global add vuepress # OR npm install -g vuepress// Or in an existing project…yarn add -D vuepress # OR npm install -D vuepress

    Una vez finalizado el proceso de instalación, puede ejecutar el siguiente comando en su interfaz de línea de comandos (CLI):

    # Create the project foldermkdir demo-vuepress cd demo-vuepress# Create a Markdown fileecho '# Hello VuePress' README.md# Start writingvuepress dev

    Aquí, creamos una carpeta para nuestra aplicación VuePress, agregamos un README.mdarchivo # Hello VuePresscomo único contenido y, finalmente, iniciamos el servidor.

    Una vez hecho esto, nuestra aplicación debería estar ejecutándose en localhost:8080 y deberíamos ver esto en el navegador:

    Página de inicio de VuePress ( vista previa grande )

    VuePress admite la sintaxis y el marcado de Vue.js en este archivo. Actualice el README.mdarchivo con lo siguiente:

    # Hello VuePress_VuePress Rocks_ **Yes!**_It supports JavaScript interpolation code_ **{{new Date()}}**p v-for="i of ['v','u', 'e', 'p', 'r', 'e', 's', 's']"{{i}}/p

    Si regresa al navegador, la página debería verse así:

    Página de VuePress actualizada ( vista previa grande )

    Para agregar una nueva página a su sitio web de VuePress, agregue un nuevo archivo Markdown al directorio raíz y asígnele el nombre que desee que sea la ruta. En este caso, seguí nombrándolo Page-2.mdy agregué lo siguiente al archivo:

    # Hello WorldLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.

    Ahora, si navega /page-2en el navegador, debería ver esto:

    Una página "Hola mundo" en VuePress ( vista previa grande )

     

    ¿Qué es el renderizado del lado del servidor?

    La representación del lado del servidor (SSR) es el proceso de representar páginas web en un servidor y pasarlas al navegador (del lado del cliente), en lugar de representarlas en el navegador. SSR envía una página completamente renderizada al cliente; el paquete JavaScript del cliente toma el control y permite que funcione el marco SPA.

    Esto significa que si su aplicación se procesa en el lado del servidor, el contenido se recupera del servidor y se pasa al navegador para mostrarlo al usuario. La representación del lado del cliente es diferente: el usuario tendría que navegar a la página antes de que el navegador obtenga datos del servidor, lo que significa que el usuario tendría que esperar unos segundos antes de que el navegador reciba el contenido de esa página. Las aplicaciones que tienen SSR habilitado se denominan aplicaciones renderizadas del lado del servidor. Correo temporal gratis

    Cómo funciona la renderización del lado del servidor ( vista previa grande )

    Este enfoque es bueno si está creando una aplicación compleja que requiere la interacción del usuario, que depende de una base de datos o cuyo contenido cambia con frecuencia. Si el contenido cambia con frecuencia, los usuarios deberán ver las actualizaciones de inmediato. El enfoque también es bueno para aplicaciones que adaptan el contenido según quién lo ve y que almacenan datos del usuario como direcciones de correo electrónico y preferencias del usuario, al mismo tiempo que atienden al SEO. Un ejemplo sería una gran plataforma de comercio electrónico o redes sociales. Veamos algunas de las ventajas de SSR para sus aplicaciones.

    Ventajas

    • El contenido está actualizado porque se recupera sobre la marcha.
    • El sitio web se carga rápidamente porque el navegador recupera el contenido del servidor antes de mostrárselo al usuario.
    • Debido a que JavaScript se procesa en el lado del servidor, el dispositivo del usuario tiene poca influencia en el tiempo de carga de la página, lo que mejora el rendimiento.

    Contras

    • Se realizan más llamadas API al servidor porque se realizan por solicitud.
    • El sitio web no se puede implementar en una red de entrega de contenido estática (CDN).

    Ejemplos de marcos que ofrecen SSR son Next.js y Nuxt.js.

    Siguiente.js

    Next.js es un marco de React que le permite crear sitios web estáticos, aplicaciones renderizadas del lado del servidor y similares. Debido a que está construido sobre React, se requiere conocimiento de React para usar el marco.

    Para crear una aplicación Next.js, ejecute lo siguiente:

    npm init next-app# oryarn create next-app

    Se le pedirá que nombre su aplicación; Yo nombré el mío demo-next. La siguiente opción es seleccionar una plantilla; Seleccioné la aplicación de inicio predeterminada. Luego, comienza a configurar la aplicación. Una vez hecho esto, podemos comenzar a trabajar en la aplicación.

    cd demo-nextyarn dev# or npm run dev

    Su aplicación debería ejecutarse en localhost:3000 y debería ver esto en el navegador:

    Página de inicio de Next.js ( vista previa grande )

    La página que se está procesando se puede encontrar en pages/index.js. Entonces, si abre este archivo y modifica el JSX dentro de la Homefunción, se reflejará en el navegador. Reemplace el JSX con esto:

     

    import Head from 'next/head'export default function Home() { return ( div className="container" Head titleHello Next.js/title link rel="icon" href="/favicon.ico" / /Head main h1 className="title" Welcome to a href="https://nextjs.org"Next.js!/a /h1 p className='description'Next.js Rocks!/p /main style jsx{` main { padding: 5rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .title a { color: #0070f3; text-decoration: none; } .title a:hover, .title a:focus, .title a:active { text-decoration: underline; } .title { margin: 0; line-height: 1.15; font-size: 4rem; } .title, .description { text-align: center; } .description { line-height: 1.5; font-size: 1.5rem; } `}/style style jsx global{` html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { box-sizing: border-box; } `}/style /div )}

    En este archivo, utilizamos el Headcomponente Next.js para configurar el título de los metadatos y el favicon de nuestra página. También estamos exportando una Homefunción que devuelve JSX que contiene el contenido de nuestra página. Este JSX contiene el Headcomponente, junto con el contenido principal de la página. También contiene dos etiquetas de estilo, una para diseñar esta página y la otra para diseñar globalmente la aplicación.

    Ahora deberías ver que el contenido de la aplicación ha cambiado a esto:

    Página de inicio actualizada ( vista previa grande )

    Si quisiéramos agregar una página a nuestra aplicación, tendríamos que agregar un archivo en la /pagescarpeta. Las rutas se crean automáticamente según la /pagesestructura de carpetas. Suponga que tiene una estructura de carpetas similar a esta:

    --| pages----| index.js == '/'----| about.js == '/about'----| projects------| next.js == '/projects/next'

    En la pagescarpeta, agregue un nuevo archivo y asígnele el nombre hello.js. Luego agregue lo siguiente:

    import Head from 'next/head'export default function Hello() { return ( div Head titleHello World/title link rel="icon" href="/favicon.ico" / /Head main className='container' h1 className='title' Hello a href="https://en.wikipedia.org/wiki/Hello_World_(film)"world/a /h1 p className='subtitle'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem provident soluta, sit explicabo impedit nobis accusantium? Nihil beatae, accusamus modi assumenda, optio omnis aliquid nobis magnam facilis ipsam eum saepe!/p /main style jsx {` .container { margin: 0 auto; min-height: 100vh; max-width: 800px; text-align: center; } .title { font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; display: block; font-weight: 300; font-size: 100px; color: #35495e; letter-spacing: 1px; } .subtitle { font-weight: 300; font-size: 22px; color: #526488; word-spacing: 5px; padding-bottom: 15px; } `} /style /div )}

    Esta página es idéntica a la página de destino que ya tenemos. Solo cambiamos el contenido y agregamos un nuevo estilo al JSX. Ahora, si visitamos localhost:3000/hello , deberíamos ver nuestra nueva página:

     

    Una página "Hola mundo" en Next.js ( vista previa grande )

    Finalmente, necesitamos agregar un enlace a esta nueva página en la index.jspágina. Para hacer esto, usaremos el componente Next.js.Link Primero tenemos que importarlo.

    # index.jsimport Link from 'next/link'#Add this to your JSXLink href='/hello'Link href='/hello' aNext/a/Link

    Este Linkcomponente es cómo agregamos enlaces a páginas creadas en una aplicación Next.js.

    Si volvemos a nuestra página de inicio y hacemos clic en este enlace, nos llevará a nuestra /hellopágina.

    Nuxt.js

    Como se indica en la documentación oficial :

    “Nuxt es un marco progresivo basado en Vue.js para crear aplicaciones web modernas. Se basa en las bibliotecas oficiales de Vue.js (vue, vue-router y vuex) y potentes herramientas de desarrollo (webpack, Babel y PostCSS). El objetivo de Nuxt es hacer que el desarrollo web sea potente y eficaz teniendo en mente una excelente experiencia para el desarrollador”.

    Nuxt.js se basa en Vue.js, por lo que a los desarrolladores de Vue.js les resultará fácil comenzar y se requiere conocimiento de Vue.js para usarlo.

    Para crear una aplicación Nuxt.js, ejecute el siguiente comando en su CLI:

    yarn create nuxt-app project-name# or npxnpx create-nuxt-app project-name

    Esto le pedirá que seleccione un nombre, junto con algunas otras opciones. Nombré el mío demo-nuxty seleccioné los valores predeterminados para las otras opciones. Luego, puede abrir la carpeta de su aplicación y abrir pages/index.vue. Cada archivo de esta carpeta se convierte en una ruta, por lo que nuestra página de destino estará controlada por el index.vuearchivo. Actualízalo con lo siguiente:

    template div div logo / h1 Hello Nuxt.js /h1 h2 Nuxt.js Rocks! /h2 div a href="https://nuxtjs.org/" target="_blank" Documentation /a a href="https://github.com/nuxt/nuxt.js" target="_blank" GitHub /a /div /div /div/templatescriptimport Logo from '~/components/Logo.vue'export default { components: { Logo }}/scriptstyle.container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center;}.title { font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; display: block; font-weight: 300; font-size: 100px; color: #35495e; letter-spacing: 1px;}.subtitle { font-weight: 300; font-size: 42px; color: #526488; word-spacing: 5px; padding-bottom: 15px;}.links { padding-top: 15px;}/style

    Ahora, ejecuta la aplicación:

     

    cd demo-nuxt# start your applicatioyarn dev # or npm run dev

    Su aplicación debería ejecutarse en localhost:3000 y debería ver esto:

    Página de inicio de Nuxt.js ( vista previa grande )

    Podemos ver que la página muestra el contenido que agregamos index.vue. La estructura del enrutador funciona de la misma manera que funciona el enrutador de Next.js: representa cada archivo de la /pagescarpeta en una página. Entonces, agreguemos una nueva página ( hello.vue) a nuestra aplicación:

    template div h1Hello world!/h1 pLorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsa vitae tempora perferendis, voluptate a accusantium itaque vel ex, provident autem quod rem saepe ullam hic explicabo voluptas, libero distinctio?/p /div/templatescriptexport default {};/scriptstyle/style

    Si abre localhost:3000/hello , debería ver la nueva página en el navegador.

    Página "Hola mundo" en Nuxt.js ( vista previa grande )

    Una mirada más cercana a las diferencias

    Ahora que hemos analizado tanto los generadores de sitios estáticos como el renderizado del lado del servidor, y sabemos cómo empezar a utilizarlos utilizando algunas herramientas populares, veamos las diferencias entre ellos.

    Generación de sitios estáticos Representación del lado del servidor
    Se puede implementar fácilmente en una CDN estática No se puede implementar en una CDN estática
    El contenido y las páginas se generan en el momento de la compilación. El contenido y las páginas se generan por solicitud.
    El contenido puede volverse obsoleto rápidamente El contenido siempre está actualizado.
    Menos llamadas a la API, porque solo las realiza en el momento de la compilación. Realiza llamadas API cada vez que se visita una nueva página

    Conclusión

    Podemos ver por qué es tan fácil pensar que los sitios generados estáticamente y las aplicaciones renderizadas del lado del servidor son lo mismo. Y conocemos las diferencias entre ellos. Intente aprender más sobre cómo construir ambos para comprender completamente las diferencias entre ellos.

    Recursos adicionales

    Aquí hay algunos enlaces útiles que le ayudarán a empezar en poco tiempo.

    • gatsby
    • VuePress
    • “ VuePress: documentación simplificada ”, Ben Hong, Smashing Magazine
    • Siguiente.js
    • “¿ Por qué la gente utiliza un generador de sitios estáticos? ”, Quora
    • “ Generador de sitios estáticos ”, Gatsby
    • “ Una introducción a VuePress ”, Joshua Bemenderfer, DigitalOcean
    • “¿ Qué es el renderizado del lado del servidor? ”, Edpresso, Educative.io
    • “¿ Qué es un generador de sitios estáticos? Y tres formas de encontrar la mejor ”, Phil Hawksworth, Netlify
    • " Los beneficios de la renderización del lado del servidor sobre la renderización del lado del cliente ", Alex Grigoryan, Medium

    (ks, ra, il, al)Explora más en

    • Aplicaciones
    • Siguiente.js
    • Nuxt.js
    • javascript
    • Generadores
    • Generadores estáticos





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor

    Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor

    ¡Registro! Implemente rápidamente. Implementar inteligentemente Índice ¿Qué es un generador de sitio

    programar

    es

    https://aprendeprogramando.es/static/images/programar-diferencias-entre-sitios-generados-estaticos-y-aplicaciones-renderizadas-del-lado-del-servidor-1042-0.jpg

    2024-05-21

     

    Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor
    Diferencias entre sitios generados estáticos y aplicaciones renderizadas del lado del servidor

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20