Como otimizamos o Canal com NextJS
Descubra o motivo pelo qual a Pingback decidiu abandonar seu próprio código e adotar o NextJS para uma transformação completa no canal.
PingTech - #1 | Nova versão do canal 🏴☠️ | ||
Com o objetivo de aprimorar continuamente a experiência do usuário, realizamos uma transformação completa, não apenas no visual, mas também toda a estrutura de código por trás da plataforma. | ||
Vamos entender um pouco melhor como essa reestruturação aconteceu? | ||
O novo canal | ||
| ||
O canal é onde reunimos todos os conteúdos feitos pelo creator. | ||
Nele, você encontrará uma interface otimizada que permite acessar com facilidade e rapidez os artigos ou séries. | ||
Com a nova organização e categorização aprimorada, você poderá explorar os conteúdos de forma rápida e buscá-los com mais facilidade. | ||
O antigo sistema | ||
| ||
O layout anterior não era intuitivo e fluido como gastaríamos e isso torna a experiencia de navegação e localização dos conteúdo difícil para nossos usuários. | ||
Além das limitações de design, reconhecemos a importância de reorganizar o código para otimizar o desempenho geral da plataforma. | ||
Investimos bastante tempo e esforços na reestruturação do código para garantir que cada elemento da página funcionasse de maneira eficiente. | ||
No antigo canal, usávamos React para a renderização e enfrentamos desafios significativos ao lidar com o Server-Side Rendering (SSR). | ||
👉 Vale ressaltar que quando a Pingback começou, o NextJS já havia sido lançado e achávamos que conseguiríamos fazer tudo internamente. Assim, fizemos toda estrutura de SSR por conta própria. | ||
Hoje, reconhecemos que não foi a melhor escolha e era sofrido para fazer manutenção. | ||
Reconhecendo a necessidade de uma abordagem diferente, tomamos a decisão estratégica de adotar o NextJS. | ||
Essa transição permitiria a implementação simplificada do SSR e a melhora da experiência do usuário, resultando em tempos de carregamento mais rápidos e uma interação mais suave com o conteúdo. | ||
Planejamento da refatoração | ||
| ||
Ao mesmo tempo que a ideia de fazer um projeto do zero pode ser algo tentador, é também desafiador. | ||
Com o projeto antigo, já tínhamos uma estrutura rodando e funcionalidades para nossos clientes. Refazer um projeto inclui manter e melhorar as funcionalidades básicas já existentes. | ||
Antes de iniciarmos, determinamos quais funcionalidades seriam descontinuadas devido à falta de uso, quais seriam incluídas em implementações futuras devido a restrições de tempo, e quais estariam presentes na entrega inicial. | ||
👉 Com isso definido, o básico seria: página inicial do canal, página de listagem de artigos, página de listagem de séries, página de um artigo, fluxo de inscrição e pagamentos, domínio customizado, sitemap e temas. | ||
E o que deixamos para uma futura implementação: | ||
| ||
Execução do projeto | ||
| ||
Tirando o Máquina de Conteúdo, que foi um projeto fora do ecossistema Pingback, o Novo Canal seria o primeiro projeto em NextJS feito aqui dentro. | ||
Para nós, do time de produto, que já trabalhávamos com React, migrar para o NextJS não seria algo de outro mundo. | ||
Existe sim uma curva de aprendizado do time, mas ela é rápida. | ||
A estrutura do projeto foi básica e seguimos todas as recomendações que estão na própria documentação: | ||
Cada canal está em um subdomínio da Pingback, por exemplo: pingback.com/pedro | pingback.com/matt | ||
Sendo assim, foi preciso utilizar o conceito de Dynamic Routes do NextJS, para que cada slug fosse um canal diferente. | ||
Além disso, cada artigo também está em outro path e precisava ser algo dinâmico, como: | ||
Resumidamente, um canal possui a seguinte estrutura de rotas dinâmicas: | ||
| ||
Abordaremos em um texto futuro, mas o grande desafio foi estabelecer uma estrutura de domínio personalizada para nossos clientes. | ||
Para contextualizar, ao mesmo tempo que a Pingback oferece um domínio para o criador de conteúdo, como pingback.com/pedro, ele pode ter o mesmo layout em um domínio personalizado. | ||
Resultados | ||
Desde o lançamento, só tivemos feedbacks positivos do novo layout e da rapidez com que as coisas estão acontecendo. | ||
✍️ Ficamos felizes com isso e estaremos sempre buscando melhorar e fazer correções. | ||
Podemos dizer que atingimos o objetivo inicial de ter um layout intuitivo, com velocidade e fluidez. | ||
Agradecimentos | ||
Por fim, essa entrega foi feita em time e é de suma importância ressaltar todas as pessoas de produto que estavam diretamente trabalhando nesse projeto: | ||
Além disso, fica um agradecimento para toda a equipe da Pingback que nos ajudou a testar e fazer uma boa entrega | ||
Obs.: Esse aqui é o primeiro canal em Dark Mode da Pingback . Fica aqui o spoiler do que está por vir. | ||
Até a próxima! | ||
Equipe Pingtech. 🏴☠️ 🏓 |
