Frontend vs Backend: Qual é a Diferença?
O frontend é a parte de uma app que corre no browser do utilizador — as páginas, botões, formulários e animações que ele vê e clica. O backend é a parte que corre num servidor que o utilizador nunca vê: guarda e recupera dados, aplica as regras de negócio, verifica quem pode fazer o quê e comunica com outros serviços, como pagamentos e email. As duas partes comunicam através de uma API e, juntamente com uma base de dados, formam uma app “full stack”.
Porque é que isto importa quando constrói com IA
Quando descreve uma app a um construtor com IA, está a descrever as duas metades ao mesmo tempo, quer se aperceba disso ou não. “Os clientes podem marcar um horário” significa um formulário de marcação (frontend), regras sobre quais os horários livres (backend) e um sítio onde guardar as marcações (base de dados).
Conhecer esta divisão ajuda de três formas práticas:
- Segurança. Tudo o que está no frontend pode ser visto e alterado pelo utilizador. As regras e os segredos têm de viver no backend.
- Depuração. “O botão não responde” e “o botão responde mas nada fica guardado” apontam para metades diferentes, e dizer qual dos casos está a ver ajuda a IA a encontrar a causa mais depressa.
- Alojamento e custo. Um site só com frontend é barato e simples de alojar. Um backend tem de correr em algum lado, e isso afeta o que paga e como a sua app se comporta quando está parada.
Uma analogia do dia a dia
Pense num restaurante.
O frontend é a sala de jantar: a ementa, as mesas, a decoração, o empregado que recebe o pedido. Foi desenhada para os clientes, que podem ver e tocar em tudo.
O backend é a cozinha e o escritório: os cozinheiros a preparar a comida, a despensa, a caixa registadora, as regras do gerente sobre quem tem desconto. Os clientes não entram lá, nem devem conseguir entrar.
A API é a passagem entre as duas — o balcão por onde os pedidos entram e os pratos saem, num formato acordado. A base de dados é a despensa e o livro de encomendas.
Um cliente pode reescrever o talão do pedido (o frontend está sob o seu controlo), mas a cozinha continua a decidir o que vai cozinhar e quanto cobra. É por isso que as verificações importantes pertencem ao lado de trás.
O que faz cada lado
| Frontend | Backend | |
|---|---|---|
| Corre em | O dispositivo do utilizador, no browser | Um servidor que você (ou o seu alojamento) controla |
| Função principal | Mostrar coisas, recolher dados, responder a cliques | Guardar dados, aplicar regras, impor permissões, chamar outros serviços |
| O utilizador consegue ver e alterar o código? | Sim — é descarregado para o browser dele | Não |
| Pode guardar chaves de API secretas? | 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 corre mal | O layout parte-se no telemóvel, o botão não faz nada, página lenta | Dados não guardados, dados errados mostrados, erros, falhas de segurança |
Algumas frameworks tornam a linha menos nítida. O Next.js, por exemplo, permite que um projeto tenha código de browser e código de servidor. A ideia mantém-se: a pergunta é sempre onde é que esta peça corre?
Um exemplo prático: marcar uma aula
Eis o que acontece quando alguém marca 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 marcações da base de dados, calcula os lugares livres e devolve a lista em JSON. |
| 3 | Frontend | Mostra cada aula com a hora, o professor e os lugares livres. |
| 4 | Frontend | O utilizador escolhe uma aula e preenche o nome e o email. O formulário verifica se o email parece válido (uma cortesia, não uma garantia). |
| 5 | Frontend → Backend | Envia um pedido POST /api/bookings através da API. |
| 6 | Backend | Valida os dados outra vez, verifica se a aula não está cheia, guarda a marcação e pede ao serviço de email para enviar a confirmação, usando uma chave secreta. |
| 7 | Backend → Frontend | Devolve “marcado” ou “desculpe, está cheio”. |
| 8 | Frontend | Mostra o ecrã de confirmação. |
Repare nos passos 4 e 6: os dados são verificados duas vezes. A verificação no frontend dá resposta imediata; a verificação no backend é a que conta de facto, porque um utilizador determinado pode contornar o frontend por completo.
Termos comuns explicados
| Termo | Significado |
|---|---|
| Cliente / servidor | O cliente é o browser (ou a app) que faz os pedidos; o servidor responde-lhes. |
| UI | Interface do utilizador — os ecrãs e os controlos. |
| API | A forma acordada de o frontend pedir dados ou ações ao backend. |
| Endpoint | Um URL específico da API, como /api/bookings. |
| Full stack | Frontend + backend + base de dados em conjunto. Veja o que é uma app full stack. |
| Site estático | Um frontend sem backend próprio; os mesmos ficheiros para toda a gente. |
| SPA | Single-page application: um frontend que atualiza a página no browser em vez de carregar páginas novas. |
| Renderização no servidor (SSR) | O servidor constrói o HTML da página antes de a enviar, o que pode ajudar a velocidade e o SEO. |
| Variáveis de ambiente | Definições e segredos dados ao backend em tempo de execução, mantidos fora do código. |
A sua app precisa de backend?
| Se a sua app… | Precisa de backend? |
|---|---|
| Mostra informação igual para toda a gente | Não |
| Tem um formulário de contacto que só lhe envia email | Normalmente um pequeno, ou um serviço de formulários |
| Guarda dados que outras pessoas vão ver | Sim |
| Tem inícios de sessão 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 com chave secreta | Sim, para manter a chave fora do browser |
Erros comuns e ideias erradas
- Colocar chaves secretas no frontend. Ficam visíveis para qualquer pessoa que abra as ferramentas de programador do browser. É o erro sério mais comum em apps construídas com IA.
- Aplicar regras só no frontend. Esconder o botão “apagar” para quem não é administrador não é proteção; o backend tem de recusar o pedido.
- Achar que o backend é “apenas a base de dados”. A base de dados guarda os dados. O backend decide quem os pode ler e alterar, e como.
- Pensar que JavaScript significa frontend. O JavaScript e o TypeScript também correm em servidores, com Node.js.
- Culpar a metade errada. Se a página parece correta mas os dados estão errados, o problema costuma estar no backend ou na base de dados, não no design.
- Construir a mais. Um portefólio não precisa de um backend próprio. Acrescentar um traz custos e mais peças em movimento.
O que pedir ao seu construtor com IA
- “Que partes desta app correm no browser e quais correm no servidor?”
- “Mova as chaves de API para o backend e leia-as a partir de variáveis de ambiente.”
- “Valide todos os formulários no servidor, além de no browser.”
- “Garanta no backend que só os administradores podem apagar marcações.”
- “A página parece bem mas os dados não ficam guardados — verifique os registos do backend para este pedido.”
- “Isto é um site de marketing 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 acrescenta um backend quando a sua app precisa dele — ou pode pedir uma API separada em Node, Python (FastAPI), C# ou Java a correr junto do frontend no mesmo projeto. Na pré-visualização pode alternar entre o site e o servidor da API, e a publicação implementa as duas partes, com base de dados e armazenamento de ficheiros acrescentados quando necessário. A documentação explica as apps com vários serviços, o guia de alojamento web explica onde corre cada metade depois de estar online, e os modelos 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 uma app que corre no browser do utilizador — as páginas, botões e formulários que ele vê. O backend corre num servidor que o utilizador nunca vê; guarda dados, aplica as regras de negócio, verifica permissões e comunica com outros serviços.
Toda a app precisa de um backend?
Não. Um site de marketing, um portefólio ou uma página de destino simples podem ter apenas frontend. Assim que uma app precisa de guardar dados partilhados, autenticar utilizadores, receber pagamentos ou usar chaves de API secretas, precisa de algum tipo de backend.
O HTML é frontend ou backend?
HTML, CSS e JavaScript a correr no browser são frontend. O JavaScript também pode correr num servidor com Node.js, e aí é código de backend. A linguagem não define isso; o que define é onde o código corre.
O que significa full stack?
Full stack significa abranger o frontend e o backend (e normalmente a base de dados). Uma app full stack tem as três partes; um programador full stack trabalha em todas elas.