Next.js Architecture Guide

Entendiendo Client-Side, Server-Side y el consumo de APIs en Redes Internas Privadas

La Analogía del Restaurante ("Con Peras y Manzanas")

Imagina que el Cliente (Navegador) es un comensal sentado en la mesa de un restaurante elegante. El comensal quiere un plato especial, pero la API Interna (El Chef) trabaja en una cocina cerrada de alta seguridad al fondo del recinto. Por normas sanitarias y de seguridad, ningún comensal externo puede entrar a la cocina ni hablar con el Chef directamente.

Aquí es donde entra el Servidor Next.js (El Garzón o Mesero). El Mesero está en el comedor escuchando al cliente, pero tiene una puerta trasera exclusiva para entrar a la cocina privada. El cliente le pide el plato al mesero, el mesero camina de forma segura hacia la cocina interna, recoge el pedido del chef y se lo lleva limpio y montado en un plato directo a la mesa del comensal.

Simulador de Flujo de Datos

Haz clic en el botón para ver cómo viaja la información de forma segura sin exponer la API.

Client Side

Navegador Web

Expuesto al internet público. Maneja el estado interactivo de React, los eventos de click y la UI del usuario.

Server Side

Next.js (BFF)

Capa intermedia segura. Recibe peticiones públicas de internet y actúa como puente hacia la infraestructura interna.

RED PRIVADA / FIREWALL

Internal API

Microservicio Go

Servicio interno aislado de internet. Resuelve consultas pesadas, lógica de negocio y conexiones a bases de datos.

Estado del Sistema
Esperando interacción... Presiona "Simular Petición" para iniciar.

1. Frontend (Client Component)

// app/productos/page.tsx (React Client Component)
"use client";
import { useState } from 'react';

export default function ListaProductos() {
  const [datos, setDatos] = useState(null);

  async function cargarPrecios() {
    // El cliente llama a la ruta LOCAL y pública de Next.js
    const res = await fetch('/api/precios');
    const json = await res.json();
    setDatos(json);
  }

  return (
    <button onClick={cargarPrecios}>Ver Precios</button>
  );
}

2. Servidor (Next.js Route Handler)

// app/api/precios/route.ts (Server Side)
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    // Next.js está en la misma red que la API interna.
    // Consume de forma segura usando la IP o DNS privado.
    const res = await fetch('http://10.0.0.5:8080/v1/precios', {
      headers: { 'Authorization': 'Bearer SECRET_TOKEN' }
    });
    
    const data = await res.json();
    
    // Retorna solo lo necesario al cliente público
    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error: 'Error Interno' }, { status: 500 });
  }
}