{"id":14981993,"url":"https://github.com/styfle/react-server-example-tsx","last_synced_at":"2025-04-06T06:09:29.850Z","repository":{"id":48990686,"uuid":"60888990","full_name":"styfle/react-server-example-tsx","owner":"styfle","description":"⚛️ Boilerplate for isomorphic web app with React server-side rendering in TypeScript","archived":false,"fork":false,"pushed_at":"2021-07-01T20:33:11.000Z","size":2487,"stargazers_count":278,"open_issues_count":1,"forks_count":35,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-30T01:12:14.247Z","etag":null,"topics":["boilerplate","isomorphic","jsx","react","react-server","server-side-rendering","tsx","typescript"],"latest_commit_sha":null,"homepage":"https://react-tsx.vercel.app/","language":"TypeScript","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/styfle.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}},"created_at":"2016-06-11T03:21:47.000Z","updated_at":"2025-02-18T04:44:13.000Z","dependencies_parsed_at":"2022-09-05T07:41:41.302Z","dependency_job_id":null,"html_url":"https://github.com/styfle/react-server-example-tsx","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styfle%2Freact-server-example-tsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styfle%2Freact-server-example-tsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styfle%2Freact-server-example-tsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/styfle%2Freact-server-example-tsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/styfle","download_url":"https://codeload.github.com/styfle/react-server-example-tsx/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441052,"owners_count":20939239,"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":["boilerplate","isomorphic","jsx","react","react-server","server-side-rendering","tsx","typescript"],"created_at":"2024-09-24T14:04:37.352Z","updated_at":"2025-04-06T06:09:29.824Z","avatar_url":"https://github.com/styfle.png","language":"TypeScript","readme":"# react-server-example-tsx\n\n[![npm](https://badgen.net/npm/v/react-server-example-tsx)](https://www.npmjs.com/package/react-server-example-tsx)\n[![Downloads](https://badgen.net/npm/dt/react-server-example-tsx)](https://www.npmjs.com/package/react-server-example-tsx)\n[![Dependency Status](https://badgen.net/david/dep/styfle/react-server-example-tsx)](https://david-dm.org/styfle/react-server-example-tsx)\n[![devDependency Status](https://badgen.net/david/dev/styfle/react-server-example-tsx)](https://david-dm.org/styfle/react-server-example-tsx?type=dev)\n[![LGTM Quality](https://badgen.net/lgtm/grade/javascript/g/styfle/react-server-example-tsx)](https://lgtm.com/projects/g/styfle/react-server-example-tsx/)\n[![Build Status](https://badgen.net/travis/styfle/react-server-example-tsx)](https://travis-ci.org/styfle/react-server-example-tsx)\n\nA complex example of how to do server-side rendering with\n[React](http://facebook.github.io/react/) and [TypeScript](https://www.typescriptlang.org/) so that component code can be shared between server and browser (also known as isomorphic javascript).\n\nServer-Side Rendering (SSR) leads to fast initial page loads, search-engine-friendly pages, and of course...its all type safe!\n\n\n## Getting Started\n\nClone the repo, change directory, install dependencies, build the code, and run it!\n\n```sh\ngit clone https://github.com/styfle/react-server-example-tsx.git\ncd react-server-example-tsx\nnpm install\nnpm run vercel-build\nnpm run test\nnpm start\n```\n\nThen navigate to http://localhost:3007 and click on the buttons to see some reactive events in action.\n\n## Preventing XSS\n\nThe original code from `mhart` attempts to [sanitize the props](https://github.com/mhart/react-server-example/blob/feada6183fe2fbb1a746492e157febe49eeafdcd/server.js#L106) by escaping and then inserting into a `\u003cscript\u003e` tag.\n\nI avoided this by performing *1 extra http request* to fetch the props as json before initializing React in the browser. This means that click handlers will not be initialized until the data is returned and React can pick up where it left off after the server-side render and attach the click even handlers. This is the purpose of `ReactDOM.hydrate`.\n\nSee [browser.tsx](https://github.com/styfle/react-server-example-tsx/blob/main/src/browser.tsx) for the client-side code.\n\nSee [server.ts](https://github.com/styfle/react-server-example-tsx/blob/main/src/server.ts) for the server-side code.\n\n## Prior art\n\nBased on prior work found at [mhart/react-server-example](https://github.com/mhart/react-server-example). It's very good so you should check it out :)\n\nAdditionally, I use a combination between [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/react-\u0026-webpack.html#create-a-webpack-configuration-file) and [awesome-typescript-loader](https://github.com/s-panferov/awesome-typescript-loader#configuration) when I switched from browserify v1.4.x to webpack v2.0.x (now webpack v4.x).\n\n## Author\n\nDeveloped by [styfle](https://styfle.dev), the author of [Package Phobia](https://github.com/styfle/packagephobia)\n","funding_links":[],"categories":["Built with TypeScript"],"sub_categories":["Web/ReactJS"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyfle%2Freact-server-example-tsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstyfle%2Freact-server-example-tsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstyfle%2Freact-server-example-tsx/lists"}