{"id":21244870,"url":"https://github.com/scorpionjay/react-ssr","last_synced_at":"2026-05-07T13:45:07.359Z","repository":{"id":41789063,"uuid":"93234144","full_name":"ScorpionJay/react-ssr","owner":"ScorpionJay","description":"react server side rendering","archived":false,"fork":false,"pushed_at":"2022-12-22T11:25:21.000Z","size":1886,"stargazers_count":0,"open_issues_count":16,"forks_count":1,"subscribers_count":0,"default_branch":"v2.0.0","last_synced_at":"2025-07-05T03:26:46.009Z","etag":null,"topics":["koa2","react"],"latest_commit_sha":null,"homepage":"","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/ScorpionJay.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":"2017-06-03T08:19:34.000Z","updated_at":"2020-02-13T08:49:11.000Z","dependencies_parsed_at":"2023-01-30T07:45:54.996Z","dependency_job_id":null,"html_url":"https://github.com/ScorpionJay/react-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ScorpionJay/react-ssr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScorpionJay%2Freact-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScorpionJay%2Freact-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScorpionJay%2Freact-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScorpionJay%2Freact-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScorpionJay","download_url":"https://codeload.github.com/ScorpionJay/react-ssr/tar.gz/refs/heads/v2.0.0","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScorpionJay%2Freact-ssr/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32740908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["koa2","react"],"created_at":"2024-11-21T01:32:53.734Z","updated_at":"2026-05-07T13:45:07.344Z","avatar_url":"https://github.com/ScorpionJay.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react 技术栈\n\n## how to run\n\n```\nnpm i\nnpm run dev\n\nnpm run build\n\nnpm run start\n```\n\n## 服务器渲染 SSR (Server-Side Rendering)\n\n### 什么是 SSR\n\n通常我们使用 react，浏览器下载最小的 html 页面，内容通过 js 去填充。\n使用 SSR，初始化的内容在服务器生成，浏览器下载已经有内容的 html 页面，更新内容在浏览器客服端。\n\n### SSR 解决了什么\n\n- SEO\n- 提高性能\n- 同构\n\n#### SEO\n\n除了 google，其他的搜索引擎不能爬取 js\n\n#### 性能\n\n初始化渲染在服务器，提高了性能，因为浏览器初次加载，需要下载很多 js，但是响应浏览器需要更多的时间，生成更多的内容，相对来说，可以忽略这点。服务器需要做 js 缓存。\n\n#### 同构\n\n浏览器和 node 跑的是同一份代码，react-router 和服务器的路由需要相同。\n\n## 搭建项目\n\n- react\n- react-router\n- redux\n- webpack2\n- koa2\n\n### [koa2](https://koajs.com/)\n\n```js\nconst Koa = require(\"koa\");\nconst app = new Koa();\n\napp.use(ctx =\u003e {\n  ctx.body = \"Hello World\";\n});\n\napp.listen(3000);\n```\n\n```\nmkdir react-ssr \u0026 cd react-ssr\nnpm init\n\nnpm i koa --save\n```\n\n使用 es6\nbabel-polyfill\n\nindex.js\n\n```\nrequire('babel-polyfill')\n\nrequire('babel-register')({\n    presets: ['es2015', 'react', 'stage-3'],\n    plugins: ['add-module-exports']\n})\n\n\nconst app = require('./app.js')\n\napp.use(ctx =\u003e {\n  ctx.body = 'Hello World'\n});\n\nconst port = 3000\n\napp.listen(port,()=\u003e{\n\tconsole.log('server started, bind port %d',port)\n});\n```\n\napp.js\n\n```\nimport Koa from 'koa'\n\nconst app = new Koa()\n\nexport default app\n```\n\nkoa-views\nejs 模版\nkoa-logger 日志\n\nnodemon 修改 nodejs 代码需要重启，使用 nodemon 可以监控代码修改了自动重启。\n\nreact 提供挂了 renderToString 的方法\n\n### react\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003etest\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    test\n    \u003cdiv\n      class=\"root\"\n      data-reactroot=\"\"\n      data-reactid=\"1\"\n      data-react-checksum=\"-1133046379\"\n    \u003e\n      test\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nclient 项目可以单独\n\n### 服务器渲染图片\n\n使用 asset-require-hook 钩子\nhttps://github.com/aribouius/asset-require-hook\n\n## 时序图\n\n![时序图](http://odyv5xg88.bkt.clouddn.com/react-ssr.png)\n\n## REF\n\nhttp://andrewhfarmer.com/server-side-render/\n\n## auth\n\nauth by token\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscorpionjay%2Freact-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscorpionjay%2Freact-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscorpionjay%2Freact-ssr/lists"}