\n| \u5c08\u7528\u4f3a\u670d\u5668<\/td>\n | \u5b8c\u5168\u63a7\u5236\uff0c\u9ad8\u6548\u80fd<\/td>\n | \u50f9\u683c\u8f03\u9ad8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\u8a2d\u7f6e\u4f3a\u670d\u5668\u5e33\u6236<\/h3>\n\u9078\u64c7\u63d0\u4f9b\u5546\u5f8c\uff0c\u5efa\u7acb\u60a8\u7684\u4f3a\u670d\u5668\u5e33\u6236\u3002\u60a8\u9700\u8981\u9078\u64c7\u4f3a\u670d\u5668\u985e\u578b\u548c\u4f4d\u7f6e\u3002\u78ba\u4fdd\u9078\u64c7\u65e5\u672c\u8cc7\u6599\u4e2d\u5fc3\u3002\u8a2d\u7f6e\u767b\u5165\u6191\u8b49\u4e26\u555f\u7528SSH\u5b58\u53d6\u3002\u9019\u8b93\u60a8\u53ef\u4ee5\u5b89\u5168\u5730\u7ba1\u7406\u4f3a\u670d\u5668\u3002<\/p>\n \u4e00\u4e9b\u63d0\u4f9b\u5546\u70ba\u5176\u4f3a\u670d\u5668\u63d0\u4f9b\u5feb\u901f\u8a2d\u7f6e\u6307\u5357\u3002\u6309\u7167\u9019\u4e9b\u8aaa\u660e\u555f\u7528\u60a8\u7684\u4f3a\u670d\u5668\u3002\u6aa2\u67e5\u4f3a\u670d\u5668\u5100\u8868\u677f\u4ee5\u7372\u53d6IP\u4f4d\u5740\u8a73\u7d30\u8cc7\u8a0a\u548c\u7db2\u8def\u8a2d\u7f6e\u3002\u60a8\u61c9\u8a72\u78ba\u8a8d\u60a8\u7684\u4f3a\u670d\u5668\u4f7f\u7528\u65e5\u672cIP\u3002\u9019\u4e00\u6b65\u78ba\u4fdd\u60a8\u7684SSR\u61c9\u7528\u70ba\u65e5\u672c\u7528\u6236\u63d0\u4f9b\u6700\u4f73\u9ad4\u9a57\u3002<\/p>\n \u6e96\u5099\u4f3a\u670d\u5668\u74b0\u5883<\/strong><\/h2>\n\u5728\u5b89\u88dd\u4efb\u4f55\u8edf\u9ad4\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u5b89\u5168\u5730\u5b58\u53d6\u4f3a\u670d\u5668\u3002\u9019\u4e00\u6b65\u78ba\u4fdd\u53ea\u6709\u6388\u6b0a\u7528\u6236\u624d\u80fd\u7ba1\u7406\u4f3a\u670d\u5668\u53ca\u5176\u8cc7\u6e90\u3002<\/p>\n SSH\u5b58\u53d6\u8a2d\u7f6e<\/h3>\n\u60a8\u61c9\u59cb\u7d42\u4f7f\u7528SSH\u9023\u63a5\u5230\u4f3a\u670d\u5668\u3002SSH\u63d0\u4f9b\u4e86\u5b89\u5168\u7684\u901a\u8a0a\u901a\u9053\u3002\u5927\u591a\u6578\u65e5\u672c\u4f3a\u670d\u5668\u79df\u7528\u670d\u52d9\u9810\u8a2d\u652f\u63f4SSH\u3002\u8981\u9023\u63a5\uff0c\u6253\u958b\u7d42\u7aef\u4e26\u8f38\u5165\uff1a<\/p>\n ssh your-username@your-server-ip\r\n\r\n<\/code><\/pre>\n\u5c07”your-username”\u548c”your-server-ip”\u66ff\u63db\u70ba\u60a8\u7684\u5be6\u969b\u767b\u5165\u8a73\u7d30\u8cc7\u8a0a\u3002\u70ba\u4e86\u66f4\u597d\u7684\u5b89\u5168\u6027\uff0c\u60a8\u61c9\u8a72\u8a2d\u7f6eSSH\u91d1\u9470\u800c\u4e0d\u662f\u5bc6\u78bc\u3002\u65e5\u672c\u63d0\u4f9b\u5546\u7d93\u5e38\u63a8\u85a6\u9019\u7a2e\u65b9\u6cd5\u4ee5\u78ba\u4fdd\u5408\u898f\u6027\u548c\u5b89\u5168\u6027\u3002<\/p>\n \u63d0\u793a\uff1a<\/strong>
\n\u70ba\u6bcf\u500b\u7528\u6236\u4f7f\u7528\u7368\u7279\u7684SSH\u91d1\u9470\u3002\u907f\u514d\u5171\u4eab\u5e33\u6236\u4ee5\u4fdd\u6301\u4f3a\u670d\u5668\u5b89\u5168\u3002<\/p><\/blockquote>\n\u4ee5\u4e0b\u662fSSH\u5b58\u53d6\u7684\u4e00\u4e9b\u6700\u4f73\u5be6\u52d9\uff1a<\/p>\n \n \n\n\n<\/colgroup>\n\n\n| \u5b89\u5168\u5be6\u52d9<\/th>\n | \u8aaa\u660e<\/th>\n<\/tr>\n | \n| \u91d1\u9470\u7ba1\u7406<\/td>\n | \u5206\u914d\u500b\u4ebaSSH\u91d1\u9470\u4e26\u5b9a\u671f\u5be9\u67e5\u5b58\u53d6\u6b0a\u9650\u3002<\/td>\n<\/tr>\n | \n| \u6d88\u9664\u786c\u7de8\u78bc\u91d1\u9470<\/td>\n | \u5f9e\u7a0b\u5f0f\u78bc\u4e2d\u522a\u9664\u5d4c\u5165\u7684\u91d1\u9470\u4ee5\u963b\u6b62\u5f8c\u9580\u3002<\/td>\n<\/tr>\n | \n| SSH\u91d1\u9470\u8f2a\u66ff<\/td>\n | \u7d93\u5e38\u66f4\u63db\u91d1\u9470\u4ee5\u964d\u4f4e\u98a8\u96aa\u3002<\/td>\n<\/tr>\n | \n| \u660e\u78ba\u7684SSH\u91d1\u9470\u653f\u7b56<\/td>\n | \u8a2d\u7f6e\u5efa\u7acb\u3001\u5132\u5b58\u548c\u7ba1\u7406\u91d1\u9470\u7684\u898f\u5247\u3002<\/td>\n<\/tr>\n | \n| \u6301\u7e8c\u76e3\u63a7<\/td>\n | \u76e3\u8996\u672a\u6388\u6b0a\u5b58\u53d6\u4e26\u9075\u5faa\u516c\u53f8\u653f\u7b56\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n- \u5be9\u6838\u4f3a\u670d\u5668\u4e0a\u7684\u6240\u6709SSH\u91d1\u9470\u3002<\/li>\n
- \u50c5\u9650\u9700\u8981\u7684\u4eba\u5b58\u53d6\u3002<\/li>\n
- \u81ea\u52d5\u8f2a\u66ff\u91d1\u9470\u4ee5\u4fdd\u6301\u65b0\u9bae\u3002<\/li>\n
- \u8a18\u9304\u6240\u6709SSH\u6d3b\u52d5\u4ee5\u78ba\u4fdd\u5408\u898f\u3002<\/li>\n
- \u5207\u52ff\u5728\u61c9\u7528\u7a0b\u5f0f\u7a0b\u5f0f\u78bc\u4e2d\u5132\u5b58SSH\u91d1\u9470\u3002<\/li>\n<\/ul>\n
\u66f4\u65b0\u7cfb\u7d71\u5957\u4ef6<\/h3>\n\u767b\u5165\u5f8c\uff0c\u66f4\u65b0\u4f3a\u670d\u5668\u7684\u7cfb\u7d71\u5957\u4ef6\u3002\u9019\u4e00\u6b65\u53ef\u4ee5\u4fdd\u8b77\u60a8\u7684\u4f3a\u670d\u5668\u514d\u53d7\u5df2\u77e5\u6f0f\u6d1e\u7684\u5f71\u97ff\u3002\u5c0d\u65bc\u5927\u591a\u6578Linux\u767c\u884c\u7248\uff0c\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n sudo apt update && sudo apt upgrade -y\r\n\r\n<\/code><\/pre>\n\u6b64\u547d\u4ee4\u4e0b\u8f09\u4e26\u5b89\u88dd\u6700\u65b0\u66f4\u65b0\u3002\u65e5\u672c\u4f3a\u670d\u5668\u79df\u7528\u670d\u52d9\u901a\u5e38\u652f\u63f4Ubuntu\u6216CentOS\u3002\u5982\u679c\u60a8\u4f7f\u7528\u4e0d\u540c\u7684\u7cfb\u7d71\uff0c\u8acb\u67e5\u770b\u60a8\u63d0\u4f9b\u5546\u7684\u6587\u4ef6\u3002<\/p>\n \u5b89\u88ddNode.js<\/h3>\nSSR\u6846\u67b6\u5982Next.js\u9700\u8981Node.js\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u5957\u4ef6\u7ba1\u7406\u5668\u5b89\u88ddNode.js\u3002\u5c0d\u65bcUbuntu\uff0c\u57f7\u884c\uff1a<\/p>\n curl -fsSL https:\/\/deb.nodesource.com\/setup_lts.x | sudo -E bash -\r\n\r\nsudo apt install -y nodejs\r\n<\/code><\/pre>\n\u6b64\u547d\u4ee4\u5b89\u88dd\u6700\u65b0\u7684\u9577\u671f\u652f\u63f4\u7248\u672c\u3002\u65e5\u672c\u4f3a\u670d\u5668\u901a\u5e38\u652f\u63f4\u6b64\u65b9\u6cd5\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u9a57\u8b49\u5b89\u88dd\uff1a<\/p>\n node -v\r\n<\/code><\/pre>\n\u73fe\u5728\u60a8\u5df2\u6e96\u5099\u597d\u5728\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u8a2d\u7f6eSSR\u6846\u67b6\u3002<\/p>\n \u8a2d\u7f6eSSR\u6846\u67b6<\/strong><\/h2>\n\u8a2d\u7f6eSSR\u6846\u67b6\u662fReact\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u6838\u5fc3\u3002\u60a8\u5c07\u4f7f\u7528Next.js\u548cExpress\u5efa\u7acb\u4e00\u500b\u5f37\u5927\u7684\u89e3\u6c7a\u65b9\u6848\u3002\u9019\u500b\u904e\u7a0b\u5e6b\u52a9\u60a8\u70ba\u65e5\u672c\u7528\u6236\u63d0\u4f9b\u5feb\u901f\u3001\u52d5\u614b\u7684\u9801\u9762\u3002\u60a8\u5c07\u5b78\u7fd2\u5982\u4f55\u5efa\u7acbNext.js\u5c08\u6848\u3001\u65b0\u589eExpress\u548c\u521d\u59cb\u5316\u6838\u5fc3SSR\u5143\u4ef6\u3002\u9019\u4e9b\u6b65\u9a5f\u69cb\u6210\u4e86\u9ad8\u6548\u80fd\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u57fa\u790e\u3002<\/p>\n \u5efa\u7acbNext.js\u5c08\u6848<\/h3>\n\u60a8\u9700\u8981\u9996\u5148\u5efa\u7acb\u4e00\u500b\u65b0\u7684Next.js\u5c08\u6848\u3002Next.js\u662f\u4e00\u500b\u71b1\u9580\u7684React\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u6846\u67b6\u3002\u5b83\u70ba\u60a8\u63d0\u4f9b\u4e86\u4e00\u7a2e\u7c21\u55ae\u7684\u65b9\u6cd5\u4f86\u5efa\u7acb\u5177\u6709\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u548c\u975c\u614b\u7db2\u7ad9\u751f\u6210\u529f\u80fd\u7684\u53ef\u64f4\u5c55React\u61c9\u7528\u7a0b\u5f0f\u3002\u6309\u7167\u4ee5\u4e0b\u6b65\u9a5f\u8a2d\u7f6e\u60a8\u7684\u5c08\u6848\uff1a<\/p>\n \n- \u5728\u4f3a\u670d\u5668\u4e0a\u5b89\u88ddNode.js\u548cnpm\u3002\u5f9eNode.js\u5b98\u65b9\u7db2\u7ad9\u4e0b\u8f09\u5b83\u5011\uff0c\u4e26\u6309\u7167\u60a8\u4f5c\u696d\u7cfb\u7d71\u7684\u8aaa\u660e\u9032\u884c\u64cd\u4f5c\u3002<\/li>\n
- \u5b89\u88ddVisual Studio Code\u3002\u5f9ecode.visualstudio.com\u4e0b\u8f09\uff0c\u4e26\u5728\u79fb\u52d5\u5230Applications\u8cc7\u6599\u593e\u5f8c\u6253\u958b\u5b83\u3002<\/li>\n
- \u70ba\u60a8\u7684\u5c08\u6848\u5efa\u7acb\u4e00\u500b\u65b0\u76ee\u9304\u3002\u60a8\u53ef\u4ee5\u96a8\u610f\u547d\u540d\u3002<\/li>\n
- \u6253\u958b\u7d42\u7aef\u4e26\u57f7\u884c\uff1a\n
npx create-next-app@latest\r\n<\/code><\/pre>\n\u6b64\u547d\u4ee4\u8a2d\u7f6e\u4e00\u500b\u5305\u542bReact\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u6240\u9700\u6240\u6709\u6a94\u6848\u7684\u65b0Next.js\u5c08\u6848\u3002<\/li>\n - \u9032\u5165\u60a8\u7684\u5c08\u6848\u76ee\u9304\uff1a\n
cd your-project-name\r\n<\/code><\/pre>\n<\/li>\n- \u555f\u52d5\u672c\u5730\u958b\u767c\u4f3a\u670d\u5668\uff1a\n
npm run dev\r\n<\/code><\/pre>\n\u60a8\u5c07\u770b\u5230\u60a8\u7684React\u61c9\u7528\u57f7\u884c\u5728http:\/\/localhost:3000<\/code>\u3002<\/li>\n<\/ol>\n\u63d0\u793a\uff1a<\/strong>
\nNext.js\u4f7f\u7528\u57fa\u65bc\u6a94\u6848\u7684\u8def\u7531\u3002\u60a8\u53ef\u4ee5\u900f\u904e\u5728pages<\/code>\u8cc7\u6599\u593e\u4e2d\u65b0\u589e\u6a94\u6848\u4f86\u5efa\u7acb\u65b0\u9801\u9762\u3002\u9019\u4f7fReact\u61c9\u7528\u958b\u767c\u8b8a\u5f97\u7c21\u55ae\u4e14\u6709\u7d44\u7e54\u3002<\/p><\/blockquote>\n\u60a8\u61c9\u8a72\u4e86\u89e3\u70ba\u4ec0\u9ebcNext.js\u662f\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u6700\u4f73\u9078\u64c7\u3002\u5b83\u540c\u6642\u652f\u63f4SSR\u548cSSG\uff0c\u9019\u610f\u5473\u8457\u60a8\u53ef\u4ee5\u70ba\u6bcf\u500b\u9801\u9762\u9078\u64c7\u6700\u4f73\u65b9\u6cd5\u3002SSR\u63d0\u4f9b\u52d5\u614b\u5167\u5bb9\u548c\u5feb\u901f\u8f09\u5165\u6642\u9593\u3002SSG\u9069\u7528\u65bc\u975c\u614b\u9801\u9762\u3002<\/p>\n \u65b0\u589eExpress\u548c\u76f8\u4f9d\u6027<\/h3>\nExpress\u662fNode.js\u7684\u8f15\u91cf\u7d1aWeb\u6846\u67b6\u3002\u60a8\u5c07\u4f7f\u7528\u5b83\u4f86\u8655\u7406\u81ea\u8a02\u4f3a\u670d\u5668\u908f\u8f2f\u548c\u9032\u968eReact\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u529f\u80fd\u3002\u65b0\u589eExpress\u8b93\u60a8\u53ef\u4ee5\u63a7\u5236\u8def\u7531\u3001\u4e2d\u4ecb\u8edf\u9ad4\u548cAPI\u7aef\u9ede\u3002<\/p>\n \u6309\u7167\u4ee5\u4e0b\u6b65\u9a5f\u65b0\u589eExpress\u548c\u5176\u4ed6\u76f8\u4f9d\u6027\uff1a<\/p>\n \n- \u5728\u5c08\u6848\u4e2d\u5b89\u88ddExpress\uff1a\n
npm install express\r\n<\/code><\/pre>\n<\/li>\n- \u65b0\u589e\u60a8\u7684Rails\u6216React\u61c9\u7528\u9700\u8981\u7684\u4efb\u4f55\u5176\u4ed6\u76f8\u4f9d\u6027\u3002\u4f8b\u5982\uff0c\u60a8\u53ef\u80fd\u9700\u8981
dotenv<\/code>\u7528\u65bc\u74b0\u5883\u8b8a\u6578\u6216cors<\/code>\u7528\u65bc\u8de8\u57df\u8acb\u6c42\u3002<\/li>\n- \u5728\u5c08\u6848\u6839\u76ee\u9304\u5efa\u7acb\u4e00\u500b\u540d\u70ba
server.js<\/code>\u7684\u65b0\u6a94\u6848\u3002\u9019\u500b\u6a94\u6848\u5c07\u5305\u542b\u60a8\u7684\u81ea\u8a02\u4f3a\u670d\u5668\u908f\u8f2f\u3002<\/li>\n<\/ol>\n\u9019\u662f\u4e00\u500b\u7c21\u55ae\u7684Next.js\u81ea\u8a02Express\u4f3a\u670d\u5668\u793a\u4f8b\uff1a<\/p>\n const express = require('express');\r\n\r\nconst next = require('next');\r\n\r\nconst dev = process.env.NODE_ENV !== 'production';\r\n\r\nconst app = next({ dev });\r\n\r\nconst handle = app.getRequestHandler();\r\n\r\napp.prepare().then(() => {\r\n\r\nconst server = express();\r\n\r\nserver.all('*', (req, res) => {\r\n\r\nreturn handle(req, res);\r\n\r\n});\r\n\r\nserver.listen(3000, (err) => {\r\n\r\nif (err) throw err;\r\n\r\nconsole.log('> Ready on http:\/\/localhost:3000');\r\n\r\n});\r\n\r\n});\r\n<\/code><\/pre>\n\u9019\u500b\u8a2d\u7f6e\u8b93\u60a8\u5b8c\u5168\u63a7\u5236Rails\u548cReact\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5be6\u4f5c\u3002\u60a8\u53ef\u4ee5\u6839\u64da\u9700\u8981\u65b0\u589e\u81ea\u8a02\u8def\u7531\u3001\u4e2d\u4ecb\u8edf\u9ad4\u6216API\u7aef\u9ede\u3002<\/p>\n \u6ce8\u610f\uff1a<\/strong>
\n\u5c07Express\u8207Next.js\u4e00\u8d77\u4f7f\u7528\u662f\u53ef\u9078\u7684\u3002\u5c0d\u65bc\u7c21\u55ae\u7684\u5c08\u6848\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528\u5167\u5efa\u7684Next.js\u4f3a\u670d\u5668\u3002\u5982\u679c\u60a8\u9700\u8981\u66f4\u591a\u63a7\u5236\u6216\u60f3\u8981\u65b0\u589eRails\u529f\u80fd\uff0c\u8acb\u9078\u64c7Express\u3002<\/p><\/blockquote>\n\u521d\u59cb\u5316SSR\u5143\u4ef6<\/h3>\n\u73fe\u5728\u60a8\u5c07\u521d\u59cb\u5316React\u61c9\u7528\u7684\u6838\u5fc3SSR\u5143\u4ef6\u3002Next.js\u8655\u7406\u4e86\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u5927\u90e8\u5206\u7e41\u91cd\u5de5\u4f5c\u3002\u60a8\u53ea\u9700\u8981\u5c08\u6ce8\u65bcReact\u5143\u4ef6\u548c\u8cc7\u6599\u7372\u53d6\u65b9\u6cd5\u3002<\/p>\n \n- \u5728
pages<\/code>\u76ee\u9304\u4e2d\u5efa\u7acb\u4e00\u500b\u65b0\u9801\u9762\u3002\u4f8b\u5982\uff0c\u5efa\u7acbpages\/index.tsx<\/code>\u3002<\/li>\n- \n
\u7de8\u5beb\u4e00\u500b\u7c21\u55ae\u7684React\u5143\u4ef6\u4f86\u986f\u793a\u8a0a\u606f\uff1a<\/p>\n export default function Home() {\r\nreturn \u6b61\u8fce\u4f7f\u7528\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u7684SSR\uff01<\/h1>;}<\/code><\/pre>\n<\/li>\n- \u4f7f\u7528Next.js\u7684\u8cc7\u6599\u7372\u53d6\u65b9\u6cd5\u5982
getServerSideProps<\/code>\u5728\u6e32\u67d3React\u5143\u4ef6\u4e4b\u524d\u5728\u4f3a\u670d\u5668\u4e0a\u7372\u53d6\u8cc7\u6599\u3002\u9019\u500b\u65b9\u6cd5\u5728\u4f3a\u670d\u5668\u4e0a\u57f7\u884c\u4e26\u5c07\u8cc7\u6599\u4f5c\u70baprops\u50b3\u905e\u7d66\u60a8\u7684\u9801\u9762\u3002<\/li>\n<\/ol>\n\u793a\u4f8b\uff1a<\/p>\n export async function getServerSideProps() {\r\n\r\n\/\/ \u5f9eAPI\u6216\u8cc7\u6599\u5eab\u7372\u53d6\u8cc7\u6599\r\n\r\nreturn {\r\nprops: {\r\n\r\nmessage: '\u4f86\u81ea\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u554f\u5019\uff01',},\r\n};\r\n}\r\nexport default function Home({ message }) {\r\nreturn {message}<\/h1>;\r\n}\r\n<\/code><\/pre>\n\u9019\u7a2e\u65b9\u6cd5\u78ba\u4fdd\u60a8\u7684React\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5be6\u4f5c\u6bcf\u6b21\u7528\u6236\u8a2a\u554f\u7db2\u7ad9\u6642\u90fd\u80fd\u63d0\u4f9b\u65b0\u9bae\u5167\u5bb9\u3002\u60a8\u53ef\u4ee5\u5c07\u6b64\u6a21\u5f0f\u7528\u65bc\u4efb\u4f55\u9700\u8981\u52d5\u614b\u8cc7\u6599\u7684\u9801\u9762\u3002<\/p>\n \u63d0\u793a\uff1a<\/strong>
\n\u4e86\u89e3Next.js\u4e2d\u7684\u8cc7\u6599\u593e\u7d50\u69cb\u3002\u7d44\u7e54\u60a8\u7684React\u5143\u4ef6\u3001\u9801\u9762\u548cAPI\u8def\u7531\u4ee5\u4fbf\u65bc\u7dad\u8b77\u3002<\/p><\/blockquote>\n\u5982\u679c\u60a8\u60f3\u8981\u66f4\u591a\u5f48\u6027\uff0c\u4e5f\u53ef\u4ee5\u4f7f\u7528Node.js\u548cExpress\u5efa\u7acb\u81ea\u8a02SSR\u89e3\u6c7a\u65b9\u6848\u3002\u9019\u7a2e\u65b9\u6cd5\u9069\u7528\u65bc\u9032\u968eRails\u6216React\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5c08\u6848\u3002\u4f46\u662f\uff0cNext.js\u53ef\u4ee5\u6eff\u8db3\u5927\u591a\u6578React\u61c9\u7528\u958b\u767c\u7528\u4f8b\u3002<\/p>\n \u60a8\u73fe\u5728\u5df2\u7d93\u5728\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u8a2d\u7f6e\u4e86\u6838\u5fc3SSR\u6846\u67b6\u3002\u60a8\u53ef\u4ee5\u5efa\u7acb\u5feb\u901f\u3001\u53ef\u64f4\u5c55\u548c\u53ef\u9760\u7684Rails\u548cReact\u61c9\u7528\u7a0b\u5f0f\uff0c\u4e26\u5177\u6709\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u529f\u80fd\u3002\u9019\u500b\u57fa\u790e\u652f\u63f4\u70ba\u65e5\u672c\u53d7\u773e\u63d0\u4f9b\u9ad8\u6548\u80fd\u548c\u51fa\u8272\u7684\u4f7f\u7528\u8005\u9ad4\u9a57\u3002<\/p>\n \u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u914d\u7f6e<\/strong><\/h2>\n\u5728\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u70ba\u751f\u7522\u74b0\u5883\u914d\u7f6e\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u9700\u8981\u4ed4\u7d30\u898f\u5283\u3002\u60a8\u9700\u8981\u8a2d\u7f6e\u74b0\u5883\u8b8a\u6578\u3001\u512a\u5316\u6548\u80fd\u4e26\u8abf\u6574\u65e5\u672c\u7528\u6236\u7684\u672c\u5730\u5316\u8a2d\u7f6e\u3002\u9019\u4e9b\u6b65\u9a5f\u6709\u52a9\u65bc\u5be6\u73fe\u66f4\u597d\u7684\u6548\u80fd\u3001\u66f4\u5feb\u7684\u9801\u9762\u8f09\u5165\u548c\u589e\u5f37\u7684\u4f7f\u7528\u8005\u9ad4\u9a57\u3002\u60a8\u9084\u5c07\u770b\u5230\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5728SEO\u548c\u7528\u6236\u53c3\u8207\u5ea6\u65b9\u9762\u7684\u597d\u8655\u3002<\/p>\n \u914d\u7f6e\u74b0\u5883\u8b8a\u6578<\/h3>\n\u74b0\u5883\u8b8a\u6578\u5728\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u4e2d\u8d77\u8457\u95dc\u9375\u4f5c\u7528\u3002\u5b83\u5011\u5e6b\u52a9\u60a8\u7ba1\u7406React\u61c9\u7528\u7a0b\u5f0f\u7684\u654f\u611f\u8cc7\u8a0a\u548c\u8a2d\u7f6e\u3002\u7576\u60a8\u5728\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u90e8\u7f72SSR\u61c9\u7528\u6642\uff0c\u5fc5\u9808\u6b63\u78ba\u914d\u7f6e\u9019\u4e9b\u8b8a\u6578\u4ee5\u78ba\u4fdd\u5b89\u5168\u6027\u548c\u6548\u80fd\u3002<\/p>\n \u6309\u7167\u4ee5\u4e0b\u6b65\u9a5f\u70ba\u60a8\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5c08\u6848\u8a2d\u7f6e\u74b0\u5883\u8b8a\u6578\uff1a<\/p>\n \n- \u5728\u60a8\u7684React\u5c08\u6848\u4e2d\u5b89\u88dd\u6240\u9700\u7684\u7a0b\u5f0f\u5eab\uff1a\n
npm install @t3-oss\/env-nextjs zod\r\n\r\n<\/code><\/pre>\n<\/li>\n- \u5b9a\u7fa9\u60a8\u7684\u4e3b\u8981\u914d\u7f6e\u5305\u3002\u60a8\u61c9\u8a72\u5c07\u5176\u7d44\u7e54\u6210\u4e09\u500b\u5340\u584a\uff1a\n
\n- \u7528\u6236\u7aef\uff1a\u7528\u65bc\u4ee5NEXT_PUBLIC\u958b\u982d\u7684\u74b0\u5883\u8b8a\u6578\u3002\u9019\u4e9b\u8b8a\u6578\u53ef\u4ee5\u5b89\u5168\u5730\u66b4\u9732\u7d66\u700f\u89bd\u5668\u3002<\/li>\n
- \u4f3a\u670d\u5668\uff1a\u5728\u6b64\u8655\u5132\u5b58\u53ea\u6709\u4f3a\u670d\u5668\u61c9\u8a72\u5b58\u53d6\u7684\u8b8a\u6578\u3002\u9019\u53ef\u4ee5\u4fdd\u8b77\u60a8\u7684\u6a5f\u5bc6\u5b89\u5168\u3002<\/li>\n
- \u57f7\u884c\u6642\u74b0\u5883\uff1a\u900f\u904e\u6b64\u5340\u584a\u5b58\u53d6\u6bcf\u500b\u74b0\u5883\u8b8a\u6578\u7684\u503c\u3002<\/li>\n<\/ul>\n<\/li>\n
- \u5728\u5efa\u7f6e\u6642\u6ce8\u5165jiti\u9032\u884c\u9a57\u8b49\u3002\u5728\u60a8\u7684
next.config.ts<\/code>\u6a94\u6848\u4e2d\u65b0\u589e\u6b64\u6b65\u9a5f\uff0c\u4ee5\u78ba\u4fdd\u5728\u90e8\u7f72\u5230\u65e5\u672c\u4f3a\u670d\u5668\u4e4b\u524d\u6240\u6709\u8b8a\u6578\u90fd\u6b63\u78ba\u3002<\/li>\n<\/ol>\n\u63d0\u793a\uff1a<\/strong>
\n\u59cb\u7d42\u5c07\u74b0\u5883\u8b8a\u6578\u4fdd\u6301\u5728\u7a0b\u5f0f\u78bc\u5eab\u4e4b\u5916\u3002\u4f7f\u7528.env<\/code>\u6a94\u6848\uff0c\u4e14\u6c38\u9060\u4e0d\u8981\u5c07\u5176\u63d0\u4ea4\u5230\u7248\u672c\u63a7\u5236\u4e2d\u3002<\/p><\/blockquote>\n\u4ee5\u9019\u7a2e\u65b9\u5f0f\u8a2d\u7f6e\u74b0\u5883\u8b8a\u6578\u6709\u52a9\u65bc\u60a8\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u61c9\u7528\u5728\u65e5\u672c\u4f3a\u670d\u5668\u79df\u7528\u74b0\u5883\u4e2d\u9806\u5229\u904b\u884c\u3002\u60a8\u53ef\u4ee5\u8f15\u9b06\u5730\u5728\u958b\u767c\u548c\u751f\u7522\u8a2d\u7f6e\u4e4b\u9593\u5207\u63db\u3002\u9019\u7a2e\u65b9\u6cd5\u9084\u652f\u63f4\u63d0\u5347\u60a8\u7684React\u61c9\u7528\u7a0b\u5f0f\u7684\u6548\u80fd\u548c\u5b89\u5168\u6027\u3002<\/p>\n \u512a\u5316SSR\u6548\u80fd<\/h3>\n\u6548\u80fd\u5c0d\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u81f3\u95dc\u91cd\u8981\uff0c\u5c24\u5176\u662f\u7576\u60a8\u60f3\u8981\u89f8\u53ca\u65e5\u672c\u7528\u6236\u6642\u3002\u60a8\u9700\u8981\u4f7f\u7528\u80fd\u5920\u63d0\u4f9b\u66f4\u5feb\u9801\u9762\u8f09\u5165\u548c\u63d0\u5347React\u61c9\u7528\u6548\u80fd\u7684\u6280\u8853\u3002\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u597d\u8655\u5305\u62ec\u66f4\u597d\u7684SEO\u548c\u5728\u6240\u6709\u88dd\u7f6e\u4e0a\u66f4\u6d41\u66a2\u7684\u9ad4\u9a57\u3002<\/p>\n \u4ee5\u4e0b\u662f\u5728\u65e5\u672c\u8a17\u7ba1\u7684SSR\u61c9\u7528\u7a0b\u5f0f\u7684\u6709\u6548\u6548\u80fd\u512a\u5316\u6280\u8853\u8868\uff1a<\/p>\n \n \n\n\n<\/colgroup>\n\n\n| \u6280\u8853<\/th>\n | \u512a\u52e2<\/th>\n<\/tr>\n | \n| \u5ef6\u9072\u8f09\u5165<\/td>\n | – \u66f4\u5feb\u7684\u521d\u59cb\u8f09\u5165\u6642\u9593\uff1a\u6e1b\u5c11\u770b\u5230\u7b2c\u4e00\u500b\u6709\u610f\u7fa9\u5167\u5bb9\u7684\u6642\u9593\u3002<\/td>\n<\/tr>\n | \n| <\/td>\n | – \u63d0\u5347\u611f\u77e5\u6548\u80fd\uff1a\u7528\u6236\u53ef\u4ee5\u5728\u975e\u5fc5\u8981\u90e8\u5206\u8f09\u5165\u6642\u9032\u884c\u4e92\u52d5\u3002<\/td>\n<\/tr>\n | \n| <\/td>\n | – \u6e1b\u5c11\u983b\u5bec\u4f7f\u7528\uff1a\u70ba\u901f\u5ea6\u8f03\u6162\u7684\u9023\u7dda\u7bc0\u7701\u983b\u5bec\u3002<\/td>\n<\/tr>\n | \n| \u4f3a\u670d\u5668\u7aef\u6e32\u67d3<\/td>\n | – \u66f4\u5feb\u7684\u9996\u6b21\u7e6a\u88fd\u6642\u9593\uff1a\u9810\u6e32\u67d3\u7684HTML\u6539\u5584\u521d\u59cb\u5167\u5bb9\u986f\u793a\u901f\u5ea6\u3002<\/td>\n<\/tr>\n | \n| <\/td>\n | – \u6539\u5584SEO\uff1a\u641c\u5c0b\u5f15\u64ce\u66f4\u5bb9\u6613\u8b80\u53d6\u9810\u6e32\u67d3\u7684HTML\u3002<\/td>\n<\/tr>\n | \n| <\/td>\n | – \u5728\u4f4e\u968e\u88dd\u7f6e\u4e0a\u8868\u73fe\u66f4\u597d\uff1a\u5c07\u8655\u7406\u8f49\u79fb\u5230\u4f3a\u670d\u5668\u3002<\/td>\n<\/tr>\n | \n| \u7d44\u5408\u6280\u8853<\/td>\n | – \u540c\u6642\u4f7f\u7528\u5169\u7a2e\u6280\u8853\u53ef\u4ee5\u589e\u5f37\u521d\u59cb\u6e32\u67d3\u548c\u5f8c\u7e8c\u4e92\u52d5\uff0c\u5be6\u73fe\u6700\u4f73\u6548\u80fd\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n \u60a8\u61c9\u8a72\u5c0d\u5716\u7247\u548c\u975e\u95dc\u9375React\u5143\u4ef6\u4f7f\u7528\u5ef6\u9072\u8f09\u5165\u3002\u9019\u7a2e\u65b9\u6cd5\u8b93\u7528\u6236\u80fd\u5920\u5feb\u901f\u770b\u5230\u91cd\u8981\u5167\u5bb9\u3002\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u63d0\u4f9b\u9810\u6e32\u67d3\u7684HTML\uff0c\u9019\u6709\u52a9\u65bc\u641c\u5c0b\u5f15\u64ce\u7d22\u5f15\u60a8\u7684\u7db2\u7ad9\u4e26\u63d0\u5347\u65e5\u672c\u7528\u6236\u7684\u6548\u80fd\u3002<\/p>\n \u7d50\u5408\u9019\u4e9b\u6280\u8853\u6703\u5e36\u4f86\u6700\u4f73\u6548\u679c\u3002\u60a8\u7684React\u61c9\u7528\u5c07\u8f09\u5165\u66f4\u5feb\uff0c\u4f7f\u7528\u66f4\u5c11\u7684\u983b\u5bec\uff0c\u4e26\u70ba\u6bcf\u500b\u4eba\u63d0\u4f9b\u66f4\u597d\u7684\u9ad4\u9a57\u3002\u59cb\u7d42\u76e3\u63a7\u60a8\u4f3a\u670d\u5668\u7684\u8cc7\u6e90\u4f7f\u7528\u60c5\u6cc1\uff0c\u4e26\u512a\u5316\u60a8\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7a0b\u5f0f\u78bc\u3002<\/p>\n \u6ce8\u610f\uff1a<\/strong>
\n\u5f9e\u65e5\u672c\u4e0d\u540c\u5730\u9ede\u6e2c\u8a66\u60a8\u7684SSR\u61c9\u7528\u3002\u9019\u6709\u52a9\u65bc\u60a8\u767c\u73fe\u548c\u4fee\u5fa9\u8207\u4f3a\u670d\u5668\u6216\u7db2\u8def\u76f8\u95dc\u7684\u4efb\u4f55\u6548\u80fd\u554f\u984c\u3002<\/p><\/blockquote>\n\u65e5\u672c\u7279\u5b9a\u8a2d\u7f6e<\/h3>\n\u672c\u5730\u5316\u5c0d\u65bc\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5f88\u91cd\u8981\u3002\u60a8\u5e0c\u671b\u60a8\u7684React\u61c9\u7528\u5c0d\u65e5\u672c\u7528\u6236\u4f86\u8aaa\u611f\u89ba\u81ea\u7136\u3002\u8a2d\u7f6e\u6b63\u78ba\u7684\u5340\u57df\u8a2d\u5b9a\u53ef\u78ba\u4fdd\u60a8\u7684\u5167\u5bb9\u6b63\u78ba\u986f\u793a\u4e26\u7b26\u5408\u6587\u5316\u671f\u671b\u3002<\/p>\n \n- \u70ba\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u6307\u5b9a\u5340\u57df\u8a2d\u5b9a\u3002\u9019\u4fdd\u6301\u4f3a\u670d\u5668\u548c\u7528\u6236\u7aef\u7684\u4e00\u81f4\u6027\uff0c\u907f\u514d\u986f\u793a\u932f\u8aa4\u3002<\/li>\n
- \u5728SSR\u914d\u7f6e\u4e2d\u4f7f\u7528\u65e5\u8a9e\u4f5c\u70ba\u652f\u63f4\u7684\u5340\u57df\u8a2d\u5b9a\u3002\u6b64\u8a2d\u7f6e\u5e6b\u52a9\u60a8\u7684React\u61c9\u7528\u4ee5\u6b63\u78ba\u7684\u683c\u5f0f\u986f\u793a\u65e5\u671f\u3001\u6642\u9593\u548c\u6587\u5b57\u3002<\/li>\n
- \u8abf\u6574\u60a8\u7684\u5167\u5bb9\u548cUI\u4ee5\u9069\u61c9\u65e5\u8a9e\u8a9e\u8a00\u548c\u6587\u5316\u3002\u9019\u5305\u62ec\u4f7f\u7528\u9069\u7576\u7684\u5b57\u578b\u3001\u7248\u9762\u914d\u7f6e\u548c\u7b26\u865f\u3002<\/li>\n<\/ul>\n
\u63d0\u793a\uff1a<\/strong>
\n\u59cb\u7d42\u8b93\u65e5\u672c\u7528\u6236\u6e2c\u8a66\u60a8\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u61c9\u7528\u3002\u7372\u53d6\u56de\u994b\u4ee5\u6539\u9032\u672c\u5730\u5316\u548c\u7528\u6236\u6eff\u610f\u5ea6\u3002<\/p><\/blockquote>\n\u900f\u904e\u95dc\u6ce8\u9019\u4e9b\u65e5\u672c\u7279\u5b9a\u8a2d\u7f6e\uff0c\u60a8\u4f7f\u60a8\u7684React\u61c9\u7528\u66f4\u53d7\u6b61\u8fce\u548c\u6613\u65bc\u5b58\u53d6\u3002\u5177\u6709\u9069\u7576\u672c\u5730\u5316\u7684\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5e36\u4f86\u66f4\u597d\u7684\u6548\u80fd\u548c\u8207\u53d7\u773e\u7684\u66f4\u5f37\u9023\u7d50\u3002<\/p>\n \u5728\u65e5\u672c\u4f3a\u670d\u5668\u4e0a\u9032\u884c\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u5e36\u4f86\u8a31\u591a\u512a\u52e2\u3002\u60a8\u7372\u5f97\u66f4\u597d\u7684\u6548\u80fd\u3001\u66f4\u597d\u7684SEO\u548c\u66f4\u53ef\u9760\u7684React\u61c9\u7528\u7a0b\u5f0f\u3002\u7576\u60a8\u9075\u5faa\u9019\u4e9b\u914d\u7f6e\u6b65\u9a5f\u6642\uff0c\u60a8\u5c31\u80fd\u89e3\u9396\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u7684\u5168\u90e8\u512a\u52e2\uff0c\u4e26\u70ba\u65e5\u672c\u7528\u6236\u63d0\u4f9b\u9802\u7d1a\u9ad4\u9a57\u3002<\/p>\n \u90e8\u7f72SSR\u61c9\u7528<\/h2>\n\u904b\u884cSSR\u61c9\u7528\u7a0b\u5f0f<\/h3>\n\u60a8\u5df2\u5b8c\u6210React\u5c08\u6848\u7684\u8a2d\u7f6e\u548c\u4f3a\u670d\u5668\u914d\u7f6e\u3002\u73fe\u5728\uff0c\u60a8\u9700\u8981\u904b\u884c\u60a8\u7684SSR\u61c9\u7528\u7a0b\u5f0f\u3002\u9996\u5148\uff0c\u5728\u60a8\u7684\u5c08\u6848\u76ee\u9304\u4e2d\u70ba\u751f\u7522\u74b0\u5883\u5efa\u7f6e\u60a8\u7684React\u61c9\u7528\uff1a<\/p>\n npm run build\r\n\r\n<\/code><\/pre>\n\u6b64\u547d\u4ee4\u70ba\u90e8\u7f72\u6e96\u5099\u60a8\u7684React\u7a0b\u5f0f\u78bc\u3002\u63a5\u4e0b\u4f86\uff0c\u555f\u52d5\u60a8\u7684\u4f3a\u670d\u5668\uff1a<\/p>\n node server.js\r\n\r\n<\/code><\/pre>\n\u60a8\u7684\u4f3a\u670d\u5668\u73fe\u5728\u4f7f\u7528\u4f3a\u670d\u5668\u7aef\u6e32\u67d3\u63d0\u4f9bReact\u9801\u9762\u3002\u60a8\u53ef\u4ee5\u5728\u700f\u89bd\u5668\u4e2d\u5b58\u53d6\u4f3a\u670d\u5668\u7684IP\u4f4d\u5740\u4f86\u67e5\u770b\u60a8\u7684React\u61c9\u7528\u904b\u884c\u60c5\u6cc1\u3002\u78ba\u4fdd\u60a8\u7684\u4f3a\u670d\u5668\u9632\u706b\u7246\u5141\u8a31\u7aef\u53e33000\u6216\u60a8\u9078\u64c7\u7684\u7aef\u53e3\u7684\u6d41\u91cf\u3002<\/p>\n \u63d0\u793a\uff1a<\/strong>
\n\u59cb\u7d42\u6aa2\u67e5\u4f3a\u670d\u5668\u65e5\u8a8c\u4ee5\u767c\u73fe\u932f\u8aa4\u3002\u9019\u6709\u52a9\u65bc\u5728\u7528\u6236\u6ce8\u610f\u5230\u4e4b\u524d\u4fee\u5fa9\u554f\u984c\u3002<\/p><\/blockquote>\n\u4f7f\u7528\u7a0b\u5e8f\u7ba1\u7406\u5668\uff08PM2\uff09<\/h3>\n\u60a8\u5e0c\u671b\u60a8\u7684React\u61c9\u7528\u5373\u4f7f\u5728\u4f3a\u670d\u5668\u91cd\u65b0\u555f\u52d5\u5f8c\u4e5f\u80fd\u4fdd\u6301\u5728\u7dda\u3002PM2\u662f\u4e00\u500b\u7a0b\u5e8f\u7ba1\u7406\u5668\uff0c\u53ef\u5e6b\u52a9\u60a8\u7ba1\u7406\u4f3a\u670d\u5668\u7a0b\u5e8f\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u5b89\u88ddPM2\uff1a<\/p>\n npm install -g pm2\r\n\r\n<\/code><\/pre>\n\u4f7f\u7528PM2\u555f\u52d5\u60a8\u7684React\u4f3a\u670d\u5668\uff1a<\/p>\n pm2 start server.js\r\n\r\n<\/code><\/pre>\nPM2\u4fdd\u6301\u60a8\u7684\u4f3a\u670d\u5668\u904b\u884c\uff0c\u4e26\u5728\u7576\u6a5f\u6642\u91cd\u65b0\u555f\u52d5\u5b83\u3002\u60a8\u9084\u53ef\u4ee5\u4f7f\u7528PM2\u76e3\u63a7\u60a8\u7684React\u61c9\u7528\u7684\u6548\u80fd\u548c\u65e5\u8a8c\u3002\u9019\u500b\u5de5\u5177\u975e\u5e38\u9069\u5408\u65e5\u672c\u7684\u751f\u7522\u74b0\u5883\u3002<\/p>\n \u5f9e\u65e5\u672c\u9032\u884c\u6e2c\u8a66<\/h3>\n\u5f9e\u65e5\u672c\u6e2c\u8a66\u60a8\u7684SSR\u90e8\u7f72\u78ba\u4fdd\u60a8\u7684React\u61c9\u7528\u70ba\u672c\u5730\u7528\u6236\u5feb\u901f\u8f09\u5165\u3002\u4f7f\u7528\u50cfGTmetrix\u3001Pingdom\u6216WebPageTest\u9019\u6a23\u7684\u5de5\u5177\u3002\u9019\u4e9b\u670d\u52d9\u8b93\u60a8\u53ef\u4ee5\u5f9e\u65e5\u672c\u4f4d\u7f6e\u6e2c\u8a66\u60a8\u7684\u4f3a\u670d\u5668\u3002\u6aa2\u67e5\u8f09\u5165\u6642\u9593\u662f\u5426\u5feb\u901f\u4ee5\u53ca\u5167\u5bb9\u986f\u793a\u662f\u5426\u6b63\u78ba\u3002<\/p>\n \u60a8\u9084\u53ef\u4ee5\u4f7f\u7528\u50cfUptimeRobot\u6216Datadog\u9019\u6a23\u7684\u76e3\u63a7\u5de5\u5177\u3002\u9019\u4e9b\u5de5\u5177\u5728\u60a8\u7684\u4f3a\u670d\u5668\u6216React\u61c9\u7528\u96e2\u7dda\u6642\u6703\u63d0\u9192\u60a8\u3002\u5b9a\u671f\u6e2c\u8a66\u548c\u76e3\u63a7\u6709\u52a9\u65bc\u4fdd\u6301\u60a8\u7684React\u61c9\u7528\u5c0d\u65e5\u672c\u7528\u6236\u7684\u53ef\u9760\u6027\u3002<\/p>\n \u6ce8\u610f\uff1a<\/strong>
\n\u6bcf\u6b21\u66f4\u65b0\u5f8c\u90fd\u8981\u6e2c\u8a66\u60a8\u7684React\u61c9\u7528\u3002\u9019\u7a2e\u505a\u6cd5\u8b93\u60a8\u7684\u4f3a\u670d\u5668\u548c\u7528\u6236\u90fd\u4fdd\u6301\u6eff\u610f\u3002<\/p><\/blockquote>\n
|
|
|