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

React Server Components

By Stiven Castillo

React Server Components

  • 98