Video není dostupné.
Omlouváme se.
Por qué creo todos mis proyectos con SSR en Angular
Vložit
- čas přidán 22. 12. 2023
- Vamos a ver que es Server Side Rendering (SSR) en Angular 17. ¿Es realmente la solución a todos los problemas de posicionamiento? También vamos a ver como cambiar los parámetros básicos para SEO desde nuestra aplicación de Angular.
Vemos dónde tiene sentido aplicar SSR y en donde nos podría molestar.
¿Tenés una aplicación de Angular que te está costando posicionar? ¿Te sirvió mi explicación?
Que buen canal!, no haberlo visto antes. Espero que sigas agrgando contenido, un saludo! y gracias!
Colgué unos meses pero tengo pensado retomar!
Nuevo curso pronto!
Excelente info crack muchas gracias. Actualmente, en la empresa en la que estoy, estamos tratando de meterle al CEO a la aplicacion en la que estamos laburando y es una verdadera locura hacerlo(el proyecto esta hecho en angular 9!!😖)...
Uff puede llegar a ser un quilombo eso!
Quedarse desactualizado es un bajón y para cada versión es peor actualzar porque otras librerías que hayas usado pueden haber cambiado.
En mi experiencia recomiendo hacer una actualización a mediados del ciclo de vida de cada versión grande, en el caso de Angular, cada medio año.
Porque ahora cuando tengas que actualizar de la 9 a la 17 mínimo vas a tener que hacer lo siguiente:
* Refactorizar el router
* Actualizar librerías y quizás cambiarlas.
* Reescribir el código que esté mal escrito y que las versiones más nuevas de typescript detecten
* Reescribir las configuraciones de build
Y si querés aprovechar todo lo nuevo de las otras versiones:
* Reescribir los html con los for e if nuevos
* Reconsiderar cambiar módulos por componentes cuando sea necesario
* Diferir carga de ciertas partes de la aplicación para el momento que se utilizan.
* Cambiar variables de zoneJs por signals
Y un montón de cosas más, las cuales son mucho más amigables ir haciendo cada medio año en un par de días o a lo sumo una semana, si te cruzás con muchos problemas.
Eso sí, entiendo que en una empresa es todo más dificil (vs hacer todo por tu cuenta).
Suerte con tu laburo!
muchas gracias por tus recomendaciones. Estamos en ello, mucho de lo que mencionas nos esta pasando. Exitos y felices fiestas genio!
Excelente información. Muchas gracias.
De nada!
Muy bien explicado!! Gracias
Graciass !
La explicación es genial
Gracias!
Buenisima la explicación!! Gracias
Gracias nuevamente!
Excelente video y buena idea crear el servicio SEO.
Gracias! La verdad es que ayuda el servicio SEO, es bastante cómodo
Buen comentario amigo. Gracias y saludos.
Gracias, saludos!
Buena explicacion, gracias crack
De nada! Gracias por pasarte!
Grande profee! Gracias 🙌🏻🙌🏻
Gracias a vos!
Excelente gracias
De nada!
Muy bueno. ya lo estoy implementando. Estaria bueno que lo subieras a un repo en github.
Fui a buscarlo para subirlo y vi que borré todo :/ Perdón!!!
Wow, excelente video, de lo mejor en español sobre el tema. Y felicitaciones por tu canal también! Una consulta, cuando se tienen rutas parametrizadas y no hay forma de saber de antemano los valores de estos parámetros para generar el archivo txt que Angular lee para hacer SSG. Para este caso vos recomendarías mejor SSR? La cuestión es que nuestro sitio tiene unas rutas públicas donde se utilizan muchos parámetros dinámicos. Pero la mayor parte del sitio está detrás de un login wall. Estamos en el dilema de usar SSG o SSR
Buenas! Perdón la tardanza, seguramente ya solucionaste el problema. Si tenés el login wall entonces calculo que no te preocupa tanto el SEO de esas páginas, en ese caso te diría que uses una app de Angular estándar, con render en el cliente. El static site generation te va a generar sólo las pantallas de login y el SSR sin SSG no sé si vale tanto la pena...
Petacularrrr para ver con los mates
🧉🧉🧉
Muy buen video! Me ha gustado mucho! Yo soy programador Full Stack MEAN pero llevo varios años sacando un sueldo extra con nichos de amazon afiliados tipo "mejor silla gaming". Ahora que es más fácil el seo con Angular, la idea es empezar a crear los nichos con Angular SRR y olvidar de una vez por todas el maldito Wordpress. Por el momento no encuentro ningún video en CZcams de alguien que se haya animado a hacer un proyecto parecido. Estaría genial verte haciendo algún proyecto real tipo blog, ecommerce etc... Un saludo!
Yo voy a intentarlo por mi cuenta aunque no tenga ningún tutorial/video en el que apoyarme. Me darías algún consejo? ;)
En principio te diría que si vas a hacer un sitio para marketing de afiliados, entonces tenés que hacer todo lo posible para aumentar el puntaje seo, mejorar la velocidad, tener el sitemap cargado, los xml con info de tu sitio, las tarjetas para compartir en redes sociales, las meta descriptions, revisar que tu sitio no cambie de estructura cuando se cargue y un millón de cosas más.
Mi recomendación es que user server side rendering Sí o Sí. Pero para ese paso extra de velocidad te recomiendo que no sirva tu sitio con NG serve, sino que hagas un build de tu sitio y sirvas los html y demás como si fuese un sitio estático.
Muchas gracias por todos tus consejos :) @@puntojson Una última cosa: en el archivo seo.service.ts, la línea 19 no se ve entera (despues del or || ). Como sería el final? Por otra parte, estaría muy interesado si tuvieses mas funciones como la de "setCanonicalUrl" para aplicar seo al proyecto. No tendría ningún problema en realizar cualquier donación para obtenerlas. Saludos!!
La línea es :
"let element: HTMLLinkElement | null= this._document.querySelector(`link[rel='canonical']`) || null"
Es para revisar si ya hay una etiqueta con rel=canonical o no.
Si la hay la actualizo y si no la hay creo una nueva.
Respecto al resto de herramientas SEO, si bien me sirve tu idea de soborno jajaja no la acepto!
Voy a ver si puedo recopilar lo que sé de este tema (que no es tanto) y publicar algo para todos.
@@puntojson jajaja había que intentarlo xD Estaré al tanto de tus nuevas publicaciones! Animo con tu canal, es muy bueno!! Saludos! ;)
Muy buen video! Una consulta, como se despegaría esta app con ssr en vercel por ejemplo? Habría que levantar el server y client en distintas instancias?
No! De todo eso se encarga vercel automáticamente, desde Angular 17 se pone NG serve y vercel se encarga del resto.
Que herramienta de aws me recomiendas para desplegar angular 17 con ssr, estaba trabajando con amplify pero no soporta el ssr de angular, solo el de next
Buenas! No estoy usando actualmente AWS para desplegar angular, asique estoy oxidado con este tema. Teóricamente podés usar cualquier servicio que hostee un proyecto de node, teniendo en cuenta que tu servidor cuando reciba el código tiene que primero hacer una etapa de build y después servir el archivo server.js que genera. Es un poco más laborioso pero se debería poder.
Por ahora yo estoy hosteando en netlify o en vercel.
Que opinas de astro, inicio para sitios estaticos pero actualmente se puede hacer lo que sea prácticamente y siento que a futuro tiende a ser utilizado por bastantes empresas
Lo estuve revisando y no parece para nada malo, pero estuve viendo sólo videos y sin escribir nada, para entender bien de que se trata y formar una opinión tendría que hacer algún proyectito..
Excelente contenido. A partir de que version de angular esta el Ssr?
Desde hace bastante está con "Angular Universal" (al menos desde la 13). Ahora viene integrado y se puede hacer SSR sin instalar nada aparte!
Y ese servicio se pondria en todas las vistas por ejemplo en /producto iria ahi, en /usuarios iria ahi también?? Y se podria poner mas metatags no?
Claro, uno de los objetivos del servicio es que esté disponible para cualquier componente que lo quiera usar.
Hola, tengo una duda, cual es el fin de la carpeta server al realizar el build si al final solo es necesaria la carpeta del frontend, me pueden explicar por favor
Buenas!
En browser tenemos la app sin SSR/Server side rendering, con SSG/static site generation (las páginas prerenderizadas por el server guardadas listas para ir al cliente)
En server tenemos el server side rendering, un software que renderiza las páginas a pedido de un navegador y envía la información renderizada en vivo, pero no prerenderizada como en el caso del SGR.
En ambos casos después el cliente termina obteniendo la app entera y siguiendo el procesamiento en el cliente.
Eyyy que buena eso de hacerle un servicio para el SEO. Te ganaste un suscriptor mas !! Una consulta, como se podría hacer para a partir del subdominio generar ssr? Estoy atascado con eso desde hace unas semanas. Me podrías ayudar? Saludos desde Perú.
Buenas! Disculpá la tardanza! Me estoy poniendo al día. Cuando te referís a SSR querés decir SSG (static site generation), en ese caso podés crear un archivo de rutas que detalla la lista de rutas a prerenderizar. Si no es eso comentame con más detalles y veo como te puedo dar una mano.!
Hola, gracias por la respuesta. Me refería a Server Side Rendering. Lo que pretendo hacer es que a partir de un subdominio(como parámetro) que el servidor me genere el renderizado tras hacer una petición a una API
@@richardsrodas.p495 mmm lo veo complicado realmente.
Siento que tendría que haber un microservicio que cambie el archivo routes.txt de tu servidor en donde tenés el código y que ejecute el ng build. angular.dev/guide/prerendering#prerendering-parameterized-routes
Según lo que leo Angular CLI no tiene la opción de prerenderizar un sitio web de a partes.
Otra cosa que se me ocurre es tu subdominio sea un proyecto de Angular distinto al de los otros subdominios, en ese caso tiene su propio ng build.
Tengo un blog en la versión 17 con ssr pero con módulos pero no está cambiado los metadatos en cada artículo, tuve que crear un route.txt con ruta articulo/id manualmente para hacer que se construya el sritu lo con le build
Cuando hacés SSG (static site generation) con SSR se puede volver complicado que angular te detecte todas las páginas. Yo también he renegado con eso, el route.txt es una gran ayuda.
@@puntojson si pero es molesto , estoy probando next
@@sanant8748 Después si te acordás comentame como te funcionó
Como puedo hacer que tengo que exportar a capacitor y tambien para web, con el mismo codigo base pero entregar diferentes builds al momento de compilar
Si lo que querés hacer es con un comando hacer el buld tanto para la web como para capacitor, podés hacelo creando un comando en package.json, donde tenés los scripts como "dev" o "build", te podés crear uno así: "build-todo": "npm run build & npm run elComandoDeCapacitor"
Creo que es eso lo que preguntás, sino contestame!
Saludos
Gracias@@puntojson eso lo entiendo y así lo tengo pero sin ssr, lo que me refería es hacer el build con SSR para web, pero tener un build SPA para capacitor con el mismo proyecto ya que capacitor no soporta SSR por qué se ocupa express
@@emil_cd Ya entiendo tu problema perfecto, server side rendering es inútil si vas a trabajar con capacitor, por lo cual capacitor no sabe buildear la app. Te diría que no vas a poder buildear a la vez tu proyecto de capacitor con el web de manera sencilla.
Renegando un poco se me ocurre lo siguiente:
1) Tenés 2 proyectos, uno web y el otro con capacitor (el de capacitor lo hacés aparte sin SSR)
2) En vez de buildear a mano, te creás un script con algún lenguage como batch o python que copie casi todos los archivos de tu proyecto original al de capacitor (excluís todos los que tengan configuración de SSR) y luego ese script corre el build en cada uno de los proyectos.
Es fea mi solución: Sí
Funcionaría: No sé la verdad
¿Vale la pena intentar?: Fijate si de manera manual es posible lo que digo y en ese caso lo automatizaría.
De todas maneras seguiría buscando, me resulta raro que no haya mucho en internet respecto de este problema, ya que me parece uno no tan raro. Es un tema para revisar con mucha paciencia...
Avisame si lográs algo.
Saludos
@@puntojson exactamente todo eso es lo que estaba pensando hacer, tener dos app.component y 2 config diferentes y cambiarlos con un script antes de compilar, para mantener el mismo código intacto, cosa rara que no se pueda hacer en angular de una manera más sencilla. Estuve investigando y creo que sveltekit lo puede hacer solo cambiando una variable para que apague el SSR y por default hace SSG, pero no es opción cambiar de frameworks por eso en este momento, voy a seguir investigando.
Muchas gracias por la respuesta.
Tengo dudas, como podria usar SSR solo en ciertas rutas, y las demas que sean modulos lazys?
En la configuración de angular hay una manera de poner un array de "prerender routes" en donde ponés a mano que rutas querés prerenderizar y las otras se sirven como siempre!
Hola amigo, excelente video! Tengo un sistema multi-paginas con SEO/SSR activo . En mi AppComponent detecto el URL y obtengo los datos para actualizar los meta y lo hace perfecto, pero al navegar a otra ruta se borran los meta. Alguna sugerencia. Gracias.
Buenas! Gracias por tu mensaje!
En principio no veo por qué se borrarían los meta, tampoco tengo un ejemplo a mano para probarlo.
Te diría en principio que cada componente que viene de un ruteo tiene que tener su código para actualizar los meta, no sólo te va a servir esto para solucionar el error de que los meta se borren, sino que va a evitar que arrastres metas de una página anterior, lo cual es la mayoría de las veces no deseado, porque los usuarios pueden hacer conexiones entre páginas que no te imaginarías, y no querés que los motores de búsqueda vinculen metas incorrectos a a tus páginas.
@@puntojson Hola amigo, gracias por responder. Encentre el problema, mi sitio es multi página, obtengo la URL del navegador y lo envió a un endpoint que devuelve los datos de la página. Para obtener la URL probe con window, location, router, document. Como son objetos del DOM, cuando hago el ng build la URL solo me devuelve /. Trate de guardar la URL en un localstorage o cookies, pero igual en tiempo de compilación al consultar están indefinidas. ¿Que podría usar para almacenar la URL y que en tiempo de compilado se mantenga y pueda consultar los datos para los meta? Gracias
@@puntojson Si cableo la URL me agrega los meta sin problema.
@@victorrodriguez1499 ¿Qué tipo de multisitio estás usando? ¿Cargás una misma página desde distintas urls en las cuales todas deben ser canónicas?
En principio hay que evitar leer el _document para buscar la URL ya que la canónica debería estar escrita a mano para cada página, para asegurar que no se presenten urls canónicas que no existan o tengan error.
Si tenés que alternar entre varias canónicas o lo tenés que hacer de manera dinámica trataría de usar data en el router, sería así:
* Tenés en el router distintas rutas que llevan al mismo lugar, pero en cada route le ponés data:{origen: "eldominio"}.
* Después desde la página en el constructor o oninit te suscribis al activeRouter (o usás el snapshot) y obtenés esa data, de ahí podés generar tu URL canónica con tu base del subdominio.
Otra manera que se me ocurre es que en el router crear una propiedad para cada ruta que sea url canónica, y que no hagas lógica en cada componente sino que las urls canónicas se escriban directamente en el router.
¿Funcionará? no sé jajaja
Comentame después que tal!
Podrias poner la funcion setCannonicalURL en los comentarios ya que aparece cortada. gracias
Quizás no es la misma pero es una que uso en otro proyecto.
setCanonicalURL(url?: string) {
const canURL = url == undefined ? this._document.URL : url;
const head = this._document.getElementsByTagName('head')[0];
let element: HTMLLinkElement | null= this._document.querySelector(`link[rel='canonical']`) || null
if (!element) {
element= this._document.createElement('link') as HTMLLinkElement;
head.appendChild(element);
}
element.setAttribute('rel','canonical')
element.setAttribute('href',canURL)
}
Hola, una pregunta se puede aplicar ssr a una aplicacion modular de angular 17?
Sí, el ssr existe desde hace años en Angular, mucho antes que la llegada de los componentes standalone
@@puntojson gracias
y una pagina statica generada por SSG?
Sirve para los sitios que no son altamente dinámicos
Hola, justamente tengo ese problema del LocalStorage, cuando hago un login a un api guardaba el token en el localStorage, que luego lo obtenia para un authGuard, pero ahora además de mostrar un error en consola, ya no puedo usar ese token para obtener datos de la API, alguna alternativa o solución para ello?, te lo agradecería mucho.
Hay una solución para tu problema. Tenes que envolver todo lo que tenga que ver con localstorage en un método que Angular nos provee que es isPlatformBrowser().
De esta manera sólo se utiliza localstorage en los navegadores y no en el prerender del servidor.
Googlea ese método que te debería salir la respuesta rápido.
@@puntojson utilicé lo que me aconsejaste y ahora funciona muy bien, muchas gracias.
Joya 😊😊
De nada!
Saludos profe. Tengo un inconveniente con la libreria apexcharts, cuando creo un proyecto con angular en su version 17 sin ssr no hay problema pero cuando lo creo con ssr, me deja de funcionar la libreria (apexcharts es una libreria para mostrar graficos) me arroja un error de ssr module. Porque ocurre esto profe?
Buenas! Me podrás copiar con exactitud el error?
Probablemente es porque tu librería usa elementos como window o localstorage que en ssr no sabemos si están disponible todo el tiempo (ya que en el servidor no existen estos objetos).
Si fuese ese el error tenés que envolver el uso de la librería en un if(isPlatformBrowser()).
Googlealo para ver como hacerlo, es para revisar que estemos en el navegador antes de usar elementos que requieren del navegador.
@@puntojson este es el error presentado: [vite] Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: window is not defined
at node_modules/apexcharts/dist/apexcharts.common.js
Es exactamente lo que te dije. Tu librería quiere usar window, pero la api de window no está disponible en el ambiente de servidor. Revisate lo de isPlatformBrowser() y si no te sale avisame que puedo explicarme mejor cuando esté en la PC.
@@puntojson investigué pero no encontre como usar la librería, ésta la importo en los imports de mi app component que es standalone y justo allí falla.
Mañana le pego una mirada.
Si querés mostrame algo de código de tu componente o algo que voy a ver si lo puedo hacer andar
va yo supongo q falta un null nomas
setCanonicalURL(url?:string){
const canUrl = url == undefined ? this._document.URL : url;
const head = this._document.getElementsByTagName('head')[0];
let element:HTMLLinkElement | null=this._document.querySelector(`link[rel='canonical']`) || null
if(!element){
element = document.createElement('link') as HTMLLinkElement;
head.appendChild(element)
}
element.setAttribute('rel', 'canonical');
element.setAttribute('href', canUrl);
head.appendChild(element);
}
Exacto! La lograste completar!
No se debería usar siempre SSR. Para webs privadas tipo CRM/CMS por ejemplo no tiene sentido usarlo.
Exactamente! Cuando todo el contenido es dinámico muchas veces ni vale la pena y es mejor usar la configuración de siempre de angular (client side rendering).