function ProductPage({productId}) {
  <ProductDetails productId={productId} >
    <ProductShipping productId={productId} />
    <RelatedProducts productId={productId} />
  </ProductDetails>
}

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);
  ...
}

function ProductPage({productId}) {
  <ProductDetails productId={productId} >
    <ProductShipping productId={productId} />
    <RelatedProducts productId={productId} />
  </ProductDetails>
}

// 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>
  );
}