\u0633\u0627\u0632\u0648\u06a9\u0627\u0631 \u06a9\u0644\u06cc \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App \u0628\u062f\u06cc\u0646\u200c\u200c\u062a\u0631\u062a\u06cc\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0628\u062a\u062f\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0631\u0627 \u0628\u0647\u200c\u06a9\u0645\u06a9 \u062f\u0633\u062a\u0648\u0631 create-react-app \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0633\u067e\u0633\u060c \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u0633\u0627\u062f\u0647 \u0631\u0627 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u067e\u06cc\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 <\/a> \u0631\u0627 \u0628\u0631\u0627\u06cc\u0634 \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u0646\u062a\u0647\u0627 \u0646\u06cc\u0632\u060c \u067e\u0631\u0648\u0698\u0647\u200c\u0627\u06cc \u0641\u0639\u0627\u0644 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a \u06a9\u0647 \u0628\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0648 \u0628\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Express \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n \u0646\u06a9\u062a\u0647:<\/strong> \u0642\u0628\u0644 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644\u060c \u0628\u0627\u06cc\u062f Node.js \u0631\u0627 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0644\u0648\u06a9\u0627\u0644 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f. \u062f\u0631\u0636\u0645\u0646\u060c \u0628\u0627\u06cc\u062f \u0627\u0634\u0627\u0631\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u0628\u0631\u0627\u06cc \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0648 \u062a\u0623\u06cc\u06cc\u062f \u0634\u062f\u0647\u200c\u0627\u0646\u062f:<\/p>\n \u0628\u0627 \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App \u0627\u0645\u06a9\u0627\u0646 \u0631\u0646\u062f\u0631\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u062a\u06a9\u200c\u0635\u0641\u062d\u0647\u200c\u0627\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0635\u0641\u062d\u0647 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0641\u0631\u0627\u06cc\u0646\u062f \u0628\u0647\u200c\u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0648 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0634\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627\u062a\u0648\u062c\u0647\u200c\u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u062a\u0627\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0631\u06cc\u200c\u0627\u06cc\u06a9\u062a \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/mark><\/p>\n \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0628\u0647\u200c\u0645\u0646\u0638\u0648\u0631 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App\u060c \u0627\u0632 npx \u0628\u0631\u0627\u06cc \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062c\u062f\u06cc\u062f React (\u0628\u0647\u200c\u06a9\u0645\u06a9 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 Create React App) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0627\u06cc\u0646\u200c\u062c\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06cc \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0646\u0627\u0645\u0634 \u0631\u0627 react-ssr-example \u06af\u0630\u0627\u0634\u062a\u0647\u200c\u0627\u06cc\u0645:<\/p>\n \u0633\u067e\u0633\u060c cd \u0631\u0627 \u0648\u0627\u0631\u062f \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u062f\u0631\u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062c\u062f\u06cc\u062f \u0633\u0645\u062a \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0641\u0631\u0627\u06cc\u0646\u062f \u0646\u0635\u0628 \u0622\u0646 \u062a\u0623\u06cc\u06cc\u062f \u0634\u0648\u062f:<\/p>\n \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u062a\u0627\u0646 \u0628\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u0628\u0631\u0627\u06cc \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0622\u0645\u0648\u0632\u0634 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc Hook \u062f\u0631 React \u0645\u0642\u0627\u0644\u0647\u200c\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/p>\n \u0647\u0648\u06a9 \u062f\u0631 \u0631\u06cc\u200c\u0627\u06a9\u062a \u0686\u06cc\u0633\u062a\u061f<\/a><\/p>\n<\/div>\n \u062d\u0627\u0644\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f <Home> \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 src \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u062f\u0631\u0627\u062f\u0627\u0645\u0647\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 Home.js \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0647\u062f\u06cc\u0646\u06af <h1> \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u067e\u06cc\u0627\u0645 Hello \u0631\u0627 \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0646\u0627\u0645\u06cc \u062e\u0627\u0635 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f. \u062d\u0627\u0644\u0627 \u0628\u0627\u06cc\u062f <Home> \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <App> \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645\u061b \u067e\u0633 \u0641\u0627\u06cc\u0644 App.js \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 src \u0628\u0627\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0628\u0639\u062f\u0627\u0632\u0622\u0646\u060c \u06a9\u062f\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u062f\u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0627\u06cc\u0646 \u06a9\u062f\u0647\u0627 \u0646\u0627\u0645\u06cc (\u0627\u06cc\u0646\u200c\u062c\u0627 Sammy) \u0631\u0627 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <Home> \u0645\u06cc\u200c\u062f\u0647\u0646\u062f\u061b \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0686\u0646\u06cc\u0646 \u067e\u06cc\u0627\u0645\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u062f \u0634\u062f:<\/p>\n \u062f\u0631 \u0642\u062f\u0645 \u0628\u0639\u062f\u06cc\u060c \u062f\u0631 \u0641\u0627\u06cc\u0644 index.js \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u0632 \u0631\u0648\u0634 ReactDOM\u2019s hydrate \u0628\u0647\u200c\u062c\u0627\u06cc \u0631\u0646\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0647 \u0631\u0646\u062f\u0631\u0650\u0631 DOM \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c rehydrate \u06a9\u0646\u06cc\u0645. \u067e\u0633 \u0641\u0627\u06cc\u0644 index.js \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u067e\u0648\u0634\u0647 src \u0631\u0627 \u0628\u0627\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0633\u067e\u0633\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647\u200c\u0633\u0631\u0627\u063a \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0648\u06cc\u0645.<\/p>\n \u062d\u0627\u0644\u0627 \u0628\u0647\u200c\u0645\u0646\u0638\u0648\u0631 \u0627\u062f\u0627\u0645\u0647 \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React\u060c \u0628\u0627\u06cc\u062f \u0633\u0631\u0648\u0631\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc\u0634 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0646\u0633\u062e\u0647 \u0631\u0646\u062f\u0631\u200c\u0634\u062f\u0647 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0627\u0632 Express \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n \u062a\u0648\u062c\u0647: <\/b>\u067e\u06a9\u06cc\u062c react-scripts \u06a9\u0647 \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 Create-react-app \u0627\u0633\u062a\u060c \u0646\u0633\u062e\u0647\u200c\u0627\u06cc \u0627\u0632 Express \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632 webpack-dev-server \u0646\u0635\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0639\u0628\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n \u067e\u0648\u0634\u0647 \u0633\u0631\u0648\u0631 \u062c\u062f\u06cc\u062f\u06cc \u062f\u0631 \u067e\u0648\u0634\u0647 \u0631\u0648\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645:<\/p>\n \u067e\u0633\u200c\u0627\u0632\u0622\u0646 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0633\u0631\u0648\u0631\u060c \u0641\u0627\u06cc\u0644 index.js \u062c\u062f\u06cc\u062f\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 Express \u0627\u0633\u062a:<\/p>\n \u062d\u0627\u0644\u0627 \u0686\u0646\u062f \u062b\u0627\u0628\u062a \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0648 \u0627\u06cc\u0645\u067e\u0648\u0631\u062a\u200c\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u062f\u0631 \u0642\u062f\u0645 \u0628\u0639\u062f\u06cc\u060c \u06a9\u062f\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062e\u0637\u0627\u0647\u0627 \u0628\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0634\u0627\u06cc\u0627\u0646 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0648\u0627\u0631\u062f\u200c\u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <App> \u0627\u0632 \u067e\u0648\u0634\u0647 client-app \u0627\u0632 \u0633\u0631\u0648\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n \u062f\u0631 \u06a9\u062f\u0647\u0627\u06cc \u0628\u0627\u0644\u0627 \u0633\u0647 \u0627\u062a\u0641\u0627\u0642 \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App\u060c \u0628\u0627\u06cc\u062f \u06a9\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Webpack \u0648 Babel \u0628\u0627\u0646\u062f\u0644 \u0648 \u062a\u0631\u0646\u0633\u067e\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u06a9\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u06a9\u0627\u0631 \u06a9\u0646\u0646\u062f.<\/p>\n \u062a\u0648\u062c\u0647: <\/b>\u0628\u0631\u0627\u06cc \u0627\u062f\u0627\u0645\u0647 \u0645\u0631\u0627\u062d\u0644\u060c \u0628\u0627\u06cc\u062f babel-core \u0648 babel-preset-env \u0648 babel-preset-react-app \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06cc\u0646 \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 \u0627\u0632 \u0647\u0645\u0627\u0646 \u0632\u0645\u0627\u0646 \u0646\u0635\u0628 \u0622\u0631\u0634\u06cc\u0648 \u0648 \u0646\u0633\u062e\u0647 monorepo \u0628\u0647\u200c\u062c\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n \u062f\u0631\u0636\u0645\u0646\u060c react-scripts \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 Create-react-app \u0646\u0635\u0628 \u0627\u06cc\u0646 \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f: webpack \u060c\u200cwebpack \u060c\u200cwebpack-node-externals \u060c\u200cbabel\/core@ \u060c\u200cbabel-loader babel\/preset-env@ \u0648 babel\/preset-react@. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0627\u0632 \u0622\u0645\u0648\u0632\u0634 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0639\u0628\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0647\u200c\u0633\u0631\u0627\u063a \u0627\u062f\u0627\u0645\u0647 \u0645\u0631\u0627\u062d\u0644 \u0645\u06cc\u200c\u0631\u0648\u06cc\u0645.<\/p>\n \u062d\u0627\u0644\u0627 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062c\u062f\u06cc\u062f Babel \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0631\u0648\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645:<\/p>\n \u0628\u0639\u062f \u067e\u0631\u06cc\u0633\u062a\u200c\u0647\u0627\u06cc env \u0648 react-app \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0646\u06a9\u062a\u0647: <\/b>\u0642\u0628\u0644\u0627\u064b \u0627\u0632 \u0641\u0627\u06cc\u0644 babelrc. (\u0628\u062f\u0648\u0646 \u067e\u0633\u0648\u0646\u062f json.) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u062f\u061b \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0641\u0642\u0637 \u062f\u0631 Babel 6 \u067e\u0627\u0633\u062e\u200c\u06af\u0648 \u0628\u0648\u062f \u0648 \u062f\u06cc\u06af\u0631 \u062f\u0631 Babel 7 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u062f\u0631 \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc\u060c webpack config \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0627\u0632 Babel Loader \u0628\u0631\u0627\u06cc \u062a\u0631\u0627\u0646\u0633\u067e\u0627\u06cc\u0644\u200c\u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0641\u0627\u06cc\u0644 webpack.server.js \u0631\u0627 \u062f\u0631 \u067e\u0648\u0634\u0647 \u0631\u0648\u062a \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645:<\/p>\n \u0633\u067e\u0633\u060c \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 webpack.server.js \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0628\u0627 \u0627\u06cc\u0646 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0628\u0627\u0646\u062f\u0644 \u0633\u0631\u0648\u0631 \u06a9\u0647 \u062a\u0631\u0646\u0633\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062f\u0631 \u067e\u0648\u0634\u0647 server-build \u0648 \u062f\u0631 \u0641\u0627\u06cc\u0644\u06cc \u0628\u0647 \u0646\u0627\u0645 index.js \u062e\u0631\u0648\u062c\u06cc \u06af\u0631\u0641\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ‘target: ‘node \u0648 externals: [nodeExternals()] \u0627\u0632 webpack-node-externals \u0646\u06cc\u0632 \u06a9\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc node_modules \u0631\u0627 \u062d\u0630\u0641 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u062e\u0634 \u0645\u0647\u0645 \u0627\u06cc\u0646 \u0641\u0631\u0627\u06cc\u0646\u062f \u0627\u0633\u062a (\u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f).<\/p>\n \u0641\u0627\u06cc\u0644 package.json \u0631\u0627 \u062f\u0648\u0628\u0627\u0631\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0648 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u06cc \u06a9\u0645\u06a9\u06cc npm \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645:<\/p>\n \u0633\u067e\u0633\u060c dev:build-server \u0648 dev:start \u0648 dev scripts \u0631\u0627 \u0628\u0647 \u0641\u0627\u06cc\u0644 package.json \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 SSR \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645:<\/p>\n \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a dev:build-server \u0645\u062d\u06cc\u0637\u06cc \u0628\u0631\u0627\u06cc development \u0641\u0631\u0627\u0647\u0645 \u0648 webpack \u0631\u0627 \u0628\u0627 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc\u200c\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0633\u0627\u062e\u062a\u0647\u200c\u0627\u06cc\u0645. \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a dev \u0646\u06cc\u0632 npm-run-all \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u06a9\u062f\u0647\u0627\u06cc build \u0648 \u0647\u0645\u0647 \u06a9\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627 *dev: \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f (\u0634\u0627\u0645\u0644 dev:build-server \u0648 dev:start)\u060c \u062f\u0631 parallel \u0627\u062c\u0631\u0627 \u06a9\u0646\u062f. \u0627\u0632 nodemon \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0631\u06cc\u200c\u0627\u0633\u062a\u0627\u0631\u062a\u200c\u06a9\u0631\u062f\u0646 \u0633\u0631\u0648\u0631 \u0628\u0639\u062f \u0627\u0632 \u0627\u0639\u0645\u0627\u0644 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u062a\u0648\u062c\u0647: <\/b>\u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u06cc start \u060c\u200cbuild \u060c\u200ctest \u0648 eject \u06a9\u0647 \u0627\u0632\u0642\u0628\u0644 \u062f\u0631 \u0641\u0627\u06cc\u0644 package.json \u0645\u0648\u062c\u0648\u062f\u0646\u062f\u060c \u0646\u06cc\u0627\u0632\u06cc \u0646\u06cc\u0633\u062a.<\/p>\n \u062d\u0627\u0644\u0627 \u062f\u0633\u062a\u0648\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u067e\u0646\u062c\u0631\u0647 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0627\u06cc\u0646 \u067e\u06a9\u06cc\u062c\u200c\u0647\u0627 \u0646\u0635\u0628 \u0634\u0648\u0646\u062f:<\/p>\n \u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0627\u0646\u062f\u0644 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0633\u0645\u062a \u06a9\u0627\u0631\u0628\u0631 \u0633\u0627\u062e\u062a\u0647 \u0634\u0648\u062f \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u062a\u0631\u0627\u0646\u0633\u067e\u0627\u06cc\u0644 \u0634\u0648\u0646\u062f \u0648 \u0633\u0631\u0648\u0631 \u062f\u0631 3006: \u0627\u062c\u0631\u0627 \u0634\u0648\u062f.<\/p>\n \u062d\u0627\u0644\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a server webpack \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u067e\u06cc \u0645\u06cc\u200c\u0628\u0631\u062f \u0648 \u0633\u0631\u0648\u0631 \u0631\u06cc\u200c\u0627\u0633\u062a\u0627\u0631\u062a \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0627\u0627\u06cc\u0646\u200c\u062d\u0627\u0644\u060c \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0631\u0628\u0627\u0631 \u0628\u0639\u062f \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0628\u0627\u06cc\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0634\u0648\u062f.<\/p>\n \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0645\u0631\u0627\u062d\u0644 \u0646\u0647\u0627\u06cc\u06cc \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App\u060c \u0622\u062f\u0631\u0633 \/http:\/\/localhost:3006 \u0631\u0627 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0646\u062f\u0631\u200c\u0634\u062f\u0647 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n \u067e\u06cc\u0634\u200c\u0627\u0632\u0627\u06cc\u0646\u060c \u0633\u0648\u0631\u0633 \u06a9\u062f\u0647\u0627 \u0628\u062f\u200c\u06cc\u0646\u200c\u0635\u0648\u0631\u062a \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u062f\u0646\u062f:<\/p>\n \u062d\u0627\u0644\u0627 \u0628\u0627 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u06cc \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645\u060c \u0633\u0648\u0631\u0633 \u06a9\u062f\u0647\u0627 \u0628\u062f\u06cc\u0646\u200c\u0635\u0648\u0631\u062a \u0647\u0633\u062a\u0646\u062f:<\/p>\n \u0647\u0645\u0627\u0646\u200c\u0637\u0648\u0631\u200c\u06a9\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc\u00a0 React App\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a <App> \u0631\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 HTML \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0637\u0644\u0628\u060c \u0631\u0648\u0634 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0628\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0648 \u0641\u0639\u0627\u0644\u200c\u06a9\u0631\u062f\u0646 SSR \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0628\u0627 \u0627\u0639\u0645\u0627\u0644 \u0628\u0631\u062e\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0622\u0645\u0648\u0632\u0634 \u0648 \u06a9\u0644\u06cc\u062a \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0633\u0627\u062f\u0647 React \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u06cc\u0645. \u0637\u0628\u06cc\u0639\u062a\u0627\u064b \u0648\u0642\u062a\u06cc \u0627\u0632 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0648 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 redux \u0633\u062e\u0646 \u0628\u0647\u200c\u0645\u06cc\u0627\u0646 \u0622\u06cc\u062f\u060c \u0645\u0631\u0627\u062d\u0644 \u06a9\u0645\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u062a\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f. \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u06cc\u0645 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0631\u0627\u06cc\u062a\u0627\u0646 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u0647 \u0628\u0627\u0634\u062f.<\/p>\n \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u06a9\u0647 \u0628\u0627 \u0646\u0627\u0645 \u0627\u062e\u062a\u0635\u0627\u0631\u06cc SSR \u0646\u06cc\u0632 \u0634\u0646\u0627\u062e\u062a\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631\u200c\u06af\u0631\u0641\u062a\u0646 \u0627\u0632 \u0648\u0628\u200c\u200c\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u062a\u06a9\u200c\u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA) \u0627\u0633\u062a. \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u060c \u0635\u0641\u062d\u0647 \u0645\u062f\u0646\u0638\u0631 \u0627\u0628\u062a\u062f\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u062f \u0648 \u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0645\u0632\u06cc\u062a \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af server-side\u060c \u0627\u0631\u062a\u0642\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0633\u06cc\u0633\u062a\u0645 \u0627\u0633\u062a\u061b \u0686\u0631\u0627\u06a9\u0647 \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0635\u0641\u062d\u0647 \u0645\u0627 \u0627\u0628\u062a\u062f\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u062f \u0648 \u0628\u0639\u062f\u0627\u0632\u0622\u0646 \u0628\u0627 \u0627\u0648\u0644\u06cc\u0646 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0632 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0647\u200c\u0639\u0644\u0627\u0648\u0647 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u062a\u06a9\u0646\u06cc\u06a9\u060c \u0645\u0637\u0645\u0626\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u0648\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0627\u0650\u0644\u0650\u0645\u0627\u0646\u200c\u0647\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0631\u0646\u062f\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f\u061b \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u0631\u0646\u062f\u0631 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u062a\u06a9\u06cc \u0646\u06cc\u0633\u062a.<\/p>\n \u0628\u0632\u0631\u06af\u200c\u062a\u0631\u06cc\u0646 \u0636\u0639\u0641 SSR \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u062e\u0634\u06cc \u0627\u0632 HTML \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u062f (\u0645\u062b\u0644 \u062c\u0627\u0648\u0627\u200c\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\u06cc \u0634\u062e\u0635 \u062b\u0627\u0644\u062b \u0648\u0627\u0631\u062f \u0633\u06cc\u0633\u062a\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f). \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u0639\u0636\u06cc \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 (\u0645\u0627\u0646\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u0647\u0627\u06cc UGC) \u0628\u0647 \u0631\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u200c\u0648\u062c\u0648 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0646\u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f.<\/p>\n \u062e\u06cc\u0631\u060c \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631 \u0645\u0631\u0627\u062d\u0644 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631 \u06a9\u0645\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f\u061b \u0686\u0631\u0627\u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c SSR \u0628\u0627\u0631 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n \u0628\u0644\u0647\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 SSR \u062f\u0631 \u062f\u0648 \u0635\u0648\u0631\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0642\u062f\u0645\u06cc \u0645\u062b\u0628\u062a \u0628\u0631\u0627\u06cc \u0633\u0626\u0648<\/a> \u0633\u0627\u06cc\u062a \u0647\u0645 \u0645\u062d\u0633\u0648\u0628 \u0634\u0648\u062f: \u06f1. \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u06cc\u0646\u062f\u06a9\u0633\u200c\u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0635\u0641\u062d\u0627\u062a \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0628\u0627 \u0645\u0634\u06a9\u0644\u0627\u062a\u06cc \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a\u061b \u06f2. \u0648\u0642\u062a\u06cc\u200c \u0634\u0628\u06a9\u0647\u200c\u0627\u06cc \u06a9\u064f\u0646\u062f \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0627\u0646\u0644\u0648\u062f \u0628\u0627\u0646\u062f\u0644 \u0628\u0632\u0631\u06af \u062c\u0627\u0648\u0627\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u062f\u0686\u0627\u0631 \u0627\u062e\u062a\u0644\u0627\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n
\u0645\u0631\u062d\u0644\u0647 1. \u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React<\/span><\/h2>\n
npx create-react-app react-ssr-example<\/pre>\n
cd react-ssr-example<\/pre>\n
npm start<\/pre>\n
\u0645\u0631\u062d\u0644\u0647 2. \u0627\u0635\u0644\u0627\u062d \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u200c\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/span><\/h2>\n
nano src\/Home.js<\/pre>\n
function Home(props) {\r\n return <h1>Hello {props.name}!<\/h1>;\r\n};\r\n\r\nexport default Home;<\/pre>\nnano src\/App.js<\/pre>\n
import Home from '.\/Home';\r\n\r\nfunction App() {\r\n return <Home name=\"Sammy\"\/>;\r\n}\r\n\r\nexport default App;<\/pre>\nOutput\r\n\"Hello Sammy!\"<\/pre>\n
nano src\/index.js<\/pre>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport App from '.\/App';\r\n\r\nReactDOM.hydrate(\r\n <React.StrictMode>\r\n <App \/>\r\n <\/React.StrictMode>,\r\n document.getElementById('root')\r\n);<\/pre>\n![\"Ssr](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/07\/react-server-side-rendering2.jpg\" "\\"\u0646\u062d\u0648\u0647")
\u0645\u0631\u062d\u0644\u0647 3. \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u0631 Express<\/span><\/h2>\n
mkdir server<\/pre>\n
nano server\/index.js<\/pre>\n
import path from 'path';\r\nimport fs from 'fs';\r\n\r\nimport React from 'react';\r\nimport ReactDOMServer from 'react-dom\/server';\r\nimport express from 'express';\r\n\r\nimport App from '..\/src\/App';\r\n\r\nconst PORT = process.env.PORT || 3006;\r\nconst app = express();<\/pre>\n
\u0645\u0631\u062d\u0644\u0647 4. \u0631\u0646\u062f\u0631\u200c\u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646<\/span><\/h2>\n
\/\/ ...\r\n\r\napp.get('\/', (req, res) => {\r\n const app = ReactDOMServer.renderToString(<App \/>);\r\n const indexFile = path.resolve('.\/build\/index.html');\r\n\r\n fs.readFile(indexFile, 'utf8', (err, data) => {\r\n if (err) {\r\n console.error('Something went wrong:', err);\r\n return res.status(500).send('Oops, better luck next time!');\r\n }\r\n\r\n return res.send(\r\n data.replace('<div id=\"root\"><\/div>', `<div id=\"root\">${app}<\/div>`)\r\n );\r\n });\r\n});\r\n\r\napp.use(express.static('.\/build'));\r\n\r\napp.listen(PORT, () => {\r\n console.log(`Server is listening on port ${PORT}`);\r\n});<\/pre>\n\n
![\"React](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/07\/react-server-side-rendering3.jpg\" "\\"\u0631\u0646\u062f\u0631\u06cc\u0646\u06af")
\u0645\u0631\u062d\u0644\u0647 5. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Webpack \u0648 Babel\u00a0<\/span><\/h2>\n
nano .babelrc.json<\/pre>\n
{\r\n \"presets\": [\r\n \"@babel\/preset-env\",\r\n \"@babel\/preset-react\"\r\n ]\r\n}<\/pre>\nnano webpack.server.js<\/pre>\n
const path = require('path');\r\nconst nodeExternals = require('webpack-node-externals');\r\n\r\nmodule.exports = {\r\n entry: '.\/server\/index.js',\r\n target: 'node',\r\n externals: [nodeExternals()],\r\n output: {\r\n path: path.resolve('server-build'),\r\n filename: 'index.js'\r\n },\r\n module: {\r\n rules: [\r\n {\r\n test: \/\\.js$\/,\r\n use: 'babel-loader'\r\n }\r\n ]\r\n }\r\n};<\/pre>\n![\"\u0622\u0645\u0648\u0632\u0634](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/07\/react-server-side-rendering4.jpg\" "\\"\u0627\u062c\u0631\u0627\u06cc")
\u0645\u0631\u062d\u0644\u0647 6. \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u200c\u0647\u0627\u06cc npm<\/span><\/h2>\n
nano package.json<\/pre>\n
\"scripts\": {\r\n \"dev:build-server\": \"NODE_ENV=development webpack --config webpack.server.js --mode=development -w\",\r\n \"dev:start\": \"nodemon .\/server-build\/index.js\",\r\n \"dev\": \"npm-run-all --parallel build dev:*\",\r\n \/\/ ...\r\n},<\/pre>\nnpm install nodemon@2.0.15 --save-dev\r\nnpm install npm-run-all@4.1.5 --save-dev<\/pre>\n
npm run dev<\/pre>\n
Output<div id=\"root\"><\/div><\/pre>\n
Output<div id=\"root\"><h1 data-reactroot=\"\">Hello <!-- -->Sammy<!-- -->!<\/h1><\/div><\/pre>\n
![\"\u0631\u0646\u062f\u0631](\"https:\/\/parspack.com\/blog\/wp-content\/uploads\/2022\/07\/react-server-side-rendering5.jpg\" "\\"\u0646\u062d\u0648\u0647")
\u062c\u0645\u0639\u200c\u0628\u0646\u062f\u06cc<\/span><\/h2>\n
\u0633\u0624\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/span><\/h2>\n
1. \u0645\u0646\u0638\u0648\u0631 \u0627\u0632 \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App \u0686\u06cc\u0633\u062a\u061f<\/span><\/h3>\n
2. \u0645\u0632\u0627\u06cc\u0627\u06cc SSR \u0686\u06cc\u0633\u062a\u061f<\/span><\/h3>\n
3. \u0645\u0639\u0627\u06cc\u0628 SSR \u0686\u06cc\u0633\u062a\u061f<\/span><\/h3>\n
4. \u0622\u06cc\u0627 \u0631\u0648\u0646\u062f \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc SSR \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u06cc\u06a9\u0633\u0627\u0646 \u0627\u0633\u062a\u061f<\/span><\/h3>\n
5. \u0622\u06cc\u0627 \u0641\u0639\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0628\u0631\u0627\u06cc React App \u0628\u0631\u0627\u06cc \u0633\u0626\u0648 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0647\u0645 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a\u061f<\/span><\/h3>\n