{"id":25764667,"url":"https://github.com/ipedro/ssr","last_synced_at":"2025-07-17T06:32:43.799Z","repository":{"id":87809368,"uuid":"121756325","full_name":"ipedro/ssr","owner":"ipedro","description":"Server Side Rendering React App","archived":false,"fork":false,"pushed_at":"2018-02-16T13:56:41.000Z","size":812,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-26T21:20:06.660Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/ipedro.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-16T13:53:37.000Z","updated_at":"2021-02-10T01:33:49.000Z","dependencies_parsed_at":"2023-07-05T10:49:02.957Z","dependency_job_id":null,"html_url":"https://github.com/ipedro/ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ipedro/ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipedro%2Fssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipedro%2Fssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipedro%2Fssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipedro%2Fssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipedro","download_url":"https://codeload.github.com/ipedro/ssr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipedro%2Fssr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265573466,"owners_count":23790438,"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":"2025-02-26T21:19:46.917Z","updated_at":"2025-07-17T06:32:43.793Z","avatar_url":"https://github.com/ipedro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SSR - a React Server Side Rendering app\n\n### Description\n\nThis is a simple application to put into practice the concepts of server-side rendering and\nuniversal javascript that was based on the content of Stephen Grider's Server Side Rendering with\nReact and Redux course\n(https://www.udemy.com/server-side-learning-with-react-and-redux/learn/v4/overview). In general\nlines:\n\n* Webpack has two input configurations, one for the client and one for the server. Each one\n  pointing to a different input file, one for the client and another for the server. The component trees\n  of these two files are the same, however, on the server, the actions are called by methods of the\n  object representing the routes. When it receives a GET for a given URL, the server iterates\n  through this object, finds the one that has the same path and executes the corresponding action\n  method, waits for the resolution of the promise and only then restores the HTML to the client.\n\n* On the server, we create the markup HTML, set the div with id \"root\" to serve the client, and\n  render the components using the renderToString method. In the client, we pass the same component\n  tree, but we use the react-dom hydrate method instead of the render, so that React can take control\n  and avoid unnecessary rendering with it's diff algorithm.\n\n* Redux has two stores. The Redux store on the client is rehydrated by the server's store, when\n  we pass the data from it to the server via a JSON (window.INITIAL_STATE), properly sanitized by\n  Serialize (serialize-javascript).\n\n* Regarding React-Routes, on the server, we use StaticRouter and BrowserRouter on the client. Routes\n  are declared using renderRoutes (react-router-config).\n\n* The classes created by emotion on the server are passed to the client, rehydrating the components\n  and preventing the rules from being redeployed.\n\n* To take care of cookies, API calls are made through a proxy, so we keep sending the cookies\n  automatically.\n\n* Support for SEO remains on React-Helmet and the inclusion of metadata following the Open Graph\n  protocol (http://ogp.me).\n\n### Installation\n\n* Clone or download this repository;\n* Install dependencies with `yarn install` or `npm install` ;\n\nTo start the application run `yarn run dev` or `npm run dev`.\n\n### Contributing\n\n1. Fork it!\n2. Create your feature branch: git checkout -b my-new-feature\n3. Commit your changes: git commit -am 'Add some feature'\n4. Push to the branch: git push origin my-new-feature\n5. Submit a pull request :D\n\n### Technologies\n\n* React;\n* Redux;\n* Axios;\n* Emotion;\n* React-Router;\n* Express;\n* React-Helmet;\n* Webpack;\n* Redux-thunk;\n\n### License\n\nISC License (ISC)\n\nCopyright (c) 2017 Rafael Campos\n\nPermission to use, copy, modify, and/or distribute this software for any purpose with or without fee\nis hereby granted, provided that the above copyright notice and this permission notice appear in all\ncopies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS\nSOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE\nAUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE\nOR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS\nSOFTWARE.\n\nWe follow the standards adopted by eslint - airbnb.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipedro%2Fssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipedro%2Fssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipedro%2Fssr/lists"}