https://github.com/jveiiga/project-next-basic

🚀⠀Projeto criado na maratona @Rocketseat com @diego3g.
https://github.com/jveiiga/project-next-basic

isr middleware next react ssg ssr typescript

Last synced: 16 days ago
JSON representation

🚀⠀Projeto criado na maratona @Rocketseat com @diego3g.

• Host: GitHub
• URL: https://github.com/jveiiga/project-next-basic
• Owner: jveiiga
• Created: 2022-03-02T02:51:06.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-02T22:49:30.000Z (almost 3 years ago)
• Last Synced: 2024-11-08T22:36:04.603Z (2 months ago)
• Topics: isr, middleware, next, react, ssg, ssr, typescript
• Language: TypeScript
• Homepage:
• Size: 54.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Project Next Basic - Projeto criado na maratona Rocketseat 🚀



  



A maratona Rocketseat é gratuita, voltada para profissionais, estudantes e para todo mundo que quer aprender mais sobre front-end e programação. O projeto é um esboço, criado com Nextjs para aprender e entender algumas de suas funcionalidades nativas e como manipulá-las.

 

## 💻 Linguagens e tecnologias utilizadas

 

 

   

   

## Finalidade dos estudos 

Entender a diferença entre:

Método client side render (Renderização lado cliente) 

  - Os dados são renderizados após o cliente já ter acessado a aplicação ou seja, geralmente é feito o uso do useState/useEffect para controle de estado

	   da aplicação e quando há uma nova modificação nos valores em tela a aplicação verifica no servidor e logo após carrega os dados atualizados.

	   No caso de Blogs ou sites que tem conteúdos que podem ser compartilhados, á uma pequena perda de dados na hora da verificação do conteúdo e, montagem do embedded (card), pois na hora da montagem do embedded (card) é que será feito pelo site que você deseja compartilhar o conteúdo, uma

 	   verificação que é chamada de crawler, o crawler acessa sua página e tenta buscar por informações para montar seu embedded (card), ainda neste 

	   modelo o site irá tentar buscar por informações para construir o embedded (card), mas o crawler não vai aguardar e o card retornará vazio.  

Método server side render (Renderização lado servidor) 

  - Casos de uso mais tradicionais são blog e sites onde o conteúdo pode ser compartilhado. Nesses casos a utilização desse serviço é feita pelos motivos

	   citados a cima.

Método Static Side Generation

- Os dados são armazenados em cache por um período de acordo com as configurações desenvolvidas em código, sendo assim, quando a primeira pessoa fizer a primeira requisição dos dados esse valor é guardado no browser e durante esse período todos que acessarem a aplicação viram o mesmo conteúdo, diminuindo drasticamente o número de requisições para o banco de dados da aplicação.  

On-demand Incremental Static Regeneration (New feature)

- Possibilita “forçar” um novo carregamento, independente do revalidação configurada. 

Middleware

- Possibilita “interceptar” as requisições do usuário. Podendo ser usado para interceptar um grupo de diretórios específicos.   

## Instalação

    - Clonar repositorio

    $ git clone https://github.com/jveiiga/project-next-basic && cd project-next-basic

## `npm run dev`

    Abra http: // localhost: 3000 para visualizá-lo no navegador.

## 👨‍🏫 Instrutor

- Diego Fernandes 

## 📚 Pesquisar/Aprender

  - Aprender sobre modelo SPA (Single Page Application);

  - Aprender sobre SSR (Server-Side Rendering) - Método de renderização lado servidor;

  - Aprender sobre ISR(Increment Static Regeneration) - Método de atualização automática com REVALIDATE;

  - Aprender sobre SSG(Static Site Generation) - Método de renderização onde o HTML é gerado de forma estatica no momento do build;

  

## 📂 Referencias

  

    Decode #013

      - Next.js: Server-side Rendering vs. Static Generation 


      - Crawling and Indexing 


      - Stale-while-revalidate 


      - On-demand Incremental Static Regeneration (Beta) 


      - Middleware