/static-site-comparative

Primary LanguageTypeScript

Comparacion de NEXTJS, ASTROJS

Introduccion

Proyecto individual el cual se realizó para comparar Nextjs React Vs Astro-Solidjs

Objetivos del Proyecto

  • Mirar el Performance entre una tecnología y otra
  • comparar resultados
  • concluciones.

Tecnologias Utilizadas

Caso Nextjs:

HTML, CSS, Javascript, React, Nextjs

Caso ASTrojS:

HTML, CSS, Javascript, Solidjs, Astrojs

  • JSON con 107 datos de jujutsu-kaisen.fandom
  • Todos los datos se cargan en el Home. Por lo que es un caso atipico ya que la mayoria evitan tener muchos productos en el misma Home

Imagenes del Proyecto

  • Portada portada static site

  • Performance con Nextjs

Next_Static_result

  • Carga 508 ms

slowCellPhoneNextjsPerformance

  • Simulación en celular 3g con una lentitud de procesamiento de 4x de lento.
  • Carga para primera interacción 8.64s
  • Performance con Astrojs

solidjs-astro

  • Carga 105 ms

soli-astro-slowpage-slowmobilephone

  • Simulación en celular 3g con una lentitud de procesamiento de 4x de lento.
  • Carga para primera interacción Carga 4.44 s

Conclusiones

  • Se estima que al dia de hoy agosto de 2022 astro es superior que Nextjs para cargar sitios Estáticos.
  • Esta superioridad se debe a que Astro por defecto carga el HTML, CSS primero y aunque Nextjs hace esto el primero carga el JS y luego si carga HTML y CSS.
  • Adicionalmente este video reporta una velocidad de estatico de astro-react de 10 ms vs 42ms nextjs-react por este gran video que: static-nextjs-astro.
  • Debido a esto se utilizo solidjs con astro para ver su performance se concluye que con astro-solidjs es mas rapido que astro-react hasta la fecha de 2022.