¡Estamos en directo en Twitch!

¡Entra y participa!

Imagen de la etiqueta react

Dev Fest Alicante - React Rendering Strategies enlaces

· 3 minutos de lectura · ¿Una errata? Edita el artículo

Slides talk

Slides
DevFest edition slides for React Rendering Strategies talk.

Show me the code!

React Rendering Strategies Repository
All examples, all strategies packages, in a single place.

PageSpeed Insights API
Used in order to retrieve the Lighthouse metrics every 5 minutes and send them over a Datadog.

Frontend Performance: Measuring & KPIs
Good article regarding how to measure frontend performance. I grabbed the comic strip about TTI from here.

Wordpress Market Share
According to this website, Wordpress is the most popular CMS with a 60% of market-share. Outside the CMS market, that means Wordpress is used by 33.5% of all websites online.

SSR with hydration Demo
Demo website to show Server Side Rendering with (re)hydration demo.

About Dynamic Rendering

Yandex Documentation regarding Sites Crawling
Yandex documentation stating that client-side rendering is not supported by their crawlers.

Dynamic Rendering Guide
Guide from Google explaining how to implement Dynamic Rendering strategy by route on your site and how can it help you.

Googlebot evergreen
Announcement regarding the Googlebot update, its new features and what it means for SEO.

Dynamic Rendering by Component demo
Demo that shows how Dynamic Rendering at component level works. Change your user-agent in order to get the two different rendering.

@midudev/react-dynamic-rendering package
If your visitor is a bot, like GoogleBot or Yandex, use Server Side Rendering and Client Side Rendering. If it’s a client, only use Client Side Rendering.

About Static Content

Static Content Demo
Demo of Static Content render strategy usage.

suppressHydrationWarning prop documentation
Official documentation regarding the supressHydrationWarning prop used on Static Content strategy to remove noisy console errors when using this technique.

@midudev/react-progressive-hydration package
Server Side Rendering for a component and skip the hydration step on the client but, as soon as it appears on the viewport, hydrate it. Useful for list of items or components that are not visible on the viewport but yet you need to render them for SEO.

About Progressive Hydration

Progressive Hydration Demo
Demo of Progressive Hydration.

@midudev/react-static-content package
Server Side Rendering for a component and skip the hydration step on the client. Useful for components that don’t need to use interactivity (like SEO links).

react-prerendered-component
Partial hydration and caching in a pre-suspense era

react-progressive-hydration
Google experiment regarding using progressive hydration on React applications.

Implementations in other libraries

Lazy Hydration
Lazy Hydration for Vue SSR

vue-lazy-hydration
Lazy hydration of server-side rendered Vue.js components

Angular Progressive Loading future feature
Progressive Rehydration technique on development for Angular.

Other

Bundlephobia
Awesome tool to check the dependencies and potential bundle size of a package.

Gifs from ehcat Awesome gifs from ehcat artist.

Comparte el artículo