Frontend vs Backend: qual é a diferença?
O frontend é a parte de um app que roda no navegador do usuário — as páginas, botões, formulários e animações que ele vê e clica. O backend é a parte que roda em um servidor que o usuário nunca vê: ele armazena e recupera dados, aplica as regras de negócio, verifica quem pode fazer o quê e se comunica com outros serviços, como pagamentos e e-mail. As duas partes conversam por meio de uma API e, junto com um banco de dados, formam um app "full stack".
Por que isso importa ao criar com IA
Quando você descreve um app para um construtor com IA, está descrevendo as duas metades ao mesmo tempo, quer você perceba ou não. "Clientes podem reservar um horário" significa um formulário de reserva (frontend), regras sobre quais horários estão livres (backend) e um lugar para salvar as reservas (banco de dados).
Entender essa divisão ajuda de três formas práticas:
- Segurança. Tudo o que está no frontend pode ser visto e alterado pelo usuário. Regras e segredos precisam ficar no backend.
- Depuração. "O botão não responde" e "o botão responde, mas nada é salvo" apontam para metades diferentes, e dizer qual dos dois você está vendo ajuda a IA a encontrar a causa mais rápido.
- Hospedagem e custo. Um site só de frontend é barato e simples de hospedar. Um backend precisa rodar em algum lugar, o que afeta quanto você paga e como o app se comporta quando fica ocioso.
Uma analogia do dia a dia
Pense em um restaurante.
O frontend é o salão: o cardápio, as mesas, a decoração, o garçom que anota o pedido. Ele é feito para o cliente, que vê e toca em tudo.
O backend é a cozinha e o escritório: os cozinheiros preparando os pratos, o estoque, o caixa, as regras do gerente sobre quem ganha desconto. O cliente não entra ali, e não deveria conseguir entrar.
A API é a passagem entre os dois — o balcão por onde os pedidos entram e os pratos saem, em um formato combinado. O banco de dados é o estoque e o livro de pedidos.
O cliente pode reescrever a comanda (o frontend está sob o controle dele), mas a cozinha continua decidindo o que vai preparar e quanto vai cobrar. Por isso as verificações importantes ficam no fundo.
O que cada lado faz
| Frontend | Backend | |
|---|---|---|
| Roda em | O dispositivo do usuário, no navegador | Um servidor que você (ou seu provedor de hospedagem) controla |
| Função principal | Mostrar coisas, coletar dados, responder a cliques | Armazenar dados, aplicar regras, impor permissões, chamar outros serviços |
| O usuário consegue ver e alterar o código? | Sim — ele é baixado para o navegador do usuário | Não |
| Pode guardar chaves secretas de API? | Não | Sim, em variáveis de ambiente |
| Tecnologias comuns | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| O que costuma dar errado | Layout quebra no celular, botão não faz nada, página lenta | Dados não salvos, dados errados exibidos, erros, falhas de segurança |
Alguns frameworks deixam essa linha mais difusa. O Next.js, por exemplo, permite que um mesmo projeto tenha código de navegador e código de servidor. A ideia continua a mesma: a pergunta é sempre onde esta peça roda?
Um exemplo prático: reservando uma aula
Veja o que acontece quando alguém reserva uma aula de yoga, passo a passo.
| Passo | Onde | O que acontece |
|---|---|---|
| 1 | Frontend | A página de horários carrega e pede ao backend as aulas desta semana. |
| 2 | Backend | Lê as aulas e as reservas no banco de dados, calcula as vagas restantes e devolve a lista em JSON. |
| 3 | Frontend | Mostra cada aula com horário, professor e vagas restantes. |
| 4 | Frontend | O usuário escolhe uma aula e preenche nome e e-mail. O formulário verifica se o e-mail parece válido (uma cortesia, não uma garantia). |
| 5 | Frontend → Backend | Envia uma requisição POST /api/bookings pela API. |
| 6 | Backend | Valida os dados de novo, verifica se a aula não está lotada, salva a reserva e pede ao serviço de e-mail que envie a confirmação usando uma chave secreta. |
| 7 | Backend → Frontend | Devolve "reservado" ou "desculpe, está lotada". |
| 8 | Frontend | Mostra a tela de confirmação. |
Repare nos passos 4 e 6: os dados são verificados duas vezes. A verificação no frontend dá retorno instantâneo; a do backend é a que realmente conta, porque um usuário determinado pode contornar o frontend por completo.
Termos comuns explicados
| Termo | Significado |
|---|---|
| Cliente / servidor | O cliente é o navegador (ou app) que faz as requisições; o servidor as responde. |
| UI | Interface do usuário — as telas e os controles. |
| API | A forma combinada de o frontend pedir dados ou ações ao backend. |
| Endpoint | Uma URL específica da API, como /api/bookings. |
| Full stack | Frontend + backend + banco de dados juntos. Veja o que é um app full stack. |
| Site estático | Um frontend sem backend próprio; os mesmos arquivos para todos. |
| SPA | Single-page application: um frontend que atualiza a página dentro do navegador, em vez de carregar novas páginas. |
| Renderização no servidor (SSR) | O servidor monta o HTML da página antes de enviá-la, o que pode ajudar na velocidade e no SEO. |
| Variáveis de ambiente | Configurações e segredos entregues ao backend em tempo de execução, mantidos fora do código. |
Seu app precisa de backend?
| Se o seu app… | Precisa de backend? |
|---|---|
| Mostra informações iguais para todos | Não |
| Tem um formulário de contato que só envia um e-mail para você | Normalmente um pequeno, ou um serviço de formulários |
| Salva dados que outras pessoas vão ver | Sim |
| Tem login e dados privados | Sim |
| Recebe pagamentos | Sim — pelo menos para criar checkouts e receber webhooks de pagamento |
| Usa uma API de IA paga ou outra API com chave secreta | Sim, para manter a chave fora do navegador |
Erros comuns e equívocos
- Colocar chaves secretas no frontend. Elas ficam visíveis para qualquer pessoa que abrir as ferramentas de desenvolvedor do navegador. É o erro grave mais comum em apps criados com IA.
- Aplicar regras só no frontend. Esconder o botão "excluir" de quem não é administrador não é proteção; o backend precisa recusar a requisição.
- Achar que o backend é "só o banco de dados". O banco armazena dados. O backend decide quem pode ler e alterar esses dados e como.
- Pensar que JavaScript significa frontend. JavaScript e TypeScript também rodam em servidores, com Node.js.
- Culpar a metade errada. Se a página está correta mas os dados estão errados, o problema geralmente está no backend ou no banco, não no design.
- Construir demais. Um portfólio não precisa de backend sob medida. Adicionar um só aumenta o custo e as partes móveis.
O que pedir ao seu construtor com IA
- "Quais partes deste app rodam no navegador e quais rodam no servidor?"
- "Mova as chaves de API para o backend e leia-as de variáveis de ambiente."
- "Valide todos os formulários no servidor, além de no navegador."
- "Garanta no backend que só administradores possam excluir reservas."
- "A página está certa, mas os dados não são salvos — verifique nos logs do backend a requisição."
- "Este é um site institucional simples; mantenha-o só com frontend, a menos que precisemos de backend."
Frontend e backend no Mythex
Um novo projeto no Mythex começa com um frontend em Vite, React, TypeScript e Tailwind, e o agente adiciona um backend quando seu app precisa dele — ou você pode pedir uma API separada em Node, Python (FastAPI), C# ou Java rodando junto com o frontend no mesmo projeto. Na pré-visualização, você pode alternar entre o site e o servidor de API, e a publicação implanta as duas partes, com banco de dados e armazenamento de arquivos adicionados quando necessário. A documentação explica os apps com múltiplos serviços, o guia de hospedagem web mostra onde cada metade roda depois de publicada, e os templates de apps são uma forma rápida de ver exemplos full stack.
Perguntas
Qual é a diferença entre frontend e backend?
O frontend é a parte de um app que roda no navegador do usuário — as páginas, botões e formulários que ele vê e clica. O backend roda em um servidor que o usuário nunca vê; ele armazena dados, aplica as regras de negócio, verifica permissões e se comunica com outros serviços.
Todo app precisa de backend?
Não. Um site institucional, um portfólio ou uma landing page simples pode ser somente frontend. Assim que um app precisa salvar dados compartilhados, fazer login de usuários, receber pagamentos ou usar chaves secretas de API, ele precisa de algum tipo de backend.
HTML é frontend ou backend?
HTML, CSS e JavaScript rodando no navegador são frontend. O JavaScript também pode rodar em um servidor usando Node.js, e aí é código de backend. A linguagem não define isso; o que define é onde o código roda.
O que significa full stack?
Full stack significa cobrir o frontend e o backend (e normalmente o banco de dados). Um app full stack tem as três partes; um desenvolvedor full stack trabalha em todas elas.