Entro a este curso con un reto personal.
Tengo que mejorar el tiempo de respuesta de mi aplicación que funciona con react en el frontend, typescript y FastAPI en el backend.
Espero lograrlo!!
Fundamentos de SSR
¿Por qué necesito aprender sobre SSR?
El problema de las Single Page Applications
Poniendo a prueba las Single Page Applications
¿Qué es el Server Side Render?
Ventajas y desventajas del Server Side Render
Crea tu primer app con SSR
Tu nuevo proyecto: Helix Eye
Configurando Webpack para compilar TypeScript
Tu primer servidor con Express.js y TypeScript
Creando un template con HTML
Renderizando React desde el servidor
Hidratando la aplicación y separando el bundle del cliente
Initial Props y Consultas a la API desde el servidor
Consumiendo las Initial Props desde el cliente
Manejo de estilos desde el servidor
Bonus
Hot Module Replacement
Platzi Engine vs. Next.js
¿Quieres un Curso Avanzado de Server Side Render?
Resources
Transcript
Why learn server-side rendering with ReactJS?
In the digital age, where web applications are essential to our daily lives, understanding concepts like server-side rendering is key. Enrique De Barst, frontend developer at Platzi, takes us on an educational journey to explore how server-side rendering transforms building web applications with JavaScript. From popular frameworks like NextJS and SvelteKit to Angular and GatsbyJS, all have adopted this technique to improve the delivery and efficiency of their applications.
What is server-side rendering?
Server-side rendering (SSR) is a method that radically changes the way web applications are processed and delivered. Instead of simply living in the browser, applications are now rendered on the server first and delivered already compiled to the user's browser. This means that we do not have some elements of the traditional environment such as window or document, which only exist in the browser.
Main benefits of SSR
- Improved loading speed: By rendering on the server, the first page loads much faster, optimizing the user experience.
- Improved SEO: Search engines can index content more easily as it is available faster.
- Universal accessibility: Websites can be more accessible to different types of browsers and devices.
The Plexi Engine in action
During this course, you will build the Plexi Engine, a rendering engine that will allow you to illustrate how SSR works from the inside. You will learn hands-on about template creation, TypeScript server-side integration and much more, generating a robust foundation for your future developments.
What knowledge is required?
To get the most out of this course, it is vital to have solid knowledge in:
- HTML, CSS and JavaScript: Basic fundamentals of any web development.
- ReactJS: Understanding how this framework works is crucial.
- Webpack 5: Essential tool for creating application packages.
- Node.js: Basic knowledge to handle the server environment.
- TypeScript: Although we will not use all its advanced functionalities, some specific data types will be key to optimize our applications.
Suggested additional resources
If you feel you are missing any of these skills, Enrique suggests taking additional courses at Platzi to reinforce your skills. Don't hesitate to explore the platform to enrich your acquisition skills.
Resolving doubts and expanding knowledge
This course is not just about passive learning. Enrique encourages active participation through questions on the Platzi platform. Also, if you are stuck, you can look him up on Twitter as CodeBars to get quick answers, always remembering to make your queries public.
In short, server-side rendering not only brings new perspectives and methodologies, but also optimizes the way web applications interact with their users. Dive into this experience with Enrique and improve your web development skills considerably.
Contributions 10
Questions 1
Sort by:
Vámoos tengo expectativas altas
Excited
Si alguien llega a ver esto, puede combinar fundamentos de este curso con Astro.js, aunque el curso de astro de platzi ya esta algo desactualizado, Astro es ahora mismo de las mejores alternativas para paginas estaticas o que no sean taaan dinamicas
Si en algun momento Algun profesor revisa esto, deberia haber un curso de Astro utilizando los tipos de Ts y los componentes de React tipados tambien con Ts, en cuando a robustes es de lo mejor que hay
El Server Side Rendering (SSR) ofrece varios beneficios:
1. **Mejor rendimiento**: Al renderizar en el servidor, se entrega HTML completamente renderizado al navegador, lo que reduce el tiempo de carga inicial.
2. **SEO optimizado**: Las páginas renderizadas en el servidor son más amigables para los motores de búsqueda, lo que mejora la indexación.
3. **Experiencia de usuario mejorada**: Los usuarios obtienen una carga más rápida de contenido y una navegación más fluida.
4. **Compatibilidad**: SSR permite que aplicaciones más complejas funcionen bien incluso en dispositivos menos potentes, ya que el procesamiento se realiza en el servidor.
Estos aspectos hacen que el SSR sea una opción popular en el desarrollo moderno de aplicaciones web.
El server-side rendering (SSR) es una técnica de renderizado de aplicaciones web donde el contenido se genera en el servidor antes de ser enviado al navegador. Esto permite que las páginas se muestren más rápidamente y mejoran la experiencia del usuario, especialmente en términos de SEO, ya que el contenido es accesible para los motores de búsqueda desde el primer momento. SSR es común en frameworks como Next.js y permite un rendimiento óptimo al permitir que el servidor maneje la carga inicial antes de que el cliente interactúe con la aplicación.
Preferiría que no se usara TypeScript pero aun así a terminar el curso.
En medio del reto de JavaScript - Tercer Checkpoint
Viendo el LIVE de twitch GNDX y codevars me animan que así cómo estoy a tomar este curso ya iré viendo cómo lo completo.
Se hace un día a la vez! No pares de aprender,
Vamos con todo
Vamooos!
Want to see more contributions, questions and answers from the community?