El arte del renderizado condicional: consejos y trucos para desarrolladores de React y Next.js

El renderizado condicional es una técnica que se usa en aplicaciones web para mostrar de forma selectiva un componente de un conjunto de opciones según una condición, como el estado de autenticación del usuario, sus privilegios o el estado de la aplicación. También se puede usar para implementar diversos conceptos fundamentales de la interfaz de usuario de React, como el enrutamiento del lado del cliente y la carga diferida.

En este artículo, aprenderás sobre las ventajas del renderizado condicional, en qué se diferencia del enrutamiento condicional y cómo implementar ambos en React, Next.js y Remix.

Ventajas del renderizado condicional en React

En las aplicaciones creadas con React o con frameworks similares, usar el renderizado condicional ofrece muchas ventajas, entre ellas, tiempos de carga más rápidos.

El tiempo de carga de una aplicación web depende del tamaño del Modelo de objetos del documento (DOM) de la página que se está cargando. Mantener demasiados elementos, especialmente aquellos que no se muestran hasta que el usuario se desplaza hacia abajo, puede generar un tamaño del DOM innecesariamente grande y reducir el rendimiento de tu aplicación.

En este caso, se puede implementar la carga diferida, una técnica popular que aplaza la carga de recursos hasta que se necesitan, para posponer el renderizado de un componente hasta que el usuario se desplaza hacia abajo y este aparece en el área visible. Una de las bibliotecas de carga diferida más populares de React, react-lazyload, usa el renderizado condicional para mostrar componentes solo cuando el usuario se desplaza hasta ellos y aparecen en el área visible del navegador; es decir, cuando el usuario puede verlos.

Además de mejorar el rendimiento, el renderizado condicional también puede mejorar la experiencia del usuario. Te permite personalizar la interfaz según las características del usuario, como su estado de autenticación (es decir, mostrar un botón para iniciar sesión a los usuarios no autenticados y uno para cerrar sesión a los autenticados en el mismo lugar de la pantalla) y sus privilegios de acceso (es decir, mostrar controles de edición y análisis detallados a los propietarios de contenido, como publicaciones en redes sociales, y ofrecer información limitada a quienes no son propietarios).

Además, el renderizado condicional te ayuda a gestionar de forma adecuada las operaciones del lado del cliente, como la obtención de datos y la comunicación con el backend. Puedes mostrar una barra de carga mientras se realiza una operación u ocultar una lista vacía mientras se cargan datos de una fuente remota.

El renderizado condicional también permite el enrutamiento del lado del cliente en aplicaciones React de una sola página, como el paquete react-router.

En resumen, se puede decir que el renderizado condicional es una de las técnicas más importantes de React.

Renderizado condicional frente a enrutamiento condicional

Al hablar del renderizado condicional, suele surgir el tema del enrutamiento condicional. El enrutamiento condicional es similar al renderizado condicional porque controla lo que el usuario puede ver según condiciones como el estado del usuario o de la aplicación. Sin embargo, en lugar de mostrar o eliminar componentes, lleva al usuario de una ruta (o página) a otra. Esto resulta útil desde la perspectiva del control de acceso.

Se puede acceder directamente a las aplicaciones web mediante URL. Esto significa que los usuarios pueden guardar y conservar la URL de una página de tu aplicación, independientemente de que sea pública o no. En el caso de las páginas con privilegios (páginas no públicas a las que solo pueden acceder usuarios con determinados roles, como las páginas de perfil o preferencias personales), se pueden usar las URL de forma indebida para intentar acceder a contenido restringido.

Con el enrutamiento condicional, una aplicación React puede determinar si una solicitud entrante para mostrar una página tiene los privilegios necesarios para acceder a la ruta. Si no los tiene, se deniega el acceso y se redirige la solicitud a otra página. A menudo, la página de destino pide al usuario que se autentique o le informa que se le denegó el acceso.

Por ejemplo, para ver el enrutamiento condicional en acción, abre https://mail.google.com/mail en una nueva ventana de incógnito. Se te redirigirá a la página de inicio de sesión de Google. Así funciona el enrutamiento condicional en segundo plano.

Sin embargo, el enrutamiento condicional en una SPA no garantiza la seguridad. Incluso antes de que tu aplicación React (de una sola página) redirija a los usuarios no autenticados, el código fuente JavaScript sigue incluyendo el contenido de la página restringida. Esto podría provocar incidentes de acceso no autorizado a datos restringidos. Por eso, lo mejor es configurar el enrutamiento condicional relacionado con la autenticación en el servidor, mediante frameworks como Next.js y Remix.

Implementar el renderizado condicional en React

Ahora que sabes más sobre el renderizado condicional, en la siguiente sección aprenderás a implementarlo en una aplicación React con uno de los conceptos fundamentales de la programación: la instrucción if…else.

Para empezar, crea una nueva aplicación React ejecutando los siguientes comandos:

1npx create-react-app conditional-rendering-react
2cd conditional-rendering-react
3npm install

Cuando la aplicación esté lista, pega el siguiente código en el archivo src/App.js:

1import { useState } from "react"
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6  <div>You are logged out</div>
7  <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13  <div>You are now logged in</div>
14  <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18function App() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use an if...else statement to render one out of two components based on the login state
30  if (loggedIn)
31    return <LogoutButton toggleLoggedIn={toggleLoggedIn} />
32  else
33    return <LoginButton toggleLoggedIn={toggleLoggedIn} />
34}
35
36export default App;

Este código incluye comentarios en línea que explican cómo se implementó todo.

A continuación, intenta ejecutar la aplicación con el siguiente comando:

1npm start

Cuando vayas a la URL de la aplicación (es decir, http://localhost:3000), verás un texto y un botón en la pantalla:

Haz clic en el botón Iniciar sesión para cambiar el estado y activar un nuevo renderizado. Verás que tanto el texto como el botón cambian para mostrar los elementos correspondientes a un usuario que inició sesión:

¡Y eso es todo! Así de fácil es implementar el renderizado condicional en React. A continuación, verás cómo hacerlo en una aplicación Next.js.

Implementar el renderizado y el enrutamiento condicionales en Next.js

Next.js es un framework de código abierto basado en React, con opiniones definidas y enfocado en la producción, que te ayuda a crear aplicaciones web de alto rendimiento. Vercel lo lanzó en 2016 y, desde entonces, se ha convertido en uno de los principales frameworks basados en React del sector del desarrollo web.

Next.js incluye renderizado del lado del servidor y renderizado estático, además de ofrecer soluciones fáciles de usar para problemas comunes del desarrollo, como la obtención de datos, el enrutamiento y los entornos de ejecución del servidor.

Cómo implementar el renderizado condicional en Next.js

Como la sintaxis de JSX es coherente en Next.js y React, puedes aplicar técnicas de renderizado condicional en Next.js igual que en React.

Para empezar con Next.js, crea una nueva aplicación Next.js ejecutando el siguiente comando:

1npx create-next-app conditionals-next

Sigue las instrucciones en pantalla para crear la aplicación. Puedes elegir las opciones predeterminadas (excepto TypeScript, donde tendrás que seleccionar No). Una vez creado el proyecto, pega el siguiente código en el archivo pages/index.js:

1import { useState } from "react";
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6    <div>You are logged out</div>
7    <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13    <div>You are now logged in</div>
14    <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18export default function Home() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use the ternary conditional operator to render one out of two components based on login state
30  return loggedIn 
31  ? <LogoutButton toggleLoggedIn={toggleLoggedIn} /> 
32  : <LoginButton toggleLoggedIn={toggleLoggedIn} />
33}

Este código incluye comentarios en línea que explican qué ocurre en cada paso. Una diferencia importante con respecto al ejemplo de React es que aquí se usa el operador condicional ternario de JavaScript para elegir uno de dos componentes al renderizar. Puedes ejecutar la aplicación con el siguiente comando:

1npm run dev

Cuando se inicie la aplicación, verás algo como esto en http://localhost:3000:

Una vez más, puedes hacer clic en el botón Iniciar sesión para cambiar el estado:

Cómo implementar el enrutamiento condicional en Next.js

Implementar el enrutamiento condicional en Next.js 10 o versiones posteriores también es fácil. Para empezar, crea un nuevo archivo profile.js en el directorio conditionals-next/pages y pega este fragmento de código:

1// This is the profile page
2const Profile = () => {
3  return <div>This is your profile</div>
4}
5
6// This function is called on the server side before the page is rendered
7// Redirecting from this method means that the user will not see the page even for a flash of a second (which often happens in client-side redirection)
8export async function getServerSideProps(context) {
9    const allowAccess = false; // This is usually deduced from the authentication state of the user
10
11    if (!allowAccess) {
12
13        console.log("Redirecting to home...")
14
15        return {
16            redirect: {
17                permanent: false,
18                destination: "/"
19            }
20        }
21    } else
22        return { props: {} }
23}
24
25export default Profile

Luego, vuelve a ejecutar la aplicación y ve a http://localhost:3000/profile. Se te redirigirá de inmediato a la página de inicio (es decir, la ruta /). Puedes revisar la terminal para ver el registro de redirección:

1# ... other output here
2wait  - compiling...
3event - compiled client and server successfully in 109 ms (199 modules)
4wait  - compiling /profile (client and server)...
5event - compiled client and server successfully in 114 ms (202 modules)
6Redirecting to home...

Si cambias el valor de allowAccess a true, podrás ver la página de perfil:

Implementar el renderizado y el enrutamiento condicionales en Remix

Remix es otro framework basado en React, cada vez más popular, para crear aplicaciones web centradas en los estándares web y que te ayuda a ofrecer mejores experiencias de usuario. Remix se convirtió en un proyecto de código abierto en 2021 y se ha vuelto un fuerte competidor de Next.js.

Remix es un framework que renderiza completamente del lado del servidor y ofrece funciones como límites de error integrados y gestión de transiciones.

Cómo implementar el renderizado condicional en Remix

Como Remix se basa en React, puedes implementar el renderizado condicional de forma similar a como lo hiciste en React y Next.js.

Para empezar, crea un nuevo proyecto Remix ejecutando el siguiente comando:

1npx create-remix@latest

Sigue las instrucciones para crear el proyecto. Asegúrate de elegir JavaScript en lugar de TypeScript. Una vez creado el proyecto, pega el siguiente fragmento de código en app/routes/index.jsx:

1import { useState } from "react";
2
3// Define two components
4const LoginButton = (props) => {
5  return <>
6    <div>You are logged out</div>
7    <div><button onClick={props.toggleLoggedIn}>Log In</button></div>
8  </>
9}
10
11const LogoutButton = (props) => {
12  return <>
13    <div>You are now logged in</div>
14    <div><button onClick={props.toggleLoggedIn}>Log Out</button></div>
15  </>
16}
17
18export default function Index() {
19  // Define a state that the condition will be based upon
20  const [loggedIn, setLoggedIn] = useState(false);
21
22  // Define a function that can change the condition value
23  const toggleLoggedIn = () => {
24    setLoggedIn((currState) => {
25        return !currState;
26    })
27  }
28
29  // Use a switch statement to render one of two components based on login state
30  switch(loggedIn) {
31    case true: return <LogoutButton toggleLoggedIn={toggleLoggedIn} />
32    case false: return <LoginButton toggleLoggedIn={toggleLoggedIn} />
33    default: return null
34  }
35}

Este fragmento de código incluye comentarios en línea que explican qué ocurre en cada paso. En lugar de usar una instrucción if...else o un operador condicional ternario, este ejemplo usa una instrucción switch para decidir qué componente renderizar.

Al igual que en los ejemplos anteriores, así se verá la página de inicio en http://localhost:3000:

Como antes, puedes hacer clic en el botón Iniciar sesión para cambiar el estado:

Cómo implementar el enrutamiento condicional en Remix

Al igual que implementaste el enrutamiento condicional del lado del servidor en Next.js, también puedes hacerlo en Remix. Crea un nuevo archivo profile.jsx en el directorio conditionals-remix/app/routes y pega el siguiente código:

1import { redirect } from '@remix-run/node'
2
3const Profile = () => {
4    return <div>This is your profile</div>
5}
6
7export const loader = () => {
8    const allowAccess = false; // This is usually deduced from authentication state of the user
9
10    if (!allowAccess) {
11        console.log("Redirecting to home...")
12
13        return redirect('/')
14    }
15
16    return null
17}
18
19export default Profile

Aquí se usa una función loader en lugar de la función getServerSideProps, ya que Remix admite loaders para cargar datos en los componentes mientras se renderizan en el servidor (algo similar a lo que puede hacer getServerSideProps en Next.js). Además, se devuelve la función de utilidad redirect (similar a la función redirect de Next.js) para iniciar una redirección cuando allowAccess se establece en false.

Ve a http://localhost:3000/profile y, una vez más, se te redirigirá de inmediato a la página de inicio (es decir, la ruta /). Puedes revisar la terminal para ver el registro de redirección:

1# ... other output here
2💿 Rebuilding...
3💿 Rebuilt in 100ms
4GET / 200 - - 17.179 ms
5Redirecting to home...        #=== here it is
6GET /profile 302 - - 7.107 ms
7GET / 200 - - 6.564 ms

Si cambias el valor de allowAccess a true, podrás ver la página de perfil:

Consideraciones adicionales sobre el renderizado condicional

Al trabajar con renderizado condicional, quizá te preguntes cómo afecta al DOM virtual. ¿Los distintos métodos de renderizado condicional ofrecen el mismo rendimiento? ¿Crear un componente nuevo o un componente de orden superior (HOC) para abstraer los detalles del renderizado condicional afecta al DOM de tu aplicación (y a su rendimiento)? En esta sección encontrarás las respuestas.

Renderizado condicional y JSX

La forma en que implementas el renderizado condicional no afecta al DOM ni al rendimiento de tu aplicación. Considera el siguiente ejemplo:

1if (loggedIn)
2  return <button>Log Out</button>
3else
4  return <button>Log In</button>

También puedes escribirlo así, usando el operador condicional ternario:

1return <button>{loggedIn ? "Log Out" : "Log In"}</button>

En ambos casos, el componente principal devolverá uno de los dos componentes (es decir, LoginButton y LogoutButton) y se generará exactamente el mismo cambio en el DOM. Podrías argumentar que ambos pueden devolver instancias distintas de la etiqueta de botón, pero no es así. Esto se debe a que los elementos JSX, como los botones y otras etiquetas, no son instancias. Son simplemente una descripción o un esquema básico de la estructura final de HTML.

Siempre que devuelvas los mismos elementos con la misma estructura, el efecto en el DOM será el mismo. Esto significa que puedes abstraer libremente el renderizado en componentes, siempre que la estructura JSX sea la misma.

Esto también da lugar a situaciones interesantes, como que dos componentes con exactamente la misma estructura compartan un único estado y que solo uno de ellos se renderice condicionalmente en el mismo lugar del DOM. Puedes obtener más información en el sitio web de React, donde se muestra el gran impacto que un simple operador ternario en JSX puede tener en el funcionamiento de tu aplicación.

Componentes anidados y renderizado condicional

Anidar la definición de componentes dentro de otros componentes se considera una práctica anti-pattern. Una de las principales razones es que un componente anidado siempre se vuelve a crear cuando se vuelve a renderizar su componente padre, sin importar su posición en el árbol del DOM. Este comportamiento es diferente de lo que viste antes porque, al volver a renderizarse el componente padre, se vuelve a crear en tiempo de ejecución la definición del componente anidado. Esto es similar a crear una nueva instancia de la definición del componente anidado, lo que provoca este problema.

Conclusión y recursos adicionales

Aunque a primera vista la renderización condicional parece (y es) bastante sencilla, es una técnica muy poderosa para mejorar el rendimiento y la experiencia de usuario de las aplicaciones React. En este artículo, aprendiste cuáles son sus beneficios y en qué se diferencia del enrutamiento condicional, además de cómo implementarla en React, Next.js y Remix.

Para obtener más información sobre la renderización condicional y cómo React maneja el estado entre renderizaciones, no dejes de consultar la nueva documentación de React.

Al trabajar en aplicaciones React, a menudo tendrás que seleccionar e instalar paquetes npm para agregar funcionalidades (como enrutamiento y administración del estado, entre otras). Snyk Advisor puede ayudarte a encontrar el paquete npm adecuado para tu proyecto y, al mismo tiempo, mantener altos estándares de seguridad en tu aplicación. También puedes consultar nuestra lista de 10 buenas prácticas de seguridad que debes seguir al trabajar con React.

También puedes usar Snyk como una extensión de IDE para encontrar código inseguro en bases de código de React y corregir vulnerabilidades de seguridad en dependencias de código abierto.