React es una biblioteca de JavaScript popular para crear aplicaciones web modernas. Sin embargo, dado que React requiere una gran cantidad de código JavaScript cuando se procesa en el lado del cliente, afecta el rendimiento y la optimización SEO de la aplicación. Para combatir esto, se puede usar Server Rendering (SSR) para mejorar el rendimiento y la optimización SEO. En este artículo, veremos más de cerca cómo usar Next.js para aplicaciones React renderizadas por servidor.
¿Qué es Next.js?
Next.js es un marco de JavaScript basado en React para crear aplicaciones React renderizadas por servidor. Proporciona muchas funciones útiles, como división automática de código, procesamiento previo, exportación estática, etc. para simplificar el desarrollo y la implementación de aplicaciones React. Next.js usa Node.js como entorno de servidor y React como marco de representación del lado del cliente.
Ventajas de Next.js:
- Representación del servidor: Next.js admite la representación del servidor, que puede representar los componentes de React en el lado del servidor y enviar cadenas HTML al cliente, mejorando así el rendimiento y la optimización de SEO.
- División automática de código: Next.js puede dividir automáticamente el código en pequeños fragmentos para reducir el tiempo de carga de la página y mejorar el rendimiento.
- Prerenderizado: Next.js puede prerenderizar automáticamente páginas en el momento de la compilación y servir HTML estático en solicitudes posteriores, lo que mejora el rendimiento.
- Exportación estática: Next.js puede exportar páginas como archivos HTML estáticos para una fácil implementación en servicios de alojamiento de sitios web estáticos (como GitHub Pages, Netlify, etc.).
- Admite múltiples fuentes de datos: Next.js puede obtener datos de múltiples fuentes de datos (como API, base de datos, sistema de archivos, etc.) y pasarlos a los componentes de React como accesorios.
- Facilidad de uso: Next.js proporciona muchas funciones útiles, como enrutamiento, estilo y diseño, etc., lo que hace que el desarrollo de aplicaciones React sea fácil y sencillo.
Pasos para una aplicación React renderizada por servidor con Next.js:
- Cree una aplicación Next.js
Primero, debe instalar dependencias como Next.js y React, y crear una aplicación Next.js.
npx create-next-app my-app
cd my-app
npm run dev
Esto iniciará el servidor de desarrollo Next.js en http://localhost:3000.
- Crear la página
A continuación, debe crear la página que representará los componentes de React. Puede crear un nuevo archivo en el directorio de páginas y escribir sus componentes React en él.
import React from 'react';
function Home() {
return (
<div>
<h1>Hello, Next.js SSR!</h1>
</div>
);
}
export default Home;
En el código anterior, se define un componente React simple para renderizar en el lado del servidor y del cliente. Esta página se puede ver visitando http://localhost:3000/.
- Utilice el método getInitialProps para la representación del lado del servidor
A continuación, debe utilizar el método getInitialProps para la representación del lado del servidor. El método getInitialProps es un método estático que se puede definir en un componente y ejecutar tanto en el servidor como en el cliente.
import React from 'react';
function Home({
data }) {
return (
<div>
<h1>{
data.title}</h1>
<p>{
data.body}</p>
</div>
);
}
Home.getInitialProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await res.json();
return {
data: post };
};
export default Home;
En el código anterior, el método getInitialProps se usa para obtener datos de una API y pasar los datos al componente como accesorios. Esto hará que el componente tenga los datos cuando se represente en el lado del servidor. Cabe señalar que el método getInitialProps solo se puede usar en componentes de página.
- Uso del componente de enlace para la navegación del cliente
A continuación, debe usar el componente de enlace para la navegación del cliente. El componente Link es un componente proporcionado por Next.js, que se usa para navegar a otra página en el lado del cliente.
import React from 'react';
import Link from 'next/link';
function Home({
data }) {
return (
<div>
<h1>{
data.title}</h1>
<p>{
data.body}</p>
<Link href="/about">
<a>About</a>
</Link>
</div>
);
}
Home.getInitialProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await res.json();
return {
data: post };
};
export default Home;
En el código anterior, se usa un componente de enlace para crear un enlace que navega a la página /acerca de. Cabe señalar que el componente Enlace solo se puede utilizar en componentes de página.
- Crear páginas adicionales
Finalmente, se pueden crear páginas adicionales para construir una aplicación React completa. Puede crear otro archivo en el directorio de páginas y escribir otro componente de página en él.
import React from 'react';
function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page.</p>
</div>
);
}
export default About;
En el código anterior, se define un componente React simple para renderizar en el lado del servidor y del cliente. Esta página se puede ver visitando http://localhost:3000/about.
En conclusión, crear aplicaciones React renderizadas en servidor es rápido y fácil con Next.js. La representación del servidor y la navegación del lado del cliente se pueden realizar escribiendo componentes de página, usando el método getInitialProps, usando componentes de enlace, etc.