El futuro de React Rendering
¿Es React Server Components el cambio de juego?
@stivncastillo_
Buena experiencia de usuario
Barato de mantener
Performace rápido
function ProductPage({productId}) {
<ProductDetails productId={productId} >
<ProductShipping productId={productId} />
<RelatedProducts productId={productId} />
</ProductDetails>
}
Buena Experiencia de Usuario
function ProductPage({ productId }) {
const data = fetchProductDetails(productId);
return (
<ProductDetails
details={data.details}
productId={productId}
>
<ProductShipping
shippingInfo={data.shippingInfo}
productId={productId}
/>
<RelatedProducts
relatedProducts={data.relatedProducts}
productId={productId}
/>
</ProductDetails>
);
}
function ProductDetails({productId}) {
const data = fetchProductDetails(productId);
...
}
function ProductShipping({productId}) {
const data = fetchProductShipping(productId);
...
}
function RelatedProducts({productId}) {
const data = fetchRelatedProducts(productId);
...
}
Barato o fácil de mantener
function ProductPage({productId}) {
<ProductDetails productId={productId} >
<ProductShipping productId={productId} />
<RelatedProducts productId={productId} />
</ProductDetails>
}
Server
Client
Buena experiencia de usuario
Barato de mantener
Performace rápido
+
Server
Client
React Server Components
Componentes que se renderizan en el servidor.
// Note.js - Server Component
// 'use server' por defecto son de servidor
import db from 'db';
// Los paquetes de npm no se añaden al bundle js que se envia al cliente
import {format} from 'date-fns';
// Importamos un componente de cliente
import NoteEditor from 'NoteEditor';
async function Note(props) {
const {id, isEditing} = props;
// Podemos acceder directamente a recursos disponibles en el server
const note = await db.posts.get(id);
return (
<div>
<h1>{note.title}</h1>
<section>{note.body}</section>
<small className="note-updated-at" role="status">
Last updated on {format(updatedAt, "d MMM yyyy 'at' h:mm bb")}
</small>
{/* Renderizar dinámicamente el editor sólo si es necesario */}
{isEditing
? <NoteEditor note={note} />
: null
}
</div>
);
}
Caraterísticas
- Se ejecutan únicamente en el servidor
- Acceso a funcionalidades del servidor
- Integración con componentes del cliente
- Elegir que componentes en el cliente renderizar
- Conservación del estado
- Estados de carga
Pros
- Server-side rendering
- Mejor SEO
- Code-splitting automático
- Obtención de datos desde el servidor
- Reduce el bundle de Javascript
- Seguridad
Contras
- No se puede usar state ni effects
- Acceso directo al navegador
- Aislamiento de código
- Rendimiento en la renderización
- Curva de aprendizaje
- Poca documentación y APIs
Areas de investigación
- Herramientas para desarrolladores
- Rutas
- Paginación
- Mutaciones y caché de componentes
- Pre-rendering
- Static-side generation
Demo
Links
- https://react.dev/blog/2020/12/21/data-fetching-with-react-server-components
- https://dev.to/swyx/an-annotated-guide-to-the-react-server-components-demo-2a83#2021-architecture-qampa-notes
- https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
- https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md
- https://vercel.com/blog/understanding-react-server-components
- https://blog.logrocket.com/react-server-components-comprehensive-guide/#what-react-server-components
- https://github.com/reactjs/server-components-demo
- https://www.youtube.com/watch?v=Fctw7WjmxpU
React Server Components
By Stiven Castillo
React Server Components
- 98