{"id":18303226,"url":"https://github.com/erickpetru/vue-summit-ssr","last_synced_at":"2025-08-26T16:24:21.081Z","repository":{"id":138797071,"uuid":"146293167","full_name":"ErickPetru/vue-summit-ssr","owner":"ErickPetru","description":"Palestra \"Do SSR ao Nuxt\" para o Vue.js Summit 2018.","archived":false,"fork":false,"pushed_at":"2018-08-30T23:34:19.000Z","size":13243,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T14:35:34.533Z","etag":null,"topics":["nuxtjs","ssr","talk","vue-server-renderer","vuejs","webpack4"],"latest_commit_sha":null,"homepage":"https://www.slideshare.net/ErickPetrucelli/vuejs-summit-2018-do-serverside-rendering-ao-nuxt","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ErickPetru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-27T12:16:30.000Z","updated_at":"2021-06-18T10:44:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"233a5624-6d5c-4418-b9f4-643a65658d6a","html_url":"https://github.com/ErickPetru/vue-summit-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ErickPetru/vue-summit-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fvue-summit-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fvue-summit-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fvue-summit-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fvue-summit-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErickPetru","download_url":"https://codeload.github.com/ErickPetru/vue-summit-ssr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fvue-summit-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272236714,"owners_count":24897468,"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","status":"online","status_checked_at":"2025-08-26T02:00:07.904Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["nuxtjs","ssr","talk","vue-server-renderer","vuejs","webpack4"],"created_at":"2024-11-05T15:24:55.080Z","updated_at":"2025-08-26T16:24:21.071Z","avatar_url":"https://github.com/ErickPetru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue.js Summit 2018 - Do SSR ao Nuxt\n\nMaterial da palestra intitulada **Do Server-Side Rendering ao Nuxt: Reflexões, Críticas, Dicas e Etcéteras** proferida pelo professor [Erick Petrucelli](//github.com/ErickPetru) para o [Vue.js Summit 2018](//vuejssummit.com/), oferecendo cinco projetos Vue demonstrando incrementalmente a implementação de uma solução de renderização através do servidor.\n\n## Como Utilizar\n\nCada diretório deste repositório representa um projeto independente, contendo seu próprio `package.json`. É necessário navegar pelo _terminal_ ao diretório desejado antes de executar os comandos.\n\n``` bash\n# instalar dependências\n$ npm i # OU yarn\n\n# servir em localhost\n$ npm run dev\n```\n\nEnfatiza-se que, por se tratarem de projetos para demonstração em uma palestra, os códigos focam apenas em compilação para desenvolvimento, não devendo ser utilizados integralmente para soluções em produção.\n\n## Explicação dos Exemplos\n\nEmbora os comandos para iniciar sejam equivalentes, cada um dos projetos possui muitas particularidades. De forma resumida, os exemplos de **1** a **4** apresentam a evolução da configuração de uma aplicação, conforme recomendações do [guia de SRR no Vue](https://ssr.vuejs.org/), enquanto o exemplo **5** demonstra solução equivalente utilizando o _framework_ [Nuxt.js](https://nuxtjs.org/).\n\n### 1-ssr-server-only\n\nEste projeto apresenta uma configuração básica com [express](http://expressjs.com/) e [vue-server-renderer](https://www.npmjs.com/package/vue-server-renderer), demonstrando como é simples gerar um HTML estático através do servidor, montado a partir de uma instância Vue. Entretanto, não possui interação no cliente!\n\n### 2-ssr-not-universal\n\nEste projeto estende a configuração básica anterior, demonstrando como é simples injetar um `\u003cscript\u003e` no cliente, visando oferecer a interação desejada. Seria possível injetar qualquer coisa, como um trecho de código _jQuery_ (imagine o absurdo!). Neste caso, o exemplo utiliza uma cópia do seu próprio código Vue usado no servidor, replicado no arquivo para o cliente.\n\n### 3-ssr-webpack\n\nO exemplo anterior deixa evidente que precisamos de automatização para gerar as instâncias para o servidor e para o cliente, com os devidos ajustes, evitando construir um código exclusivo (ou duplicado) para cada camada da aplicação. Obviamente a solução passa por empacotadores (_module bundlers_), sendo o [Webpack](https://webpack.js.org/) a escolha natural. Tal compartilhamento de código é o que chamamos de **aplicação Universal**. Embora o Webpack possa ser assustador para iniciantes, este projeto apresenta uma configuração simplificada e comentada das configurações, para auxiliar a compreensão.\n\n### 4-ssr-webpack-router\n\nIncrementando o exemplo anterior, este projeto possui os ajustes necessários para integração com o [vue-router](https://router.vuejs.org/), tanto para a renderização da rota correta a partir do servidor, quanto para a navegação estilo _single page application_ no cliente. Este ponto é crucial, pois alguns desenvolvedores afirmam não utilizar SSR pois preferem SPA, ignorando que qualquer aplicação universal com _vue-router_ oferece navegação SPA por natureza.\n\n### 5-ssr-nuxt\n\nEste exemplo é brutalmente mais simples no código em relação aos anteriores, embora ofereça as mesmas funcionalidades (na verdade, oferece muito mais do que os exemplos anteriores puderam abordar). Graças ao _framework_ [Nuxt.js](https://nuxtjs.org/), temos uma solução de aplicação universal com suporte a [vue-router](https://router.vuejs.org/), [vuex](https://vuex.vuejs.org/) e _hot reloading_ em desenvolvimento, além de todas as otimizações necessárias para empacotar para produção. Vale ressaltar que foi utilizado o pacote [nuxt-edge](https://www.npmjs.com/package/nuxt-edge) para demonstrar a simplicidade de utilização da versão 2.0, que está próxima do lançamento.\n\n## Licença\n\n[MIT](./LICENSE)\n\nCopyright \u0026copy; 2018, Erick Eduardo Petrucelli\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickpetru%2Fvue-summit-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferickpetru%2Fvue-summit-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickpetru%2Fvue-summit-ssr/lists"}