FELIPECSS No mundo do desenvolvimento web, a criação e reutilização de componentes desempenha um papel crucial na construção de interfaces de usuário eficientes e escaláveis. O Nuxt 3, uma popular estrutura de renderização do lado do servidor (SSR), introduziu os Componentes de Servidor Autônomos, uma poderosa abordagem para o desenvolvimento de componentes altamente performáticos. Neste post, vamos explorar os Componentes de Servidor Autônomos do Nuxt 3 e também faremos uma comparação com os React Server Components (RSC) do React.
O que são Componentes de Servidor Autônomos do Nuxt 3?
Os Componentes de Servidor Autônomos do Nuxt 3 são uma nova forma de criar componentes que oferecem uma renderização mais eficiente e rápida no lado do servidor. Ao contrário dos componentes tradicionais, que exigem uma chamada assíncrona para o servidor para serem renderizados, os Componentes de Servidor Autônomos são pré-renderizados e enviados diretamente para o cliente. Isso resulta em uma experiência de carregamento mais rápida para o usuário final, especialmente em dispositivos com conexões de internet mais lentas.
Esses componentes adicionam 0 JavaScript ao seu cliente, o que torna seu aplicativo mais rápido!
Os componentes do servidor são atualmente experimentais e, para usá-los, você precisa habilitar o recurso em seu nuxt.config
nuxt.config
export default defineNuxtConfig({
experimental: {
componentIslands: true
}
})
Os Componentes de Servidor Autônomos são pré-renderizados no servidor, o que permite que o cliente receba o HTML já renderizado. Isso reduz o tempo de carregamento e melhora a velocidade de renderização da página.
Com o carregamento mais rápido das páginas, os usuários desfrutam de uma experiência de navegação mais fluida e responsiva. Isso é especialmente benéfico em dispositivos móveis e em áreas com conexões de internet instáveis.
Quando seus adereços forem atualizados, isso resultará em uma solicitação de rede que atualizará o HTML renderizado no local.
Vamos agora analisar um exemplo prático para ilustrar o uso dos Componentes de Servidor Autônomos no Nuxt 3. Suponhamos que desejamos criar um componente chamado HighlightedMarkdown que renderiza conteúdo Markdown formatado em HTML com um contador exibido ao lado. Vamos ver como isso pode ser implementado.
Primeiro, criamos o arquivo HighlightedMarkdown.server.vue dentro da pasta components do projeto Nuxt 3. Neste exemplo, o componente possui uma prop chamada total, que representa o valor de um contador a ser exibido. Além disso, utilizamos a biblioteca markdown-it para converter um texto em Markdown para HTML.
HighlightedMarkdown
<template>
<div>
<span>Total {{ total }}</span>
<div v-html="html" />
</div>
</template>
<script setup>
import MarkdownIt from 'markdown-it';
const props = defineProps({
total: Number,
});
const md = new MarkdownIt();
const string = `# Meu componente 8-)
- renderizado como html
- muito legal
- 0 JavaScript ao seu site
`;
const html = md.render(string);
</script>
O componente HighlightedMarkdown.server.vue não possui reatividade interna para as propriedades. Isso significa que, se você tivesse um botão e ele incrementasse ali dentro, a reatividade não aconteceria, pois é apenas um valor estático.
Porém no exemplo, ao criar a props total e passar a lógica de contagem para o componente pai, passando o valor dela, podemos ver que o valor será atualizado.
App.vue
<template>
<div>
<button @click="contador++">Contador é {{ contador }}</button>
<HighlightedMarkdown :total="contador" />
</div>
</template>
<script setup>
const contador = ref(0);
</script>
<style>
* {
background: black;
}
div,
button {
color: #15ca82;
}
</style>
ao realizar mudanças que afetam o componente no navegador, você poderá observar as chamadas ao servidor no console do navegador.
Quando você interage com o componente App.vue, por exemplo, ao clicar no botão que incrementa o valor do contador, ocorrerá uma nova solicitação ao servidor para renderizar novamente o componente HighlightedMarkdown com o novo valor atualizado passando como parâmetro a props.
Eu acredito que os Componentes de servidor são ideais para componentes que não precisam serem interativos e ou atualizados (mesmo funcionando). Lembrando novamente que ainda é experimental e possui limitações, uma delas é que ele sempre precisa ser síncrono ou causará problemas de Hidratação, dentre outras
Portanto, ao utilizar Componentes de Servidor Autônomos do Nuxt 3 e realizar mudanças no navegador que afetam esses componentes, é possível observar as chamadas ao servidor no console do navegador, permitindo acompanhar o processo de atualização e garantindo que as solicitações sejam feitas corretamente.
O conteúdo desse post voce pode verificar o aqui.
Espero que esta informação seja útil e até a próxima!!!