{"id":21676416,"url":"https://github.com/odeassis/k.meme","last_synced_at":"2026-05-09T01:35:41.478Z","repository":{"id":186827379,"uuid":"503402998","full_name":"odeassis/k.meme","owner":"odeassis","description":"Website dedicated to documenting Internet memes","archived":false,"fork":false,"pushed_at":"2022-07-12T01:58:35.000Z","size":134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T10:11:42.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/odeassis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-06-14T14:50:37.000Z","updated_at":"2022-06-14T14:51:28.000Z","dependencies_parsed_at":"2023-08-07T22:32:16.081Z","dependency_job_id":"5b30fd7b-552c-411e-94bd-eb73f9f43d9a","html_url":"https://github.com/odeassis/k.meme","commit_stats":null,"previous_names":["fdassis/k.meme","odeassis/k.meme"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Fk.meme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Fk.meme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Fk.meme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/odeassis%2Fk.meme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/odeassis","download_url":"https://codeload.github.com/odeassis/k.meme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244584120,"owners_count":20476479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-25T14:14:00.257Z","updated_at":"2026-05-09T01:35:41.448Z","avatar_url":"https://github.com/odeassis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Tipos de uma aplicação\n\n- Static Site Generation (HTML/CSS/JS) - GatsbyJS, Hexo\n- Client Side Rendering (Single Page Application - SPA) - Create React App\n- Server Side Rendering (SSR) - NextJS\n\nVídeos explicando de forma simplificada o processo de cada solução na perspectiva do usuário.\n\n- [Static Site Generation](https://www.youtube.com/embed/1zhT23VDVDc)\n\n- [Client Side Rendering (CSR)](https://www.youtube.com/embed/4-Lel1oaV7M)\n\n- [Server Side Rendering (SSR)](https://www.youtube.com/embed/0bvo6UKkNDA)\n\n### Vantagens e Desvantagens de cada solução\n\n#### Static Site Generation (SSG)\n\n| Vantagens                                 | Desvantagens                                      |\n| ----------------------------------------- | ------------------------------------------------- |\n| Uso quase nulo do servidor                | Tempo de build pode ser muito alto                |\n| Pode ser servido numa CDN (melhor cache)  | Dificuldade para escalar em aplicações grandes    |\n| Melhor performance entre todos            | Dificuldade para realizar atualizações constantes |\n| Flexibilidade para usar qualquer servidor |                                                   |\n\n#### Single Page Application (SPA)\n\n| Vantagens                                          | Desvantagens                         |\n| -------------------------------------------------- | ------------------------------------ |\n| Permite páginas ricas em interações sem recarregar | Load inicial pode ser muito grande   |\n| Site rápido após o load inicial                    | Performance imprevisível             |\n| Ótimo para aplicações web                          | Dificuldades no SEO                  |\n| Possui diversas bibliotecas                        | A maioria do conteúdo não é indexado |\n\n#### Server Side Rendering (SSR)\n\n| Vantagens                                                                | Desvantagens                                                                           |\n| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- |\n| Ótimo em SEO                                                             | TTFB (Time to first byte) maior, o servidor vai preparar todo o conteúdo para entregar |\n| Meta tags com previews mais adequados                                    | HTML maior                                                                             |\n| Melhor performance para o usuário (o conteúdo vai ser visto mais rápido) | Reload completo nas mudanças de rota                                                   |\n| Código compartilhado com o backend em Node                               |                                                                                        |\n| Menor processamento no lado do usuário                                   |                                                                                        |\n\n## O que o NextJS tem/faz?\n\n**O NextJS tem suporte para SSG, SSR e até SPA!**\n\n- Renderização no servidor (Server Side Rendering - SSR)\n\n- Geração de estáticos (Static Site Generation - SSG)\n\n- CSS-in-JS (Styled-jsx, Styled Components, Emotion, etc)\n\n- Zero Configuration (rotas, hot reloading, code splitting…)\n\n- Completamente extensível (controle completo do Babel/Webpack, plugins, etc)\n\n- Otimizado para produção\n\n## Quando usar cada uma das soluções\n\n### Static Site Generation (Gatsby, NextJS)\n\n- Site simples sem muita interação do usuário\n- Se você é a única pessoa que publica conteúdo\n- Se o conteúdo muda pouco\n- Se o site é simples, sem tantas páginas\n- Quando a performance é extremamente importante\n\n  **Exemplos: Landing Page, Blogs, Portfólios**\n\n### Single Page Application (SPA) - CRA\n\n- Quando não tem tanta necessidade de indexar informações no Google\n- Quando o usuário faz muitas interações na página e não quero refreshes\n- Quando as informações vão ser diferentes para cada usuário (autenticação, por exemplo)\n\n  **Exemplos: Twitter Web, Facebook Web, Spotify Web**\n\n### Server Side Rendering (SSR) - NextJS\n\n- Quando tem necessidades de um SPA, mas precisa de um loading mais rápido\n- Quando o conteúdo muda frequentemente\n- Quando trabalha com um número muito grande de páginas\n- Quando precisa de uma boa indexação no Google\n\n  **Exemplos: Ecommerce, Sites de Notícias**\n\n## Saber mais\n\n[Explicações sobre quando usar um ou outro](https://marinaaisa.com/blog/cook-websites-based-on-your-needs/)\n\n[Animações do processo de cada solução](https://dev.to/kefranabg/demystifying-ssr-csr-universal-and-static-rendering-with-animations-m7d)\n\n[Vários exemplos oficiais do NextJS com outras tecnologias](https://github.com/vercel/next.js/tree/canary/examples)\n\n[Tutorial oficial passo-a-passo](https://nextjs.org/learn/basics/create-nextjs-app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodeassis%2Fk.meme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fodeassis%2Fk.meme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fodeassis%2Fk.meme/lists"}