{"id":32517240,"url":"https://github.com/mrmurphy/universal-react-example","last_synced_at":"2026-07-04T04:37:20.379Z","repository":{"id":36910680,"uuid":"41217717","full_name":"mrmurphy/universal-react-example","owner":"mrmurphy","description":"A small app used to demonstrate server-side rendering with React.js","archived":false,"fork":false,"pushed_at":"2015-08-23T04:02:55.000Z","size":50812,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-28T02:54:32.188Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/mrmurphy.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}},"created_at":"2015-08-22T17:28:54.000Z","updated_at":"2016-03-04T01:29:40.000Z","dependencies_parsed_at":"2022-09-07T14:31:32.416Z","dependency_job_id":null,"html_url":"https://github.com/mrmurphy/universal-react-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mrmurphy/universal-react-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmurphy%2Funiversal-react-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmurphy%2Funiversal-react-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmurphy%2Funiversal-react-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmurphy%2Funiversal-react-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrmurphy","download_url":"https://codeload.github.com/mrmurphy/universal-react-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrmurphy%2Funiversal-react-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35110270,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"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":[],"created_at":"2025-10-28T02:54:31.210Z","updated_at":"2026-07-04T04:37:20.363Z","avatar_url":"https://github.com/mrmurphy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Admirable\n\nThis is a demo app made to accompany a talk on server-side rendering with React.js.\nIf you explore the tags in the repo, you'll find a tag for the front-end-only version\nof this app, and a tag for the universal version.\n\nDon't mind the `bin` folder or circle.yml. Those are just there to help me deploy\nthe demo site to my server.\n\nThis fictitious app is imaginarily for photographers to showcase a select few of their\nbest photos.\n\nSuch an app would need to make good use of OpenGraph tags in order to\nshow pretty captions and pretty images when shared on social media sites. These\nsocial media sites generally don't run javascript when crawling a shared link\nfor sample content. Without some kind of static content to feed to the crawler,\nthe shared link would be generic and useless.\n\nReact server-side rendering to the rescue!\n\nThe universal version of this app is social-media friendly. It will deliver\nnice blurbs and thumbnails when a link to one of its images is shared on a social\nservice.\n\n(Facebook works. Twitter doesn't because it requires linked domains to be whitelisted.\nThose are the only two I've tested)\n\nLicense: MIT!\n\nAlso included is the outline for the talk.\n\n# Talk\n\n## Quick overview of reasons for universal (isomorphic) rendering:\n\n  - Eliminate the FOUS (flash of un-styled content)\n  - Faster perceived loading time for users (especially on slow connections)\n  - SEO\n  - Social Media \u003c------------- (this is what we're talking about today)\n\n## Reasons not to do universal rendering\n\n  That's not what this talk is about.\n\n## Admirable - A front-end only app\n\n  - Browse about on Admirable\n  - Try to share a link on Facebook (Oh no!)\n  - Query the HTML with cURL or Postman\n  - Rewrite app in the following steps:\n    - Showcase Helmet\n    - Render React to a string\n    - Turn index.html into a template so that the head attributes and the body can be inserted\n    - React Router:\n      - Use the History location instead of the hash location on the client\n      - Add routes on the server that lead to the universal rendering function so that the current path can be passed to React Router\n    - Use Helmet on the server\n  - Use Facebook's debugger to show off our changes (ngrok)\n  - Share a link on Facebook\n  - Excite!\n\n## Gotchas \u0026 Tips\n\n  - Use \u003cLink\u003e instead of \u003ca\u003e with HistoryLocation and react-router to keep the whole page from re-rendering.\n  - Use babel on the server so that files with jsx can be imported.\n  - Unless you want to run Webpack before requiring your client code on the server, don't `reqire` or `import` files that aren't parseable by Babel.\n  - Define all routes in a separate module from your the react render function.\n\n## Things we didn't talk about\n\n  - Interactivity and data / event management\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmurphy%2Funiversal-react-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrmurphy%2Funiversal-react-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrmurphy%2Funiversal-react-example/lists"}