# PRNext 0.1.19: compila no primeiro uso, preserva o estado

Um editor usado em uma página não deve adicionar seu trabalho de compilação a cada inicialização. Um formulário em andamento não deve desaparecer porque uma edição de código chega durante o envio. PRNext 0.1.19-alpha resolve essas situações com compilação de cliente adiada, atualizações de desenvolvimento mais focadas e melhor coordenação entre ações do servidor e atualização rápida.

Esta versão também oferece mais contexto antes de uma migração e um exemplo completo para exercitar uma aplicação com contas, banco de dados e autenticação. Aqui está o que muda em seu projeto, como habilitar as opções úteis e onde seus limites são importantes.

## Mantenha o trabalho em andamento por meio de uma edição de código

Considere um dashboard com um filtro em seu layout e um formulário que chama uma Ação do Servidor. Você salva um componente enquanto a resposta do formulário chega. PRNext coordena essas operações para preservar o layout montado quando a atualização for compatível, em vez de tratar as referências de ação atualizadas como um motivo para iniciar a página novamente.

Ações cuja origem permanece inalterada mantêm sua identidade dentro da sessão de desenvolvimento, inclusive com Componentes de Cache. Ações alteradas recebem novas identidades. As construções de produção mantêm identidades independentes. Uma resposta de voo antiga não pode substituir uma renderização de uma geração mais recente e um erro de ação permanece observável mesmo quando a navegação substitui sua renderização.

A mutação e sua exibição permanecem operações separadas. Uma interação mais recente pode tornar irrelevante uma exibição mais antiga, mas PRNext nunca mais envia a mutação. Edições incompatíveis, algumas alterações de configuração e uma recarga completa do documento ainda podem redefinir o estado mantido na memória.

## Compile uma ferramenta grande ao abri-la

Uma importação dinâmica comum produz um pedaço durante a compilação, mesmo durante o download, ela aguarda uma interação. No desenvolvimento, experimental.lazyDynamicImports vai além: mantém os alvos de clientes elegíveis fora do gráfico inicial do navegador e aguarda seu primeiro uso antes de transformá-los e compilá-los.

Habilite esta opção em um aplicativo App Router usando o compilador nativo. Um editor, um visualizador ou um painel raramente aberto é um local útil para comparar o comportamento. A opção está desabilitada por padrão.

```js
export default {
  experimental: {
    lazyDynamicImports: true
  }
};
```

O primeiro uso paga o custo de compilação desse subgráfico. Os arquivos são preparados em teste privado e publicados completos. Os estilos são carregados antes que a importação seja resolvida. Uma vez ativado, o módulo participa de atualizações de JavaScript e CSS. As dependências do ESM já carregadas mantêm sua identidade e ligações ativas; dois importadores também compartilham o mesmo objeto JSON.

O benefício pretendido é retirar o trabalho da inicialização quando seu fluxo de trabalho não usa essa ferramenta. Meça a inicialização e o atraso no primeiro uso juntos. A opção não altera os blocos de produção nem o comportamento de renderização do servidor.

## Um exemplo com um editor somente para navegador

Um componente próximo/dinâmico com ssr: false mantém o editor no navegador. Neste exemplo, o componente é solicitado somente após a abertura do painel. Com a compilação adiada habilitada, seu código de cliente elegível aguarda até ser usado.

```jsx
'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./editor'), {
  ssr: false,
  loading: () => <p>Loading the editor…</p>
});

export default function EditorPanel() {
  const [open, setOpen] = useState(false);
  return open
    ? <Editor />
    : <button onClick={() => setOpen(true)}>Open the editor</button>;
}
```

O escopo inicial exclui ganchos de webpack e carregadores personalizados. Importações computadas, atributos de importação e caminhos literais contendo ? ou # mantenha a compilação normal. Um sufixo introduzido por um alias ou dependência dentro de um gráfico diferido produz um erro explícito. Uma dependência CommonJS compartilhada cuja identidade não pode ser preservada e uma nova ação do servidor descoberta apenas por meio desse gráfico também exigem o caminho comum ou uma importação estática adequada.

Os estilos ativados permanecem carregados para a geração de desenvolvimento, inclusive com rotas paralelas. Prefira módulos CSS ou seletores locais para a ferramenta. O mecanismo requer hardlinks no sistema de arquivos da geração; desative a opção quando esse ambiente não puder criá-los.

## Edite uma folha de estilo sem copiar a compilação JavaScript

Uma edição CSS compatível reconstrói os pacotes afetados e publica uma pequena geração de estilo sobre a geração JavaScript atual. PRNext retém recursos ainda em uso, incluindo imagens, fontes e mapas de origem, sem digitalizar ou copiar todos os arquivos JavaScript para essa atualização.

Se você editar os estilos de um painel e depois editar outro painel várias vezes, os recursos modificados do primeiro painel permanecerão disponíveis no catálogo de estilos limitado. Os recursos inalterados permanecem acessíveis na geração base. Proveniência incompleta, um catálogo superdimensionado ou uma alteração incompatível resulta em uma construção completa.

Os gráficos incrementais também dividem seu orçamento entre compilação principal e estilos. Os estilos podem emprestar capacidade não utilizada sem despejar continuamente os gráficos principais quando um projeto tem muitos escopos CSS. Os limites permanecem globais e o trabalho é descartado quando a sessão é encerrada.

Em macOS, uma notificação de diretório pode combinar diversas alterações. PRNext verifica os arquivos nessa subárvore de origem para detectar uma edição profunda, tanto no desenvolvimento quanto com build --watch. Se a verificação permanecer incompleta, ele reportará um erro recuperável e manterá a compilação anterior sem iniciar um loop de compilação.

## Entenda uma incompatibilidade antes de alterar os tempos de execução

Uma importação next/* suportada em sua fonte pode ocultar uma dependência que usa um API privado diferente. A auditoria de migração segue importações estáticas acessíveis em pacotes instalados. Ele leva em conta os contextos do navegador, do nó e do componente do servidor React e relata o arquivo, a linha e a cadeia de importação por trás de um diagnóstico.

Um limite de servidor de uso permanece um limite de servidor quando um Componente Cliente o alcança por meio de uma reexportação. Uma dependência do navegador em um nó API é verificada com mapeamentos de navegador e implementações instaladas, em vez de ser aceita apenas porque o pacote existe.

A partir de um projeto com a versão PRNext pretendida já instalada, comece com verificações que não aplicam uma migração:

```sh
npx --no-install prnext migrate --dry-run
npx --no-install prnext migrate --check --json
```

O relatório distingue o comportamento inspecionado do comportamento desconhecido. Uma importação computada, saída do carregador ou limite de passagem não se torna um sucesso implícito. A auditoria não executa os módulos de dependência que inspeciona, mas a avaliação da configuração pode executar o código do projeto. Não é uma sandbox para código não confiável nem um certificado de compatibilidade. Uma construção real e os fluxos de trabalho do seu aplicativo ainda são necessários.

## Vá além de uma página de demonstração para um aplicativo com contas

O exemplo de referência saas combina Better Auth, PostgreSQL, Drizzle e next-intl em um aplicativo em francês e inglês. Cada conta possui suas notas. O painel verifica a sessão e cada mutação verifica novamente o usuário e a propriedade dos dados. Ocultar um botão ou proteger apenas a página não é suficiente.

Os formulários de autenticação aplicam orçamentos atômicos PostgreSQL compartilhados antes do caro hash de senha. Os fluxos de trabalho de qualificação exercem revogação de sessão, rejeição de CSRF e retornos de chamada OpenID Connect inválidos, usando um provedor local controlado e um proxy HTTPS que verifica cookies seguros.

O mesmo aplicativo é testado após realocar sua saída autônoma, com dois trabalhadores e a fonte original removidos. É um ponto de partida verificável. Regras de acesso, recuperação de conta, verificação e limites de abuso ainda precisam corresponder ao seu produto. Na implantação, mantenha o back-end privado por trás de um proxy confiável que substitua os cabeçalhos de encaminhamento.

## Tornar a pré-busca explícita e a retenção de voo ociosa vinculada

Fora dos componentes de cache, Link prefetch={true} agora solicita uma pré-busca completa do destino. Esta escolha explícita permanece sujeita à política de pré-busca e aos orçamentos do navegador. Na hora do clique, o destino é revalidado; a pré-busca não autoriza a exibição de uma resposta privada que se tornou obsoleta.

O transporte aéreo também limita a retenção de bases que não estão mais em uso e evita uma cópia desnecessária do cache-buffer. Essas mudanças visam caminhos específicos. Eles não estabelecem que uma página SSR ou um aplicativo inteiro responda mais rapidamente.

## Adote a versão com as verificações corretas

Após uma atualização, verifique a versão real instalada e as dependências React alinhadas, depois reconstrua e reinicie o aplicativo. Se você estiver migrando de Next.js, guarde o relatório de auditoria e exercite rotas, formulários, estilos e navegação autenticados. Compare uma opção experimental em seu próprio projeto antes de mantê-la ativada.

PRNext permanece um alfa com compatibilidade parcial com Next.js. A qualificação funcional abrange Linux, macOS e Windows, bem como Chromium, Firefox e WebKit. Estas verificações não estabelecem um ganho geral de desempenho. Uma campanha histórica permanece inconclusiva porque as observações do processo são incompletas; isso não estabelece o desempenho desta versão. Falhas anteriores do Windows EPERM durante a publicação do estado de desenvolvimento atômico permanecem documentadas, sem causa demonstrada ou correção específica.

Um fluxo de trabalho representativo é um ponto de partida útil: abra uma rota fria, edite seus estilos, envie um formulário e retorne a uma página visitada anteriormente. Isso verifica o que a versão altera para seu aplicativo, com suas dependências, autenticação e restrições de implantação.

## Sources

[PRNext 0.1.19: source and compatibility](https://github.com/Lorkydey/PRNext/tree/2346d5cf37f8cd36bf522867b3efcdb61ceadaeb)

[PRNext 0.1.19 release pull request](https://github.com/Lorkydey/PRNext/pull/33)

[Deferred compilation and development troubleshooting](https://github.com/Lorkydey/PRNext/blob/2346d5cf37f8cd36bf522867b3efcdb61ceadaeb/packages/prnext/docs/ai/troubleshooting.md)

[Migration audit and compatibility guide](https://github.com/Lorkydey/PRNext/blob/2346d5cf37f8cd36bf522867b3efcdb61ceadaeb/packages/prnext/docs/ai/compatibility.md)

[SaaS reference application](https://github.com/Lorkydey/PRNext/tree/2346d5cf37f8cd36bf522867b3efcdb61ceadaeb/examples/saas-reference)

Publicado: 2026-11-01

Modificado: 2026-11-01

Autor: PRNext

---

Linguagem: pt-BR

Canonical: https://prnext.dev/pt/blog/prnext-0-1-19-lazy-compilation-migration-reliability

Index: https://prnext.dev/llms.txt