Executando verificação de segurança...
10
caiovsoares
2 min de leitura ·

[Dúvida] Onde devo hospedar uma simples landing page?

Boa tarde Tabnews!

A pergunta parece ser simples a princípio, não é segredo como fazer uma hospedagem, eu penso assim quando estou fazendo algo para mim. Mas quando é para terceiros começo a ter alguns receios.

Estou fazendo um site de portfolio para minha irmã que é fotógrafa e por comodidade fiz o projeto em Next.js, a princípio é uma página estática muito simples que eu poderia hospedar gratuitamente na Vercel e comprando um dominio .br, mas me pego pensando, será que o fato de ter muitas imagens(fotografias), mesmo utilizando a otimização do Image do Next.js não gastaria muita banda ou processamento de imagens do Vercel?

Esse site, no final, possui um form de "entre em contato" para a pessoa preencher uma mensagem que deve cair por e-mail para ela. Pensei em fazer isso com um simples nodemailer, aproveitando que o projeto é em Next.js mesmo.

Porém um site tão simples, poderia ser feito com react puro, ainda utilizando tailwind, e o restante, mas servindo o arquivo html e js de forma estática, perdendo a necessidade de hospedar um serviço node e indo pra plataformas de hospedagem muito baratas como hostinger por exemplo, nesse caso eu precisaria utilizar outra forma de enviar o e-mail, o que não deve ser difícil.

Fazer esse portfólio pra ela me despertou o interesse em fazer mais portfólios para mais pessoas, por serem landing pages simples e tranquilas de fazer. Mas então ficam as perguntas no ar.

  1. Devo utilizar Next.js ou React puro, levando em consideração servir isso como um processo node ou como arquivos estáticos.
  2. Devo hospedar na Vercel, Hostinger, ou outro lugar? O que sai mais em conta e atende ao objetivo?
  3. Vocês tem mais considerações a fazer, algo que deixei escapar despercebido ou melhorias, idéias?

Por fim, vou deixar a página aqui para vocês poderem ver como está ficando (eu ia deixar um link mas como não sei durante quanto tempo vou manter esse link de pé, vou deixar apenas uma imagem e optei por rabiscar os rostos das pessoas visto que as mesmas não concordaram em ter suas imagens usadas no Tabnews). Muito obrigado a todos que se propuserem a ajudar!

Porfolio

Carregando publicação patrocinada...
6
ricardotenv

Esse site é simples, deve ser criado como página estática, independente do que você vai usar.

Pra hospedar deixa tudo na Cloudflare, é grátis. Usa o Pages para o site, o formulário de contato você faz como serviço no Workers e no futuro se precisar você pode integrar o R2 (Object Storage) para as imagens, é barato. Já aproveita e usa o Proxy Reverso e CDN gratuito deles.

3
joaonse

Curiosamente eu acabei de fazer a mesma coisa para um amigo meu, no site https://floretmentor.com/

Ele eu ainda não lancei, mas essa página de "em construção" é toda feita em react puro e hospedada em hospedagem estática da hostgator.

Eu simplesmente criei a página react normal e, ao invés de hospedar o build (que daria certo), eu usei uma ferramenta para criar um html estático, como um snapshot, do react. Isso facilita a descoberta por bots e SEO. Isso foi feito usando o react-snap.

Apesar de assim funcionar, ainda não é muito bom.
Esses dias me deparei com a build estática do site Next.js, que é excelente.

Eu recomendaria você manter o nextjs, por que é muito mais fácil de desenvolver do que html puro ou wix, e hospedar como site estático a build dele. Dá uma olhada nessa documentação https://nextjs.org/docs/app/building-your-application/deploying/static-exports

Inclusive eu vou migrar esse site que comentei no início para o next.js. Assim eu me aproveito da facilidade de manutenção e desenvolvimento do código e de hospedagem barata.

OBS: Você não vai poder criar server components, apenas front-end. Caso precise de rodar algo no servidor, então vai precisar hospedar na vercel ou VPS.

Espero ter ajudado.

1
caiovsoares
Autor
Autor

Ajudou demais, igual a todos os outros também ajudaram e também ganharam meu upvote!
Mas essa possibilidade que ainda está presente na documentação do Nextjs me agregou demais. Isso me dá muito mais liberdade quanto a construir páginas que não precisem usar o lado servidor. Muitíssimo Obrigado! E claro Obrigado ao LeoSSpecht e ao klenilsonrox também!

2
2
2
LeoSSpecht

Parece um projeto legal, aqui vai meus 2 cents.

O que eu faria?

  • Nem hospedaria manualmente nem faria usando código. Para um site assim, estático e sem nenhuma feature além do forms eu só usária uma ferramenta como Wix ou Wordpress, eles já tem varios templates e jeitos para customizar.

Mas caso você queira fazer com código:

  • Usaria NextJs: Não é perfeito, mas já entrega muito do que você precisa, e a vantagem é que indexa melhor do que sites React, mesmo que o Google renderize algumas páginas React para fazer a indexação.
  • Hospedaria na Vercel: é uma solução simples, e pra muitos casos, de graça. Só iria para uma solução mais sofisticada caso você tenha um site mais complexo ou muitas muitas imagens muito pesadas.
2
maiguelman

achei muito valida sua duvida pois eu tive um problema com um cliente uma vez por conta do tamanho do site e o free tier da Vercel.
O que costumo fazer é criar uma conta no github nova para o cliente e assim hospedo na vercel e ele ja tem possui o código.
Agora em relacao a alguns custos, acaba sendo inevitavel devido a quantidade de acessos e ai vale uma busca aprofundada e se o cliente está disposto a pagar de algum jeito

2
2
aleph

Eu usaria um no-code como o Carrd.

As imagens são hospedadas por eles mesmos, e eles tem suporte pra formulários de email (como um "entre em contato"), então não teria necessidade de se preocupar com muita coisa.

Os planos deles estão entre 45 a 245 reais por ano, mais ou menos.

2
2
caiovsoares
Autor
Autor

As imagens são fixas, a mudança, se houver, aconteceria trocando os arquivos mesmo. Sim, o githubPages é uma alternativa muito próxima do cloudflare Pages, acredito que vou seguir por esse caminho mesmo!

1
gza

Fala, amigo.

Hoje hospedo meus sites estáticos no netlify.

A versão gratuita dele é muito boa; alta disponibilidade, tem integração com serviços Git (GitHub, Bitbucket, Gitlab,...), além de permitir customização de domínio.

https://www.netlify.com/

1
lukinhas475

Vou tentar dar a minha humilde opnião em algumas das suas duvidas.

Devo utilizar Next.js ou React puro, levando em consideração servir isso como um processo node ou como arquivos estáticos.

A tecnologia que você vai utilizar na verdade não importa tanto. Se você estivesse utilizando Django, React, Laravel, Blazor ou HTML, CSS e JavaScript puro o resultado seria o mesmo. O que importa é se essa tecnologia facilita e agiliza o seu trabalho durante o desenvolvimento e a manutenção dele no futuro. Então, se você acha que o Next.js te ajuda nisso, vai fundo.

Mas a dúvida entre utilizar Next.js e React puro não faz muito sentido. Next.js e React puro, apenar de serem tudo React, tem alguns objetivos diferentes: Next.js foi desenvolvido para fazer SSR e o React puro SPA. Então a dúvida entre os dois me demonstra que você não conhece essas tecnologias tão bem.

Agora a minha opnião sobre utilizar Next.js no seu projeto de portfolio: Não me parece necessario. Ainda mais em um projeto tão simples como esse. Se tivesse utilizado apenas HTML, CSS e JavaScript puro você conseguiria o mesmo resultado, mais leve, mais rapido e sem dependencias.

Utilizar o Next.js me parece uma escolha exagerada para algo tão simples.

Devo hospedar na Vercel, Hostinger, ou outro lugar? O que sai mais em conta e atende ao objetivo?

Para algo como esse o que não falta são opções. Mas por ser algo tão simples você não precisa de um servidor como os da Hostinger mas pelo fato de você ter utilizado Next.js acredito que a opção mais facil agora seria a Vercel...

Vocês tem mais considerações a fazer, algo que deixei escapar despercebido ou melhorias, idéias?

Tenho: você poderia ter utilizado JavaScript puro ou wordpress...

1
caiovsoares
Autor
Autor

Perfeito, foi uma questão de comodidade e em pouco tempo consigo reescrever na linguagem que eu quiser. A própria documentação do React cita que não recomenda utilizá-lo puro, por uma dezena de motivos descritos aqui. Mas de fato isso é simplesmente 1 página que pode ser escrita em HTML e servida estaticamente. Nem mesmo wordpress justificaria, acredito. Por fim achei sensacional as soluções apresentadas aqui como utilizar o static-exports do Next e hospedar no Pages da Cloudflare. Fiz esse post esperando poucas respostas e sai na verdade com mais conhecimento.

1
1
0
2
eduardoMats

Eu usaria o Next.js, gerando uma página estática. Ele é usado para as mais diversas funções, já possui tudo que precisa e você não precisa criar um fluxo de trabalho especial só para criar páginas estáticas.

Uma página estática é só um monte de arquivos, você pode usar em qualquer lugar que tenha mais familiaridade. E ao contrário do que o nome diz, uma página estática pode ser interativa, ter JavaScript, pegar dados de uma API, lidar com formulários.

Eu coloco na AWS S3, que possui suporte para criação de páginas estáticas e você pode adicionar uma CDN para melhorar o SEO e o tempo de resposta. Tudo isso vai ficar de graça através do free tier ou pagar alguns centavos por mês, se tiver um número grande de acessos.

Para usar formulários, gostei do https://web3forms.com/. Os formulários do site podem encaminhar as respostas para o web3forms, que encaminha para um e-mail previamente definido. Bem prático e é grátis.

1
telegram

Vocês todos foram muito parceiros. Eu também estava precisando hospedar uma LP. Foram muitas as opções dadas. Eu pessoalmente gostei mais da Cloudflare. Antes de ler essas dicas eu estava tentando usar Wix no modo gratuito, mas pra quem nunca usou, me pareceu um pouco complexo de usar.