{"id":321399,"date":"2021-04-13T21:00:26","date_gmt":"2021-04-13T21:00:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321399"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321399","title":{"rendered":"React Server-Side Rendering (SSR) \u2014 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0430"},"content":{"rendered":"\n
\n

\u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (SSR), \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 \u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u044f\u0445. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0438\u043d\u0438 React \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 express \u0441\u0435\u0440\u0432\u0435\u0440 (Node.js), \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c SSR.<\/p>\n

\u041f\u043e\u0447\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c (SPA). \u042f \u0443\u0432\u0435\u0440\u0435\u043d \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043a\u0430\u043a Angular<\/strong><\/a>, React<\/strong><\/a>, Vue<\/strong><\/a>, Svelte<\/strong><\/a> \u0438 \u0442.\u0434. \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0434\u044a\u0435\u043c\u0435 \u0438\u0437-\u0437\u0430 \u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c SPA. \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u0435\u0441\u043b\u0438 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e).<\/p>\n

\u0414\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u0430\u0439\u0442\u043e\u0432 HTML \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0433 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u043b \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e HTML \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435, \u043a\u0440\u043e\u043c\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u043f\u044b\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n

\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0436\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043e\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 HTML \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0442\u0432\u0435\u0442. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439<\/strong>, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0436\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a JavaScript, CSS, \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0441\u043d\u043e\u0432\u0430 (\u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u043e\u043b\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c). \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n

\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442 \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u0412\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f HTML \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 (\u0431\u0440\u0430\u0443\u0437\u0435\u0440). \u0412\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443, \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f HTML \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong> (\u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439), \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e HTML.<\/p>\n

\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041c\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c URL \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e History API<\/strong><\/a>, \u0447\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f JavaScript, CSS \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n

\u0414\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a example.com\/<\/code> \u0438\u043b\u0438 example.com\/settings<\/code> (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0432\u0432\u043e\u0434 URL \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435), \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 HTML \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u043e\u0442\u0432\u0435\u0442. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 JavaScript \u0447\u0438\u0442\u0430\u0435\u0442 URL-\u0430\u0434\u0440\u0435\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u0438\u0434\u0438\u0442 \u043f\u0443\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \/<\/code> \u0438\u043b\u0438 \/settings<\/code>, \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438, \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0437\u0430\u0442\u0435\u043c \u0434\u0435\u043b\u0430\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u044b\u0445 \u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 HTML-\u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 SPA \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n

\n\u043a\u043e\u0434<\/summary>\n
\n
\/\/ index.html  <html lang=\"en\">     <head>         <meta charset=\"UTF-8\">         <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">         <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">         <title>SPA Application<\/title>         <meta name=\"description\" content=\"My SPA website.\">         <link rel=\"icon\" href=\"\/assets\/favicon.ico\">         <link href=\"styles.css\" rel=\"stylesheet\">     <\/head>      <body>         <div id=\"app\"><\/div>         <script src=\"vendor.js\"><\/script>         <script src=\"main.js\"><\/script>     <\/body> <\/html><\/code><\/pre>\n<\/div>\n<\/details>\n
\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 HTML, <div id=\"app\"><\/div><\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/strong> \u0438\u043b\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/strong> SPA. \u0412\u0435\u0441\u044c HTML \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043d\u0430\u0448\u0438\u043c JavaScript, \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 \u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u044f\u0445 SPA.<\/p>\n
= \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430<\/h3>\n
    \n
  1. \n
    SPA \u0434\u0430\u044e\u0442 \u043e\u043f\u044b\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0441\u044c HTML \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e.<\/p>\n<\/li>\n
  2. \n
    \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a JavaScript \u0438 CSS \u0444\u0430\u0439\u043b\u044b, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0441\u0438\u043b\u044c\u043d\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u043d\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<\/li>\n
  3. \n
    \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442 (\u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, SPA \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0435\u0442\u0438.<\/p>\n<\/li>\n
  4. \n
    \u0412\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e service worker<\/strong><\/a>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0441\u0430\u0439\u0442\u0443, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c HTML \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443, \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e «\u041d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443!», \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0441\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0434\u043e\u0441\u0442\u0443\u043f<\/strong>.<\/p>\n<\/li>\n
  5. \n
    \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c SPA \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u044b \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (Android \u0438\u043b\u0438 iOS), SPA \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0443 \u0436\u0435 \u0441\u0430\u043c\u0443\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n
    = \u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/h3>\n
      \n
    1. \n
      \u0422\u0430\u043a \u043a\u0430\u043a SPA \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 JavaScript \u0438 CSS \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 (\u043e\u0431\u044b\u0447\u043d\u043e), \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438 (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442). \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0435\u0442\u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SSR.<\/p>\n<\/li>\n
    2. \n
      \u0412 SPA, \u0442\u0430\u043a \u043a\u0430\u043a JavaScript \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, SPA \u0434\u0435\u043b\u0430\u044e\u0442 \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b \u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 SPA \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u0438 \u0431\u0430\u0442\u0430\u0440\u0435\u0438.<\/p>\n<\/li>\n
    3. \n
      \u0422\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446) \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 HTML, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a<\/strong> \u0432\u0438\u0434\u0438\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u043a\u0430\u043a \u043f\u0443\u0441\u0442\u043e\u0439, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0442\u0440\u0430\u0444\u0438\u043a \u0438 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n
      \u0418\u0437 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 SPA \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u044f\u0442 \u0438\u0445 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041d\u0430\u0448\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0442\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u043c.<\/p>\n
      \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0430\u0439\u0442 \u0445\u043e\u0447\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0438\u0441\u043a\u0430. \u041a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e SPA, \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c. \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 (crawler), \u0442\u0430\u043a\u0430\u044f \u043a\u0430\u043a Google, \u0432\u0438\u0434\u0438\u0442 \u043d\u0430\u0448 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442, \u043e\u043d\u0430 \u0432\u0438\u0434\u0438\u0442 HTML \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <div id=\"app\"><\/div><\/code>, \u0442.\u043a. \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0440\u043e\u0431\u043e\u0442\u043e\u0432 \u0447\u0438\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e HTML, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0438 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u044b \u043d\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0430\u0439\u0442\u0430.<\/p>\n
      \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u0438\u0441\u043a\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c? \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e — \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/strong>.<\/p>\n
      \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0432\u044b\u0434\u0435\u043b\u0438\u043b «\u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435», \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u0438\u0434\u044f\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 HTML, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435.<\/p>\n
      \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 HTML \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u043f\u043e\u043a\u0430 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b. \u041d\u0430\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u043e \u0437\u0430\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
      \n
      \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442, \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>. \u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b HTML \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 JavaScript \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 DOMContentLoaded<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0442\u0435\u0433\u0438 <script><\/code> \u0432 HTML \u0438\u043c\u0435\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 defer<\/code>.<\/p>\n<\/blockquote>\n
      \u0422\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f server-side rendering<\/strong> \u0438\u043b\u0438 SSR<\/strong>. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c SSR, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0435\u0433\u043e \u0432 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n
      \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 React \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n
      \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CLI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a create-react-app<\/strong><\/a>, \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c React-\u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043b\u0438 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 React boilerplate c GitHub, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Webpack-\u043f\u0440\u043e\u0435\u043a\u0442. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u044d\u0442\u043e\u043c GitHub \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/strong><\/a>. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0438\u0437 \u043c\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/strong><\/a> \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 React<\/strong>.<\/p>\n
      \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Webpack<\/strong><\/a> \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 React \u0438 ES6 \u0432 JavaScript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel<\/strong><\/a>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SCSS (Sass<\/em>) \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 styles.css<\/code>. \u041d\u0430\u0448\u0435 JavaScript \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 main.js<\/code> \u0438 vendor.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ babel.config.js  module.exports = {     presets: ['@babel\/env', '@babel\/react'],     plugins: [         '@babel\/plugin-transform-runtime',         '@babel\/plugin-transform-async-to-generator',         '@babel\/transform-arrow-functions',         '@babel\/proposal-object-rest-spread',         '@babel\/proposal-class-properties'     ] };<\/code><\/pre>\n
      \/\/ package.json  {   \"name\": \"react-ssr\",   \"description\": \"A React server-side rendering (SSR) sample project.\",   \"version\": \"1.0.0\",   \"scripts\": {     \"start\": \"NODE_ENV=development webpack serve\",     \"build\": \"NODE_ENV=production webpack\"   },   \"dependencies\": {     \"react\": \"^17.0.1\",     \"react-dom\": \"^17.0.1\"   },   \"devDependencies\": {     \"@babel\/core\": \"^7.12.9\",     \"@babel\/plugin-proposal-class-properties\": \"^7.12.1\",     \"@babel\/plugin-proposal-object-rest-spread\": \"^7.12.1\",     \"@babel\/plugin-transform-arrow-functions\": \"^7.12.1\",     \"@babel\/plugin-transform-async-to-generator\": \"^7.12.1\",     \"@babel\/plugin-transform-runtime\": \"^7.12.1\",     \"@babel\/preset-env\": \"^7.12.7\",     \"@babel\/preset-react\": \"^7.12.7\",     \"@babel\/runtime\": \"^7.12.5\",     \"babel-loader\": \"^8.2.2\",     \"copy-webpack-plugin\": \"^6.3.2\",     \"css-loader\": \"^5.0.1\",     \"html-webpack-plugin\": \"^4.5.0\",     \"mini-css-extract-plugin\": \"^1.3.2\",     \"node-sass\": \"^5.0.0\",     \"sass-loader\": \"^10.1.0\",     \"webpack\": \"^5.10.0\",     \"webpack-cli\": \"^4.2.0\",     \"webpack-dev-server\": \"^3.11.0\"   } }<\/code><\/pre>\n
      \/\/ src\\components\\app\\app.component.jsx  import React from 'react';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 import { Counter } from '..\/counter';  \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f export class App extends React.Component {     constructor() {         console.log( 'App.constructor()' );         super();     }      \/\/ \u0440\u0435\u043d\u0434\u0435\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f     render() {         console.log( 'App.render()' );          return (             <div className='ui-app'>                 <Counter name='Monica Geller'\/>             <\/div>         );     } }<\/code><\/pre>\n
      \/\/ src\\index.html  <html lang='en'> <head>     <meta charset='UTF-8'>     <meta name='viewport' content='width=device-width, initial-scale=1.0'>     <meta http-equiv='X-UA-Compatible' content='ie=edge'>     <title>React Boilerplate \/ Webpack 4 \/ Babel 7<\/title>     <meta name=\"description\" content=\"React boilerplate with Webpack 4 and Babel 7\">     <link rel='icon' href='\/assets\/favicon.ico'> <\/head> <body>     <div id=\"app\"><\/div> <\/body> <\/html><\/code><\/pre>\n
      \/\/ src\\index.js  import React from 'react'; import ReactDOM from 'react-dom';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 App import { App } from '.\/components\/app';  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u0438 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0435\u0433\u043e \u0432 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' ReactDOM.render( <App\/>, document.getElementById( 'app' ) );<\/code><\/pre>\n
      \/\/ webpack.config.js  const path = require( 'path' ); const HTMLWebpackPlugin = require( 'html-webpack-plugin' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); const CopyWebpackPlugin = require( 'copy-webpack-plugin' );  \/*-------------------------------------------------*\/  module.exports = {      \/\/ \u0440\u0435\u0436\u0438\u043c webpack \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438     mode: ( 'development' === process.env.NODE_ENV ? 'development' : 'production' ),      \/\/ \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b     entry: [         '.\/src\/index.js', \/\/ react     ],      \/\/ \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u0447\u0430\u043d\u043a\u0438     output: {         path: path.resolve( __dirname, 'dist' ),         filename: 'build\/[name].js',     },      \/\/ module\/loaders configuration     module: {         rules: [             {                 test: \/\\.jsx?$\/,                 exclude: \/node_modules\/,                 use: [ 'babel-loader' ]             },             {                 test: \/\\.scss$\/,                 use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]             }         ]     },      \/\/ webpack \u043f\u043b\u0430\u0433\u0438\u043d\u044b     plugins: [          \/\/ \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 css \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439         new MiniCssExtractPlugin( {             filename: 'build\/styles.css'         } ),          \/\/ \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 HTML \u0444\u0430\u0439\u043b\u0430 \u0441 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438         new HTMLWebpackPlugin( {             filename: 'index.html',             template: path.resolve( __dirname, 'src\/index.html' ),             minify: false,         } ),          \/\/ \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 `src` \u0432 `dist`         new CopyWebpackPlugin( {             patterns: [                 {                     from: path.resolve( __dirname, 'src\/assets' ),                     to: path.resolve( __dirname, 'dist\/assets' )                 }             ]         } ),     ],      \/\/ \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432     resolve: {                  \/\/ \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432         extensions: [ '.js', '.jsx', '.scss' ],     },      \/\/ webpack \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438     optimization: {         splitChunks: {             cacheGroups: {                 default: false,                 vendors: false,                                  vendor: {                     chunks: 'all', \/\/ both : consider sync + async chunks for evaluation                      name: 'vendor', \/\/ \u0438\u043c\u044f \u0447\u0430\u043d\u043a-\u0444\u0430\u0439\u043b\u0430                     test: \/node_modules\/, \/\/ test regular expression                 }             }         }     },      \/\/ \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438     devServer: {         port: 8088,         historyApiFallback: true,     },      \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c source map     devtool: 'source-map'  };<\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0412 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 src\/index.js<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u0430 src\/components\/app<\/code> — \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Counter<\/code>. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b $ npm run start<\/code>, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043a\u0440\u0430\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n
      <\/figcaption><\/figure>\n
      \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 INCREMENT<\/code>, \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 1 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 3, \u0438 \u0437\u0430\u0442\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439. \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (Chrome DevTools<\/em>), \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 HTML. \u041a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u043d\u0430\u0448 index.html<\/code> \u0438\u043c\u0435\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <div id=\"app\"><\/div><\/code>. HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0432\u044b\u0448\u0435, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c App<\/code>.<\/p>\n
      \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043c\u044b \u0432\u0441\u0451 \u0435\u0449\u0451 \u0443\u0432\u0438\u0434\u0438\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <div id=\"app\"><\/div><\/code> (\u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435).<\/p>\n
      <\/figcaption><\/figure>\n
      \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u0440\u043e\u0431\u043e\u0442\u0430, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <div id=\"app\"><\/div><\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c HTML \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e ReactDOM.render()<\/code>, \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code> \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u043a\u0430\u0436\u0435\u0442\u0441\u044f. \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c.<\/p>\n
      \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f SSR<\/h2>\n
      \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Webpack. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c NGINX<\/a>, Apache<\/a>, \u0438\u043b\u0438 Node.js \u0441\u0435\u0440\u0432\u0435\u0440. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0442\u043e \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440 Node.js (\u0438\u0437-\u0437\u0430 JavaScript). \u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, NGINX \u0438\u043b\u0438 Apache \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u043a\u0441\u0438-\u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/a>.<\/p>\n
      \u0412\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 $ npm run build<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0444\u0430\u0439\u043b\u044b \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 dist<\/code>. \u0412\u043e\u0442 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0430\u0448\u0435\u043c HTTP \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n
      dist\/ \u251c\u2500\u2500 assets |  \u2514\u2500\u2500 favicon.ico \u251c\u2500\u2500 build |  \u251c\u2500\u2500 main.js |  \u251c\u2500\u2500 main.js.map |  \u251c\u2500\u2500 styles.css |  \u251c\u2500\u2500 styles.css.map |  \u251c\u2500\u2500 vendor.js |  \u2514\u2500\u2500 vendor.js.map \u2514\u2500\u2500 index.html <\/code><\/pre>\n
      \u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430-\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Express.js<\/a> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f HTTP-\u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e, \u0442\u0430\u043a \u043a\u0430\u043a SSR \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b server\/express.js<\/code> \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 index.html<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043a\u0440\u043e\u043c\u0435 JS, CSS \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430\u0448\u0435\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
      server\/ \u251c\u2500\u2500 express.js \u2514\u2500\u2500 index.js <\/code><\/pre>\n
      \u041c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c server\/index.js<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f node<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0444\u0430\u0439\u043b server\/express.js<\/code>. \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0437\u0434\u0435\u0441\u044c index.js<\/code> \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 express.js<\/code> \u043f\u043e\u0437\u0436\u0435 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f SSR.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ server\/express.js  const express = require( 'express' ); const fs = require( 'fs' ); const path = require( 'path' ); \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 express \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const app = express(); \/\/ \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 app.get( \/\\.(js|css|map|ico)$\/, express.static( path.resolve( __dirname, '..\/dist' ) ) ); \/\/ \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c 'index.html' app.use( '*', ( req, res ) => { \/\/ \u0447\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b `index.html` let indexHTML = fs.readFileSync( path.resolve( __dirname, '..\/dist\/index.html' ), {     encoding: 'utf8', } );  \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 res.contentType( 'text\/html' ); res.status( 200 );  return res.send( indexHTML );  } ); \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 9000 app.listen( '9000', () => {     console.log( 'Express server started at <http:\/\/localhost:9000>' ); } ); <\/code><\/pre>\n
      \/\/ server\/index.js  require( '.\/express.js' ); <\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 $ node server\/index.js<\/code> \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \"start:ssr\": \"node server\"<\/code> \u0432 \"scripts\"<\/code> \u0444\u0430\u0439\u043b\u0430 package.json<\/code> \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 $ npm run start:ssr<\/code>, \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448 HTTP-\u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 dist<\/code>.<\/p>\n
      <\/figcaption><\/figure>\n
      \u041d\u0430\u0448 HTTP-\u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 9000<\/code> \u043f\u043e\u0440\u0442\u0443. \u0418\u0437 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430, \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c SSR, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <div id=\"app\"><\/div><\/code> \u0432\u0441\u0435 \u0435\u0449\u0435 \u043f\u0443\u0441\u0442. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0432 \u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0435, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n
      \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0444\u0430\u0439\u043b src\/index.js<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code> \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043c\u0435\u0449\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 #app<\/code>, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n
      \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App import { App } from '.\/components\/app';  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u0438 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' ReactDOM.render( <App\/>, document.getElementById( 'app' ) ); <\/code><\/pre>\n
      \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041f\u0440\u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0438 index.html<\/code>, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c <div id=\"app\"><\/div><\/code> HTML \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c App<\/code>. \u0418\u0442\u0430\u043a, \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c HTML \u0438\u0437 App<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
      \u041f\u0430\u043a\u0435\u0442 react-dom\/server<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e renderToString<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430) \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 ReactDOM.render()<\/code>, \u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 HTML-\u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0444\u0430\u0439\u043b server\/express.js<\/code> \u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 #div<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ server\/express.js  const express = require( 'express' ); const fs = require( 'fs' ); const path = require( 'path' ); const React = require( 'react' ); const ReactDOMServer = require( 'react-dom\/server' ); \/\/ create express application const app = express(); \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App const { App } = require( '..\/src\/components\/app' );  \/\/ \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 app.get( \/\\.(js|css|map|ico)$\/, express.static( path.resolve( __dirname, '..\/dist' ) ) ); \/\/ \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c 'index.html' app.use( '*', ( req, res ) => { \/\/ \u0447\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b `index.html` let indexHTML = fs.readFileSync( path.resolve( __dirname, '..\/dist\/index.html' ), {     encoding: 'utf8', } );  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c HTML \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 'App' let appHTML = ReactDOMServer.renderToString( &lt;App \/&gt; );  \/\/ \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0438\u0437 'appHTML' indexHTML = indexHTML.replace( '&lt;div id=&quot;app&quot;&gt;&lt;\/div&gt;', `&lt;div id=&quot;app&quot;&gt;${ appHTML }&lt;\/div&gt;` );  \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 res.contentType( 'text\/html' ); res.status( 200 );  return res.send( indexHTML );  } ); \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 9000 app.listen( '9000', () => {     console.log( 'Express server started at <http:\/\/localhost:9000>' ); } ); <\/code><\/pre>\n
      \/\/ server\/index.js  const path = require( 'path' );  \/\/ \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u044b `.scss` require( 'ignore-styles' );  \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u043d\u0430 \u043b\u0435\u0442\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u044b require( '@babel\/register')( {     configFile: path.resolve( __dirname, '..\/babel.config.js' ), } );  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c express-\u0441\u0435\u0440\u0432\u0435\u0440 require( '.\/express.js' ); <\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0412 \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 express.js<\/code> \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0431\u0430\u0437\u0435 \u043d\u0435\u0433\u043e HTML-\u0441\u0442\u0440\u043e\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 #app<\/code> \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c JSX \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 JavaScript, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c express.js<\/code> \u0438 \u0435\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b.<\/p>\n
      $ npm i -D @babel\/register ignore-styles<\/code><\/pre>\n
      \u041f\u0430\u043a\u0435\u0442 @babel\/register<\/a> \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 Node. \u041f\u043e\u0441\u043b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0432 JavaScript \u0444\u0430\u0439\u043b (\u043f\u043e\u0434 Node), \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 .js<\/code> \u0438\u043b\u0438 .jsx<\/code> \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Node \u0444\u0443\u043d\u043a\u0446\u0438\u0438 require()<\/code> \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 JavaScript \u043d\u0430 \u043b\u0435\u0442\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel.<\/p>\n
      \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f config file<\/strong><\/a> Babel-\u044f (\u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430), \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u043f\u0446\u0438\u044e configFile<\/a>. @babel\/register \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0430\u043f\u043a\u0438 node_modules<\/code> \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u043c. \u0437\u0434\u0435\u0441\u044c<\/strong><\/a>.<\/p>\n
      \u0422\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442 .scss<\/code> \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Babel \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e require<\/code> \u043f\u0430\u043a\u0435\u0442 ignore-styles<\/a>. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043e\u043d \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u0438\u0435 \u043d\u0435 JavaScript \u0444\u0430\u0439\u043b\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a .css<\/code>, .scss<\/code>, .sass<\/code> , \u0438 \u0442.\u0434. \u0421\u043c. \u0437\u0434\u0435\u0441\u044c<\/strong><\/a> \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n
      \n
      \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 CSS Modules<\/a> \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 CSS, \u0433\u0434\u0435 \u0438\u043c\u043f\u043e\u0440\u0442 CSS-\u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d, \u0442\u043e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438. \u042d\u0442\u043e\u0442<\/a> \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 StackOverflow \u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c.<\/p>\n<\/blockquote>\n
      \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b require<\/code> \u044d\u0442\u0438 \u043f\u0430\u043a\u0435\u0442\u044b \u0432 server\/index.js<\/code>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c require<\/code> \u0444\u0430\u0439\u043b express.js<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d «\u043d\u0430 \u043b\u0435\u0442\u0443», \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c SSR \u0441\u0435\u0440\u0432\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0443 $ npm run start:ssr<\/code>, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0436\u0438\u0434\u0430\u0442\u044c \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0435\u0434\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u043e\u0433\u043e HTML \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n
      <\/figcaption><\/figure>\n
      \u0423\u0440\u0430! \u041c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e. \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 HTML-\u043e\u0442\u0432\u0435\u0442\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, <div id=\"app\"><\/div><\/code> \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0443\u0441\u0442. \u042d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0435\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u043f\u043e\u0441\u0435\u0442\u0438\u0442 \u043d\u0430\u0448 \u0441\u0430\u0439\u0442, \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u043f\u0443\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n
      \u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0431\u044d\u043a\u044d\u043d\u0434\u0430. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u044d\u043d\u0434\u0435. \u0421\u0435\u0439\u0447\u0430\u0441 \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043d\u0435\u0433\u043e. \u041d\u0430\u0448\u0435 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0441\u044f \u043e \u0442\u043e\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 #app<\/code> \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u043c \u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u044b\u043c. \u041e\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 App<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435.<\/p>\n
      \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e. \u041d\u0430\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c (\u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u0438\u0439) \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c HTML, \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c React \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f App<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 React \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c (\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043d\u043e\u043f\u043a\u0430 «Increment» \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435).<\/p>\n
      \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f HTML, \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0435\u0439<\/strong> (hydration). \u0424\u0443\u043d\u043a\u0446\u0438\u044f ReactDOM.render()<\/code> \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e, \u0430 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e HTML, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0443\u043b\u044f. \u0414\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e hydrate()<\/code> \u0438\u0437 ReactDOM<\/a>.<\/p>\n
      \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App import { App } from '.\/components\/app';  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0430 \u0435\u0433\u043e \u0432 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 #app ReactDOM.hydrate( <App\/>, document.getElementById( 'app' ) ); <\/code><\/pre>\n
      \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f render()<\/code>, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 HTML \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0434\u0435\u0441\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043d\u0430 \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e HTML \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 HTML \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 App<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0431\u0443\u0434\u0443\u0442 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c<\/strong><\/a>.<\/p>\n
      \u26a0\ufe0f \u0412 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0443\u0436\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f ReactDOM.render()<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c index.dev.js<\/code> \u0438 index.prod.js<\/code> \u0441 \u0432\u044b\u0437\u043e\u0432\u0430\u043c\u0438 render()<\/code> \u0438 hydrate()<\/code> \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 webpack.config.js<\/code> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432\u0445\u043e\u0434\u0430.<\/p>\n
      \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0440\u043e\u0443\u0442\u043e\u0432<\/h2>\n
      \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f — \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 URL \u043f\u0443\u0442\u0435\u0439. \u0422\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 SPA \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u041a\u043e\u0433\u0434\u0430 URL \u043f\u0443\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439, \u0447\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0441\u043c\u0435\u043d\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u043e.<\/p>\n
      \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0442\u043e\u0440 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e React \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u044d\u0442\u043e react-router-dom<\/a>. \u042f \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u043b \u0440\u0430\u0431\u043e\u0442\u0443 React Router v4 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/strong><\/a>, \u043d\u043e \u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u044d\u0442\u043e\u0439<\/strong><\/a> \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 API \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n
      \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430. \u041c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \/<\/code> \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Counter<\/code>, \u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \/post<\/code> \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Post<\/code>. \u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App<\/code> \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u043a\u0435\u0442\u0430 react-router-dom<\/code>.<\/p>\n
      $ npm install -D react-router-dom<\/code><\/pre>\n
      \u0418\u0437 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BrowserRouter<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0430\u043c\u044b\u0439 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Switch<\/a> \u0438 Route<\/a>. \u041c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c App<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 BrowserRouter<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 src\/index.dev.js<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 src\/index.prod.js<\/code>.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ src\\\\components\\\\app\\\\app.component.jsx  import React from 'react'; import { NavLink as Link, Switch, Route } from 'react-router-dom'; \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 import { Counter } from '..\/counter'; import { Post } from '..\/post'; \/\/ \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f export class App extends React.Component {     constructor() {         console.log( 'App.constructor()' );         super();     } \/\/ \u0440\u0435\u043d\u0434\u0435\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f render() {     console.log( 'App.render()' );      return (         &lt;div className='ui-app'&gt;             {\/* navigation *\/}             &lt;div className='ui-app__navigation'&gt;                 &lt;Link                     className='ui-app__navigation__link'                     activeClassName='ui-app__navigation__link--active'                     to='\/'                     exact={ true }                 &gt;Counter&lt;\/Link&gt;                  &lt;Link                     className='ui-app__navigation__link'                     activeClassName='ui-app__navigation__link--active'                     to='\/post'                     exact={ true }                 &gt;Post&lt;\/Link&gt;             &lt;\/div&gt;              &lt;Switch&gt;                 &lt;Route                     path='\/'                     exact={ true }                     render={ () =&gt; &lt;Counter name='Monica Geller'\/&gt; }                 \/&gt;                  &lt;Route                     path='\/post'                     exact={ true }                     component={ Post }                 \/&gt;             &lt;\/Switch&gt;                      &lt;\/div&gt;     ); }  } <\/code><\/pre>\n
      \/\/src\\\\index.dev.js  import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom';  \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App import { App } from '.\/components\/app';  \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App \u0438 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' ReactDOM.render( <BrowserRouter><App\/><\/BrowserRouter>, document.getElementById( 'app' ) ); <\/code><\/pre>\n
      \/\/src\\\\index.prod.js  import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom';  \/\/ import App components import { App } from '.\/components\/app';  \/\/ compile App component in `#app` HTML element ReactDOM.hydrate( <BrowserRouter><App\/><\/BrowserRouter>, document.getElementById( 'app' ) ); <\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0438 \u0432\u0438\u0434\u0436\u0435\u0442 Counter<\/code> (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/em>), \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 URL \u043f\u0443\u0442\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 POST<\/code>, URL \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \/post<\/code> \u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0436\u0435\u0442 Post<\/code> (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/em>).<\/p>\n
      <\/figcaption><\/figure>\n
      \u042d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e BrowserRouter<\/code> \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 URL \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Counter<\/code> \u0438\u043b\u0438 Post<\/code> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0438\u0437 URL. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, BrowserRouter<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u044d\u0442\u043e \u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440<\/strong> \u0438 \u0443 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 URL \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n
      \u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 App<\/code> \u043c\u043e\u0433 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 StaticRouter<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u043e\u043f\u0441 location<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c URL \u043f\u0443\u0442\u0451\u043c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u0430 location<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 req.originalUrl<\/code>, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 Express.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ server\\\\express.js  const express = require( 'express' ); const fs = require( 'fs' ); const path = require( 'path' ); const React = require( 'react' ); const ReactDOMServer = require( 'react-dom\/server' ); const { StaticRouter } = require( 'react-router-dom' ); \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 express \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const app = express(); \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App const { App } = require( '..\/src\/components\/app' );  \/\/ \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 app.get( \/\\.(js|css|map|ico)$\/, express.static( path.resolve( __dirname, '..\/dist' ) ) ); \/\/ \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c 'index.html' app.use( '*', ( req, res ) => { \/\/ \u0447\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b `index.html` let indexHTML = fs.readFileSync( path.resolve( __dirname, '..\/dist\/index.html' ), {     encoding: 'utf8', } );  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c HTML \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 'App' let appHTML = ReactDOMServer.renderToString(     &lt;StaticRouter location={ req.originalUrl }&gt;         &lt;App \/&gt;     &lt;\/StaticRouter&gt; );  \/\/ \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0438\u0437 'appHTML' indexHTML = indexHTML.replace( '&lt;div id=&quot;app&quot;&gt;&lt;\/div&gt;', `&lt;div id=&quot;app&quot;&gt;${ appHTML }&lt;\/div&gt;` );  \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 res.contentType( 'text\/html' ); res.status( 200 );  return res.send( indexHTML );  } ); \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 9000 app.listen( '9000', () => {     console.log( 'Express server started at <http:\/\/localhost:9000>' ); } ); <\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430\u043c http:\/\/localhost:9000<\/code> \u0438 http:\/\/localhost:9000\/post<\/code>, \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u0438\u0437 URL \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e \u0432 StaticRouter<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App<\/code>. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 HTML \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u044d\u0442\u0438\u0445 \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u043e\u0432.<\/p>\n
      <\/figcaption><\/figure>\n
      <\/figcaption><\/figure>\n
      \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u0430\u0448\u0435 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f HTML. \u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n
      \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/h2>\n
      \u042d\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n
      \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Post<\/code> \u0438\u043c\u0435\u0435\u0442 \u0436\u0435\u0441\u0442\u043a\u043e \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 title<\/code> \u0438 description<\/code>, \u043d\u043e \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430. \u042f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c jsonplaceholder.com<\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0437\u0446\u0430 JSON \u043e\u0442\u0432\u0435\u0442\u0430. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Post<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c axios<\/a> \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f AJAX-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n
      $ npm install -S axios<\/code><\/pre>\n
      \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Post<\/code> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 fetchData<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 static<\/strong>, \u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435. \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 fetchData<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 componentDidMount<\/code>. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 title<\/code> \u0438 description<\/code>.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ src\\\\components\\\\post\\\\post.component.jsx  import React from 'react'; import axios from 'axios'; export class Post extends React.Component {     constructor() {         console.log( 'Post.constructor()' );     super();      \/\/ \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430     this.state = {         isLoading: true,         title: '',         description: '',     }; }  \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 static fetchData() {     console.log( 'Post.fetchData()' );     return axios.get( '&lt;https:\/\/jsonplaceholder.typicode.com\/posts\/3&gt;' ).then( response =&gt; {         return {             title: response.data.title,             body: response.data.body,         };     } ); }  \/\/ \u0437\u0430\u0442\u0435\u043c \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 componentDidMount() {     console.log( 'Post.componentDidMount()' );      Post.fetchData().then( data =&gt; {         this.setState( {             isLoading: false,             title: data.title,             description: data.body,         } );     } ); }  render() {     console.log( 'Post.render()' );      return (         &lt;div className='ui-post'&gt;             &lt;p className='ui-post__title'&gt;Post Widget&lt;\/p&gt;              {                 this.state.isLoading ? 'loading...' : (                     &lt;div className='ui-post__body'&gt;                         &lt;p className='ui-post__body__title'&gt;{ this.state.title }&lt;\/p&gt;                         &lt;p className='ui-post__body__description'&gt;{ this.state.description }&lt;\/p&gt;                     &lt;\/div&gt;                 )             }         &lt;\/div&gt;     ); }  } <\/code><\/pre>\n<\/div>\n<\/details>\n
      <\/figcaption><\/figure>\n
      \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u044d\u0442\u043e \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041c\u0435\u0442\u043e\u0434 renderToString() \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 componentDidMount(). \u0422\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u0430\u043c\u043e\u0433\u043e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f — \u044d\u0442\u043e constructor \u0438 render. \u0415\u0441\u043b\u0438 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u044b\u0437\u043e\u0432\u044b \u043b\u044e\u0431\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b.<\/p>\n
      \n
      \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 componentWillMount<\/code>, \u0442\u043e \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u0445\u0443\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u043d \u0432\u044b\u0437\u043e\u0432 setState()<\/code>. \u041c\u0435\u0436\u0434\u0443 \u0442\u0435\u043c, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0442\u0430\u043b \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0432 React v17, \u0438 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u0430 setState()<\/code> \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<\/blockquote>\n
      \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 fetchData<\/code> \u0438\u0437 constructor<\/code> \u0438\u043b\u0438 render<\/code>, \u0442\u043e \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0437-\u0437\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0433\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0430 API \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u043c\u043e\u0433\u043e express.js<\/code> (\u0441\u0435\u0440\u0432\u0435\u0440) \u043f\u0435\u0440\u0435\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435\u043c HTML-\u043e\u0442\u0432\u0435\u0442\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 Post<\/code>.<\/p>\n
      \u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Post<\/code> \u0437\u0430\u0440\u044b\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App<\/code> \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u0441\u043e\u0442\u043d\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043b\u0435\u043f\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f Post<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
      \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 StaticRouter<\/code> \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0417\u0430\u0442\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u043f\u0441 context<\/a>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u0440\u043e\u0443\u0442\u0435\u0440\u043e\u043c. \u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ server\\\\express.js  const express = require( 'express' ); const fs = require( 'fs' ); const path = require( 'path' ); const React = require( 'react' ); const ReactDOMServer = require( 'react-dom\/server' ); const { StaticRouter, matchPath } = require( 'react-router-dom' ); \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 express \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f const app = express(); \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App const { App } = require( '..\/src\/components\/app' ); \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0440\u043e\u0443\u0442\u043e\u0432 const routes = require( '.\/routes' ); \/\/ \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 app.get( \/\\.(js|css|map|ico)$\/, express.static( path.resolve( __dirname, '..\/dist' ) ) ); \/\/ \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c 'index.html' app.use( '*', async ( req, res ) => { \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0440\u043e\u0443\u0442 const matchRoute = routes.find( route =&gt; matchPath( req.originalUrl, route ) );  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0432\u043f\u0430\u0432\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 let componentData = null; if( typeof matchRoute.component.fetchData === 'function' ) {     componentData = await matchRoute.component.fetchData(); }  \/\/ \u0447\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b `index.html` let indexHTML = fs.readFileSync( path.resolve( __dirname, '..\/dist\/index.html' ), {     encoding: 'utf8', } );  \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c HTML \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 'App' let appHTML = ReactDOMServer.renderToString(     &lt;StaticRouter location={ req.originalUrl } context={ componentData }&gt;         &lt;App \/&gt;     &lt;\/StaticRouter&gt; );  \/\/ \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 '#app' \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0438\u0437 'appHTML' indexHTML = indexHTML.replace( '&lt;div id=&quot;app&quot;&gt;&lt;\/div&gt;', `&lt;div id=&quot;app&quot;&gt;${ appHTML }&lt;\/div&gt;` );  \/\/ \u0437\u0430\u0434\u0430\u0451\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 'initial_state' indexHTML = indexHTML.replace(     'var initial_state = null;',     `var initial_state = ${ JSON.stringify( componentData ) };` );  \/\/ \u0437\u0430\u0434\u0430\u0451\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 res.contentType( 'text\/html' ); res.status( 200 );  return res.send( indexHTML );  } ); \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u043f\u043e\u0440\u0442\u0443 9000 app.listen( '9000', () => {     console.log( 'Express server started at <http:\/\/localhost:9000>' ); } ); <\/code><\/pre>\n
      \/\/ server\\\\routes.js  const { Counter } = require( '..\/src\/components\/counter' ); const { Post } = require( '..\/src\/components\/post' );  module.exports = [     {         path: '\/',         exact: true,         component: Counter,     },     {         path: '\/post',         exact: true,         component: Post,     } ]; <\/code><\/pre>\n
      \/\/ src\\\\components\\\\post\\\\post.component.jsx  import React from 'react'; import axios from 'axios';  export class Post extends React.Component {     constructor( props ) {         console.log( 'Post.constructor()' );          super();          \/\/ component state         if( props.staticContext ) {             this.state = {                 isLoading: false,                 title: props.staticContext.title,                 description: props.staticContext.body,             };         } else if( window.initial_state ) {             this.state = {                 isLoading: false,                 title: window.initial_state.title,                 description: window.initial_state.body,             };         } else {             this.state = {                 isLoading: true,                 title: '',                 description: '',             };         }     }      \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445     static fetchData() {         console.log( 'Post.fetchData()' );         return axios.get( '<https:\/\/jsonplaceholder.typicode.com\/posts\/3>' ).then( response => {             return {                 title: response.data.title,                 body: response.data.body,             };         } );     }      \/\/ \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435     componentDidMount() {         if( this.state.isLoading ) {             console.log( 'Post.componentDidMount()' );              Post.fetchData().then( data => {                 this.setState( {                     isLoading: false,                     title: data.title,                     description: data.body,                 } );             } );         }     }      render() {         console.log( 'Post.render()' );          return (             <div className='ui-post'>                 <p className='ui-post__title'>Post Widget<\/p>                  {                     this.state.isLoading ? 'loading...' : (                         <div className='ui-post__body'>                             <p className='ui-post__body__title'>{ this.state.title }<\/p>                             <p className='ui-post__body__description'>{ this.state.description }<\/p>                         <\/div>                     )                 }             <\/div>         );     } } <\/code><\/pre>\n
      \/\/ src\\\\index.html  <html lang='en'> <head>     <meta charset='UTF-8'>     <meta name='viewport' content='width=device-width, initial-scale=1.0'>     <meta http-equiv='X-UA-Compatible' content='ie=edge'>     <title>React Boilerplate \/ Webpack 4 \/ Babel 7<\/title>     <meta name=\"description\" content=\"React boilerplate with Webpack 4 and Babel 7\">     <link rel='icon' href='\/assets\/favicon.ico'>      <!-- initial state -->     <script>         var initial_state = null;     <\/script> <\/head> <body style=\"background-color: #eee;\">     <div id=\"app\"><\/div> <\/body> <\/html> <\/code><\/pre>\n<\/div>\n<\/details>\n
      server\/routes.js<\/code> \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0443\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0451\u043d \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 App<\/code> \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0443\u0442\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430. \u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 server\/express.js<\/code> \u0438 \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 matchPath()<\/a>, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0439 react-router-dom<\/code>.<\/p>\n
      \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430, \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u0435\u0442\u043e\u0434 fetchData<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 component.fetchData()<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0435\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f componentData<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 API, \u0438\u043d\u0430\u0447\u0435 null<\/code>.<\/p>\n
      \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u043f\u0441 context<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 StaticRouter<\/code>, \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 componentData<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0435 \u0432 \u043f\u0440\u043e\u043f\u0441 context<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0438\u0437 \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0441 staticContext<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u043f\u0441 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u043e\u0442 StaticRouter<\/code>, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n
      \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u0438, \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 componentDidMount<\/code> \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 ReactDOM.hydrate()<\/code>.<\/p>\n
      \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 componentDidMount<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u0448\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 HTML, \u0442\u043e \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0437\u0432\u0430\u0442\u044c setState()<\/code> \u0432 componentDidMount<\/code>. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0443\u0445\u043f\u0440\u043e\u0445\u043e\u0434\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/a> (two-pass rendering). \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n
      \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0438 \u0443\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 Post<\/code>. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e — \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 index.html<\/code> \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e componentData<\/code>. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u043c\u044b \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u044b\u0448\u0435.<\/p>\n
      \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u0441\u0435\u0449\u0430\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 http:\/\/localhost:9000\/post<\/a> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434 fetchData()<\/code> \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442), \u0437\u0430\u0442\u0435\u043c \u043e\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u043f\u0441 context<\/code> \u043e\u0442 StaticRouter<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e initial_data<\/code>, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0433 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n
      <\/figcaption><\/figure>\n
      \u0422\u043e, \u0447\u0442\u043e \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0437\u0434\u0435\u0441\u044c, \u044d\u0442\u043e \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0430\u0439\u0441\u0431\u0435\u0440\u0433\u0430. \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0441\u0430\u0439\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 headless \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0440\u043e\u0431\u043e\u0442. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043b\u044e\u0431\u043e\u0439 NPM \u043f\u0430\u043a\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 useragent<\/a> \u0434\u043b\u044f UA sniffing<\/strong><\/a>.<\/p>\n
      \n
      \u0417\u0434\u0435\u0441\u044c<\/a> — \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 JavaScript-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e headless \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Chrome. Puppeteer<\/a> — \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f headless \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Chromium \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f SSR<\/p>\n<\/blockquote>\n
      \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0432 GitHub-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<\/div>\n
       \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/post\/551948\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n
      \n
      \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (SSR), \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 \u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u044f\u0445. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0438\u043d\u0438 React \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 express \u0441\u0435\u0440\u0432\u0435\u0440 (Node.js), \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c SSR.<\/p>\n
      \u041f\u043e\u0447\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c (SPA). \u042f \u0443\u0432\u0435\u0440\u0435\u043d \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0430\u043a\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043a\u0430\u043a Angular<\/strong><\/a>, React<\/strong><\/a>, Vue<\/strong><\/a>, Svelte<\/strong><\/a> \u0438 \u0442.\u0434. \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0434\u044a\u0435\u043c\u0435 \u0438\u0437-\u0437\u0430 \u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c SPA. \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u043e \u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u0435\u0441\u043b\u0438 \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e).<\/p>\n
      \u0414\u043e \u043d\u0435\u0434\u0430\u0432\u043d\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u0430\u0439\u0442\u043e\u0432 HTML \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0433 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0412\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u043b \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e HTML \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435, \u043a\u0440\u043e\u043c\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u043f\u044b\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
      \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0436\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434, \u043f\u043e\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 HTML \u0438 \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0442\u0432\u0435\u0442. \u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439<\/strong>, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0436\u0434\u0430\u0442\u044c \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a JavaScript, CSS, \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0430\u0439\u043b\u044b, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0445 \u0441\u043d\u043e\u0432\u0430 (\u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u043e\u043b\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c). \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
      \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442 \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435. \u0412\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f HTML \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 (\u0431\u0440\u0430\u0443\u0437\u0435\u0440). \u0412\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443, \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f HTML \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong> (\u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439), \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e HTML.<\/p>\n
      \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041c\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c URL \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e History API<\/strong><\/a>, \u0447\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f JavaScript, CSS \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
      \u0414\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a example.com\/<\/code> \u0438\u043b\u0438 example.com\/settings<\/code> (\u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u0432\u0432\u043e\u0434 URL \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435), \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 HTML \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 \u043e\u0442\u0432\u0435\u0442. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 JavaScript \u0447\u0438\u0442\u0430\u0435\u0442 URL-\u0430\u0434\u0440\u0435\u0441 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0432\u0438\u0434\u0438\u0442 \u043f\u0443\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \/<\/code> \u0438\u043b\u0438 \/settings<\/code>, \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438, \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0437\u0430\u0442\u0435\u043c \u0434\u0435\u043b\u0430\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u044b\u0445 \u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 HTML-\u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 SPA \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0438\u0436\u0435.<\/p>\n
      \n\u043a\u043e\u0434<\/summary>\n
      \n
      \/\/ index.html  <html lang=\"en\">     <head>         <meta charset=\"UTF-8\">         <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">         <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">         <title>SPA Application<\/title>         <meta name=\"description\" content=\"My SPA website.\">         <link rel=\"icon\" href=\"\/assets\/favicon.ico\">         <link href=\"styles.css\" rel=\"stylesheet\">     <\/head>      <body>         <div id=\"app\"><\/div>         <script src=\"vendor.js\"><\/script>         <script src=\"main.js\"><\/script>     <\/body> <\/html><\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 HTML, <div id=\"app\"><\/div><\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c<\/strong> \u0438\u043b\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/strong> SPA. \u0412\u0435\u0441\u044c HTML \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043d\u0430\u0448\u0438\u043c JavaScript, \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u044c \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n
      \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 \u0438 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u044f\u0445 SPA.<\/p>\n
      = \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430<\/h3>\n
        \n
      1. \n
        SPA \u0434\u0430\u044e\u0442 \u043e\u043f\u044b\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0441\u044c HTML \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e.<\/p>\n<\/li>\n
      2. \n
        \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a JavaScript \u0438 CSS \u0444\u0430\u0439\u043b\u044b, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043c\u044b \u0441\u0438\u043b\u044c\u043d\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043c \u043d\u0430 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<\/li>\n
      3. \n
        \u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442 (\u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, SPA \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0435\u0442\u0438.<\/p>\n<\/li>\n
      4. \n
        \u0412\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e service worker<\/strong><\/a>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043a \u0441\u0430\u0439\u0442\u0443, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c HTML \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443, \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e «\u041d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0443!», \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u0441\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043e\u0444\u0444\u043b\u0430\u0439\u043d-\u0434\u043e\u0441\u0442\u0443\u043f<\/strong>.<\/p>\n<\/li>\n
      5. \n
        \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c SPA \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043d\u044b \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0434\u0435\u043d\u044c\u0433\u0438 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (Android \u0438\u043b\u0438 iOS), SPA \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0442\u0443 \u0436\u0435 \u0441\u0430\u043c\u0443\u044e \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n
        = \u041f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438<\/h3>\n
          \n
        1. \n
          \u0422\u0430\u043a \u043a\u0430\u043a SPA \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 JavaScript \u0438 CSS \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 (\u043e\u0431\u044b\u0447\u043d\u043e), \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438 (\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442). \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0440\u0438 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0435\u0442\u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SSR.<\/p>\n<\/li>\n
        2. \n
          \u0412 SPA, \u0442\u0430\u043a \u043a\u0430\u043a JavaScript \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, SPA \u0434\u0435\u043b\u0430\u044e\u0442 \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b \u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 SPA \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0432 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u0438 \u0431\u0430\u0442\u0430\u0440\u0435\u0438.<\/p>\n<\/li>\n
        3. \n
          \u0422\u0430\u043a \u043a\u0430\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c (\u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446) \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 HTML, \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0439 \u0434\u0432\u0438\u0436\u043e\u043a<\/strong> \u0432\u0438\u0434\u0438\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u043a\u0430\u043a \u043f\u0443\u0441\u0442\u043e\u0439, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 \u0442\u043e\u043f \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0442\u0440\u0430\u0444\u0438\u043a \u0438 \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ol>\n
          \u0418\u0437 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 SPA \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u044f\u0442 \u0438\u0445 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041d\u0430\u0448\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0435\u0442\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438 \u043b\u0443\u0447\u0448\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u043c.<\/p>\n
          \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0430\u0439\u0442 \u0445\u043e\u0447\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u043f\u043e\u0438\u0441\u043a\u0430. \u041a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e SPA, \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c. \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 (crawler), \u0442\u0430\u043a\u0430\u044f \u043a\u0430\u043a Google, \u0432\u0438\u0434\u0438\u0442 \u043d\u0430\u0448 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442, \u043e\u043d\u0430 \u0432\u0438\u0434\u0438\u0442 HTML \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <div id=\"app\"><\/div><\/code>, \u0442.\u043a. \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0445 \u0440\u043e\u0431\u043e\u0442\u043e\u0432 \u0447\u0438\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e HTML, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0438 \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u0431\u044b \u043d\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0430\u0439\u0442\u0430.<\/p>\n
          \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0445 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043f\u043e\u0438\u0441\u043a\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c? \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e — \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/strong>.<\/p>\n
          \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0432\u044b\u0434\u0435\u043b\u0438\u043b «\u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435», \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043d\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u0438\u0434\u044f\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 HTML, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435.<\/p>\n
          \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438\u043c\u0435\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 HTML \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043a\u0440\u0430\u043d, \u043f\u043e\u043a\u0430 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b. \u041d\u0430\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u043e \u0437\u0430\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n
          \n
          \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442, \u043f\u0440\u043e\u0447\u0442\u0438\u0442\u0435 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>. \u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0436\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b HTML \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u0441\u0435 JavaScript \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 DOMContentLoaded<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0442\u0435\u0433\u0438 <script><\/code> \u0432 HTML \u0438\u043c\u0435\u044e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 defer<\/code>.<\/p>\n<\/blockquote>\n
          \u0422\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f server-side rendering<\/strong> \u0438\u043b\u0438 SSR<\/strong>. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c SSR, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0435\u0433\u043e \u0432 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n
          \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 React \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n
          \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CLI-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a create-react-app<\/strong><\/a>, \u0447\u0442\u043e\u0431\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c React-\u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043b\u0438 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 React boilerplate c GitHub, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Webpack-\u043f\u0440\u043e\u0435\u043a\u0442. \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u044d\u0442\u043e\u043c GitHub \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/strong><\/a>. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0438\u0437 \u043c\u043e\u0435\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/strong><\/a> \u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 React<\/strong>.<\/p>\n
          \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Webpack<\/strong><\/a> \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 React \u0438 ES6 \u0432 JavaScript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel<\/strong><\/a>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SCSS (Sass<\/em>) \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 CSS \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 styles.css<\/code>. \u041d\u0430\u0448\u0435 JavaScript \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 main.js<\/code> \u0438 vendor.js<\/code>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n
          \n\u043a\u043e\u0434<\/summary>\n
          \n
          \/\/ babel.config.js  module.exports = {     presets: ['@babel\/env', '@babel\/react'],     plugins: [         '@babel\/plugin-transform-runtime',         '@babel\/plugin-transform-async-to-generator',         '@babel\/transform-arrow-functions',         '@babel\/proposal-object-rest-spread',         '@babel\/proposal-class-properties'     ] };<\/code><\/pre>\n
          \/\/ package.json  {   \"name\": \"react-ssr\",   \"description\": \"A React server-side rendering (SSR) sample project.\",   \"version\": \"1.0.0\",   \"scripts\": {     \"start\": \"NODE_ENV=development webpack serve\",     \"build\": \"NODE_ENV=production webpack\"   },   \"dependencies\": {     \"react\": \"^17.0.1\",     \"react-dom\": \"^17.0.1\"   },   \"devDependencies\": {     \"@babel\/core\": \"^7.12.9\",     \"@babel\/plugin-proposal-class-properties\": \"^7.12.1\",     \"@babel\/plugin-proposal-object-rest-spread\": \"^7.12.1\",     \"@babel\/plugin-transform-arrow-functions\": \"^7.12.1\",     \"@babel\/plugin-transform-async-to-generator\": \"^7.12.1\",     \"@babel\/plugin-transform-runtime\": \"^7.12.1\",     \"@babel\/preset-env\": \"^7.12.7\",     \"@babel\/preset-react\": \"^7.12.7\",<\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-321399","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=321399"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321399\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=321399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=321399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}