Verificação de Conteúdo no Framework NextJS

Nas lições anteriores, tentamos fazer dois tipos de componentes - do servidor e do cliente. Vamos verificar se, nos componentes do servidor, o problema de SEO foi resolvido. Ou seja, devemos verificar que o navegador recebe a marcação com o texto do nosso componente. Vamos fazer isso.

Suponha que nosso componente do servidor tenha a seguinte aparência:

src/app/test/page.jsxexport default function Test() {
  let name = 'usuário';
  return <h1>Olá, {name}!</h1>;
}

Abra a página com este componente no navegador. Em seguida, pressione Ctrl + U. Esta combinação de teclas abrirá o código HTML original da página. Este é o código que vem do servidor. Ou seja, antes da aplicação do JavaScript pelo navegador. É assim que os mecanismos de busca veem nossa página. Então, abra o código-fonte e estude-o. Lá você encontrará o texto do nosso componente.

Vamos agora, por exemplo, fazer um componente do cliente:

src/app/test/page.jsx'use client';

import { useState } from 'react';

export default function Test() {
  let [name, setName] = useState('usuário');
  return <h1>Olá, {name}!</h1>;
}

Pressione Ctrl + U novamente e estude o código-fonte. Você não encontrará o texto do nosso componente, pois seu texto é formado dinamicamente no navegador.

É nisso que se manifesta a principal diferença entre componentes do servidor e do cliente.