Optimiza tu SPA con React y Next.js: Más rápido que nunca

Las Single Page Applications (SPA) pueden volverse lentas con demasiados componentes cliente.

El truco

Antes (mal):

// pages/index.js
import React from 'react';
import HeavyComponent from '../components/HeavyComponent';

function HomePage() {
  return (
    <div>
      <h1>Bienvenido</h1>
      <HeavyComponent />
    </div>
  );
}

export default HomePage;

Después (bien):

// pages/index.js
import React from 'react';

function HomePage() {
  return (
    <div>
      <h1>Bienvenido</h1>
      <HeavyComponent />
    </div>
  );
}

// components/HeavyComponent.server.js
import React from 'react';

function HeavyComponent() {
  // Lógica pesada que ahora se ejecuta en el servidor
  return <div>Contenido pesado renderizado en el servidor</div>;
}

export default HeavyComponent;

Mover los componentes pesados al servidor con Server Components de Next.js reduce el tiempo de rendering en el cliente, mejorando el tiempo de carga. Los componentes renderizados en el servidor no afectan a la carga inicial del cliente y permiten que la lógica pesada se ejecute en el servidor, liberando recursos en el cliente.

Cambiar de enfoque a Server Components puede mejorar significativamente el rendimiento de tu aplicación, especialmente en dispositivos con recursos limitados.