Verificación de contenido en el framework NextJS
En lecciones anteriores intentamos hacer dos tipos de componentes: del servidor y del cliente. Asegurémonos de que en los componentes del servidor se resuelve el problema de SEO. Es decir, debemos verificar que al navegador llegue el maquetado con el texto de nuestro componente. Hagámoslo.
Supongamos que nuestro componente del servidor tiene la siguiente forma:
export default function Test() {
let name = 'user';
return <h1>hello, {name}!</h1>;
}
Abra la página con este componente en el navegador.
Luego presione Ctrl + U. Esta combinación
de teclas abrirá el código HTML fuente de la página.
Este es el código que llega desde el servidor.
Es decir, antes de aplicarle el JavaScript
del navegador. Así es como ven nuestra página
los sistemas de búsqueda. Así que, abra el código
fuente y estúdielo. Allí encontrará el texto
de nuestro componente.
Ahora, por ejemplo, hagamos un componente del cliente:
'use client';
import { useState } from 'react';
export default function Test() {
let [name, setName] = useState('user');
return <h1>hello, {name}!</h1>;
}
De nuevo presione Ctrl + U y estudie
el código fuente. No encontrará el texto de nuestro
componente, ya que su texto se forma
dinámicamente en el navegador.
En esto se manifiesta la principal diferencia entre los componentes del servidor y los del cliente.
Lleve a cabo las manipulaciones descritas en la lección.
Explique en qué se diferencian los componentes del servidor y los del cliente desde el punto de vista del SEO.
Además del SEO, ¿qué otras diferencias tienen los componentes del cliente y del servidor?
