{"id":413528,"date":"2024-06-29T23:11:09","date_gmt":"2024-06-29T23:11:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=413528"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=413528","title":{"rendered":"<span>\u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e WebSocket<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0435\u0430\u043a\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 <a href=\"https:\/\/ru.reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html\" rel=\"nofollow noopener noreferrer\">\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a> (\u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c \u0441 SSR). \u0415\u0441\u043b\u0438 \u0432\u043a\u0440\u0430\u0442\u0446\u0435, \u0442\u043e \u0441\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0445\u0438\u0442\u0440\u044b\u0439 json, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e http, \u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0435\u0433\u043e \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0442\u0443\u0442-\u0442\u043e \u0438 \u0441\u0430\u043c\u043e\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 SSR, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 html \u043a\u043e\u0434). \u0412\u043e\u043e\u0431\u0449\u0435 \u0448\u0442\u0443\u043a\u0430 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u0430\u044f, \u043d\u043e \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430, \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0438\u0437-\u0437\u0430 \u0441\u044b\u0440\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043d\u0430 \u0442\u043e \u044d\u0442\u043e \u0438 \u0434\u0435\u043c\u043a\u0430), \u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 (\u0418\u041c\u0425\u041e)<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u0442\u0430\u043c \u043d\u0438 \u0431\u044b\u043b\u043e \u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e HTTP, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u043e\u0436\u043d\u043e \u0438 \u043f\u043e WebSocket. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435\u0442, \u0434\u0430 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c <a href=\"https:\/\/github.com\/reactjs\/server-components-demo\" rel=\"nofollow noopener noreferrer\">\u0438\u0445 \u0434\u0435\u043c\u043a\u0443<\/a> \u043d\u0430 \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u044b \u043f\u043e\u0442\u0435\u0440\u043f\u0435\u043b\u0430 \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0443\u0436 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043a\u043e\u0434\u0430, \u0434\u0430 \u0438 \u043d\u0435 \u043e\u0445\u043e\u0442\u0430 \u0431\u044b\u043b\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e \u043e\u0431\u0438\u043b\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u0438\u0447\u043d\u0443\u044e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432 \u0440\u0435\u0430\u043b-\u0442\u0430\u0439\u043c\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<blockquote><p><em>\u041a \u0441\u043b\u043e\u0432\u0443, \u043f\u0438\u0441\u0430\u043b \u044f \u0435\u0451 \u0435\u0449\u0435 10 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u0438 \u043a\u0430\u043a-\u0442\u043e \u0437\u0430\u0431\u044b\u043b \u043e\u0431 \u044d\u0442\u043e\u043c. \u041d\u043e \u043d\u0430 \u0434\u043d\u044f\u0445 \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0447\u0442\u043e \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0432\u044b\u0448\u043b\u043e \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e \u0438 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u044e.<\/em><\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"osnovnaya-ideya\">\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043a\u043b\u0438\u0435\u043d\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0414\u0430\u043b\u044c\u0448\u0435, \u043d\u0435\u043a\u0438\u043c \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0435\u0433\u043e, \u0438 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u043a\u0430\u043a \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u043c, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u043c\u0443 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0438 <code>children<\/code>. \u0422\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0438 \u0441\u043d\u043e\u0432\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c<\/p>\n<p>  <\/p>\n<h2 id=\"serializaciya-komponentov\">\u0421\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u2014 \u044d\u0442\u043e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043e\u0442 \u0447\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b, \u043f\u043e \u0441\u0443\u0442\u0438 \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0442\u043e\u043b\u044c\u043a\u043e JSX \u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u0430\u043a \u0438 \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0445\u0443\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e JSX. \u042f \u043d\u0435 \u043f\u0438\u0448\u0443 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442 \u0441\u043b\u043e\u0432\u0430 \u0441\u043e\u0432\u0441\u0435\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u0430\u0436\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0445 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u043d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f. \u041d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0435\u0441\u043b\u0438 \u0438\u0445 \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c (\u044f \u0443\u0434\u0430\u043b\u0438\u043b \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438)<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><strong>\u041f\u0443\u0441\u0442\u043e\u0439 html \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">console.log(&lt;div \/>)  {     $$typeof: Symbol(react.element),     props: {},     type: \"div\" }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>html \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">console.log(&lt;div>habr&lt;div>)  {     $$typeof: Symbol(react.element),     props: { children: 'habr' },     type: \"div\" }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>html \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">console.log(&lt;div>{['habr', 42]}&lt;\/div>)  {     $$typeof: Symbol(react.element),     props: {         children: ['habra', 42]     },     type: \"div\" }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>html \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432\u043d\u0443\u0442\u0440\u0438<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">console.log(&lt;div>&lt;div \/>&lt;\/div>)  {     $$typeof: Symbol(react.element)     props: {         children: {             $$typeof: Symbol(react.element),             props: {},             type: \"div\"         }     },     type: \"div\" }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const Component = () => &lt;div \/> console.log(&lt;Component \/>)  {     $$typeof: Symbol(react.element),     props: {},     type: () => react_1.default.createElement(\"div\", null) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0432 <code>React.memo<\/code><\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const Component = React.memo(() => &lt;div \/>) console.log(&lt;Component \/>)  {     $$typeof: Symbol(react.element),     props: {},     type: {         $$typeof: Symbol(react.memo),         compare: null,         type: () => react_1.default.createElement(\"div\", null)     } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0424\u0440\u0430\u0433\u043c\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">console.log(&lt;>&lt;\/>)  {     $$typeof: Symbol(react.element),     props: {},     type: Symbol(react.fragment) }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p>\u0422\u0430\u043a, \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e <code>type<\/code> \u0438 <code>props<\/code>. \u041d\u043e \u0432\u043e\u0442 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>children<\/code><br \/> \n<ul>\n<li>\u0441\u0442\u0440\u043e\u043a\u0430\/\u0447\u0438\u0441\u043b\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u043e\u043a\u0430\/\u0447\u0438\u0441\u043b\u043e<\/li>\n<li>\u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0440\u043e\u043a\/\u0447\u0438\u0441\u0435\u043b, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u043e\u043a\/\u0447\u0438\u0441\u0435\u043b<\/li>\n<li>\u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0433\u0434\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\/html \u044d\u043b\u0435\u043c\u0435\u043d\u0442<\/li>\n<li>\u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\/html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<\/ul>\n<\/li>\n<li><code>type<\/code><br \/> \n<ul>\n<li>\u0441\u0442\u0440\u043e\u043a\u0430 \u0434\u043b\u044f html \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0445 \u0432 <code>memo<\/code><\/li>\n<li><code>Symbol<\/code> \u0434\u043b\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u044f \u0443\u0434\u0430\u043b\u0438\u043b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043f. \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u043c, \u043f\u043e\u043b\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0433\u0438\u0442\u0445\u0430\u0431\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const decomposeFunctionElement = (Component, props) => {     \/\/ call functional component as function :3     const decomposed = Component(props)      return serializeReactElement(decomposed) }  const serializeChildren = (children) => {     if (children === null || typeof children === 'undefined') {         return null     }      if (!Array.isArray(children)) {         return serializeReactElement(children)     }      return children.map(serializeReactElement) }  const serializeReactElement = (element) => {     \/\/ \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 \u0447\u0438\u0441\u043b\u0430 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0430\u043a \u0435\u0441\u0442\u044c     if (typeof element === 'string' || typeof element === 'number') {         return element     }      const {         type,         props: { children, ...props } = {},     } = element      \/\/ Memo     if (typeof type === 'object') {         return decomposeFunctionElement(type.type, element.props)     }      \/\/ Function     if (typeof type === 'function') {         return decomposeFunctionElement(type, element.props)     }      const serializedChildren = serializeChildren(children)      if (serializedChildren) {         props.children = serializedChildren     }      \/\/ HTML tag     return { type, props } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u044d\u0442\u043e <code>serializeReactElement<\/code>. \u041f\u043e \u0441\u0443\u0442\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0435\u0451 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>type<\/code> \u0438 <code>props<\/code>, \u043d\u043e \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u044f, \u043a\u043e\u0433\u0434\u0430 <code>type<\/code> \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442, \u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 <code>decomposeFunctionElement<\/code>, \u0433\u0434\u0435 \u044f \u0432\u044b\u0437\u044b\u0432\u0430\u044e \u0440\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c &#171;\u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e&#187; \u0435\u0433\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0447\u0438\u0441\u0442\u044b\u0439 JXS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043d\u043e\u0432\u0430 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u044e, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u043f\u043e \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0438. \u0410 \u0441 <code>memo<\/code> \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 \u0442\u0430\u043a\u0436\u0435, \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0435\u0449\u0435 \u043e\u0434\u0438\u043d <code>type<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const Component = ({ title, children }) => (     &lt;div>         &lt;span>{title}&lt;\/span>         {children}     &lt;\/div> )  const jsx = (     &lt;Component title=\"Title\">         &lt;p>Content&lt;\/p>     &lt;\/Component> )  const serialized = serializeReactElement(jsx) console.log(serialized)  {     type: 'div',     props: {         children: [             {                 type: 'span',                 props: {                     children: 'Title',                 },             },             {                 type: 'p',                 props: {                     children: 'Content',                 },             },         ],     }, }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"server\">\u0421\u0435\u0440\u0432\u0435\u0440<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0443\u043c\u0435\u044e \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440. \u0415\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u044f\u043c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0439<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ wss - \u043b\u044e\u0431\u043e\u0439 \u0432\u0435\u0431 \u0441\u043e\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 wss.on('connection', socket => {     socket.on('message', message => {         const { path, props } = JSON.parse(message)          const Component = require(resolve(__dirname, 'example', path)).default         const element = React.createElement(Component, props, Tags.CHILDREN)          socket.send(JSON.stringify({             path,             element: serializeReactElement(element)         }))     }) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 <code>path<\/code> \u2014 \u043f\u0443\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u0438 <code>props<\/code> \u2014 \u043f\u0440\u043e\u043f\u0441\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u042f \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432 \u0440\u0435\u0430\u043a\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>createElement<\/code> \u0441\u043e\u0437\u0434\u0430\u044e \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<h4 id=\"children-v-servernyh-komponentah\">children \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/h4>\n<p>  <\/p>\n<p>\u041d\u043e \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0435 <code>children<\/code>, \u043f\u043e \u0441\u0443\u0442\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u043f\u0441, \u043d\u043e \u0432 <code>createElement<\/code> \u043e\u043d \u0432\u044b\u0434\u0435\u043b\u0435\u043d \u043f\u043e\u0434 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442. \u0410 \u0442\u0430\u043a \u043a\u0430\u043a <code>children<\/code> \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0442\u043e \u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u0433 <code>Tags.CHILDREN<\/code>, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043a\u0430\u043a \u0431\u044b \u0433\u043e\u0432\u043e\u0440\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 &#171;\u0432\u043e\u0442 \u0432 \u044d\u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u043f\u0440\u0438 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u044b \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0438 <code>children<\/code>&#171;<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u0442\u0435\u0433? \u0410 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const CHILDREN = {     type: 'CHILDREN' }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432, \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 <code>CHILDREN<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043e\u0437\u0434\u0430\u043b, \u0438 \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0421 \u0442\u0430\u043a\u0438\u043c \u0442\u0435\u0433\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const Component = ({ children }) => (     &lt;div>{children}&lt;\/div> )  const cmp = React.createElement(Component, {}, Tags.CHILDREN) const serialized = serializeReactElement(cmp)  {     type: 'div',     props: {         children: {             type: 'CHILDREN',         }     }, }<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"klientskie-komponenty-v-servernyh\">\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445<\/h4>\n<p>  <\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445. \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432 \u043c\u0435\u0441\u0442\u0430\u0445 \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439, \u044f \u0447\u0435\u0440\u0435\u0437 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 <code>\u0442\u0435\u0433<\/code> \u0433\u043e\u0432\u043e\u0440\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0443 &#171;\u0432\u043e\u0442 \u0442\u0443\u0442 \u0432\u043e\u0442, \u043f\u0440\u0438 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0435\u0431\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0442\u0430\u043a\u0438\u043c-\u0442\u043e \u0438\u043c\u0435\u043d\u0435\u043c&#187;.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e\u0442 \u0442\u0435\u0433<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const CLIENT_COMPONENT = (path, props) => {     return {         type: 'CLIENT_COMPONENT',         props,         name,     } }  const importClientComponent = (name) => (props) => {     return CLIENT_COMPONENT(name, props) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 <code>import\/require<\/code> \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>importClientComponent<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u043e\u043d \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u0435\u0433 \u0441 \u043d\u0443\u0436\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const ClientComponent = importClientComponent('Counter')  const ServerCompnent = () => {     return (         &lt;div>             &lt;ClientComponent initValue={0} step={2}>         &lt;\/div>     ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u043f\u0440\u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">{     type: 'div',     props: {         children: {             type: 'CLIENT_COMPONENT',             props: {                 initValue: 0,                 step: 2             },             name: 'Counter'         }     }, }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"klient\">\u041a\u043b\u0438\u0435\u043d\u0442<\/h2>\n<p>  <\/p>\n<p>\u0421 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0441\u044f, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0434\u0435\u043b\u043e \u0432 \u0448\u043b\u044f\u043f\u0435. \u041d\u0430\u0447\u043d\u0443 \u0441 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043e\u043d\u0430 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0430\u044f<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const clientComponentsMap = {     Counter: require('.\/Counter.js').default }  const deserializeChildren = (children, clientChildren) => {     if (!children || (Array.isArray(children) &amp;&amp; !children.length)) {         return null     }      if (!Array.isArray(children)) {         return deserializeReactElement(children, clientChildren)     }      return children.map(child => deserializeReactElement(child, clientChildren)) }  const deserializeReactElement = (element, clientChildren = null) => {     if (typeof element === 'string' || typeof element === 'number') {         return element     }      const { type, name, props = {} } = element      if (type === 'CHILDREN') {         return clientChildren     }     if (type === 'CLIENT_COMPONENT' &amp;&amp; name) {         const Component = clientComponentsMap[name]          return createElement(Component, props, deserializeChildren(props.children, clientChildren))     }      return createElement(type, props, deserializeChildren(props.children, clientChildren)) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044e \u0442\u0435\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u0435\u0440\u0432\u0435\u0440: \u0434\u043b\u044f <code>CHILDREN<\/code> \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e <code>children<\/code>, \u0434\u043b\u044f <code>CLIENT_COMPONENT<\/code> \u2014 \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u044e \u0435\u0433\u043e, \u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <code>parcel<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u0438 \u043e\u043d, \u043a\u0430\u043a \u044f \u043f\u043e\u043d\u044f\u043b, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 <code>clientComponentsMap<\/code>, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0438\u043c \u043f\u043e \u0438\u0445 \u0438\u043c\u0435\u043d\u0438.<\/p>\n<p>  <\/p>\n<h4 id=\"import-servernyh-komponentov-v-klientskih\">\u0418\u043c\u043f\u043e\u0440\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445<\/h4>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u043a\u0430\u043a \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 <code>WebSocketProvider<\/code> \u0438 <code>WaitWebSocketOpen<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const ws = new WebSocket('ws:\/\/localhost:3000') \/\/ ...  const ServerComponent = importServerComponent('.\/ServerComponent.js')  &lt;WebSocketProvider value={ws}>     &lt;WaitWebSocketOpen fallback={&lt;h1>Loading...&lt;\/h1>}>         &lt;ServerComponent value=\"some_value\">             Some child         &lt;\/ServerComponent>     &lt;\/WaitWebSocketOpen> &lt;\/WebSocketProvider><\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u043e\u0430\u0434\u0435\u0440\u0430. \u041f\u043e\u043a\u0430 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e. \u0410 \u0441\u0430\u043c \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442<br \/>  \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>importServerComponent<\/code>. \u042d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0438 \u0432\u043e\u0442 \u0435\u0451 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const importServerComponent = (path) => ({ children: clientChildren, ...props } = {}) => {     const [element, setElement] = useState(null)     const ws = useWebSocket()      useEffect(() => {         ws.onComponent(path, (data) => setElement(data.element))     }, [])      useEffect(() => {         ws.send(JSON.stringify({ path, props }))     }, [JSON.stringify(props)])      if (!element) {         return null     }      return element.type \/\/ type is undefined for Fragment and maybe some another         ? deserializeReactElement(element, clientChildren)         : deserializeChildren(element.props.children, clientChildren) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0443\u0442\u044c \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430 \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442, \u0442\u043e \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0435\u0433\u043e<\/p>\n<p>  <\/p>\n<p>\u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0441\u0442\u0430\u043b\u0441\u044f, \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>ws.onComponent<\/code>. \u041e\u043d\u0430 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u043e \u0441\u0443\u0442\u044c \u0435\u0451 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443 \u043d\u0430 <code>onmessage<\/code> \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b. \u041d\u0430 <code>onComponent<\/code> \u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u044e \u043a\u043e\u043b\u043b\u0431\u0435\u043a\u0438 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u0442 \u043c\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430 \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 <code>onmessage<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u044e \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043e\u043b\u043b\u0431\u0435\u043a \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 <code>path<\/code><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">ws.componentsMap = new Map() ws.onComponent = (path, callback) => {     ws.componentsMap.set(path, callback) } ws.onmessage = message => {     const data = JSON.parse(message.data)     const callback = ws.componentsMap.get(data.path)     if (callback) callback(data) }<\/code><\/pre>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p>\u0418 \u0432\u0441\u0451, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0432\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043e\u043d\u0430 \u0434\u0430\u043b\u0435\u043a\u0430 \u043e\u0442 \u0438\u0434\u0435\u0430\u043b\u0430, \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043d\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0442\u043e\u0436\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e<\/p>\n<p>  <\/p>\n<h1 id=\"kak-eto-mozhet-byt-polezno\">\u041a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e?<\/h1>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u0441\u043b\u043e\u044e. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a \u0431\u0434 \u043f\u0440\u044f\u043c \u0432 \u043d\u0435\u043c, \u044f \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0438\u043b \u044d\u0442\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u043e \u0432 \u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c <a href=\"https:\/\/github.com\/RealPeha\/react-websocket-components\/blob\/v3\/server.js#L23\" rel=\"nofollow noopener noreferrer\">\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438<\/a><\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043b\u044e\u0441 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0431\u0430\u043d\u0434\u043b. \u042f\u0440\u043a\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c (\u0434\u0440\u0443\u0433\u0438\u0445 \u044f \u0438 \u043d\u0435 \u043c\u043e\u0433\u0443 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c) \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c <code>marked<\/code> \u0438 <code>sanitize-html<\/code>. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0431\u0430\u043d\u0434\u043b \u043c\u043e\u0435\u0439 \u0434\u0435\u043c\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e markdown \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0435\u0441\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e <code>380 \u041a\u0431<\/code>, \u0430 \u0441 \u2014 <code>130 \u041a\u0431<\/code><\/p>\n<p>  <\/p>\n<p><strong>\u0410 \u0432\u043e\u0442 \u0438 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u043e\u043b\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043a\u043e\u0434\u0430:<\/strong> <a href=\"https:\/\/github.com\/RealPeha\/react-websocket-components\" rel=\"nofollow noopener noreferrer\">react-websocket-components<\/a><br \/>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 <code>npm<\/code>, \u043d\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u043b, \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0447\u0442\u043e \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435<\/p>\n<p>  <\/p>\n<p>\u0410 \u043d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0451, \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u044b\u043b\u0430 \u043a\u043e\u043c\u0443-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f, \u0430 \u043c\u043e\u0436\u0435\u0442 \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f!  <\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/596237\/\"> https:\/\/habr.com\/ru\/articles\/596237\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0413\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0435\u0430\u043a\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 <a href=\"https:\/\/ru.reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html\" rel=\"nofollow noopener noreferrer\">\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a> (\u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c \u0441 SSR). \u0415\u0441\u043b\u0438 \u0432\u043a\u0440\u0430\u0442\u0446\u0435, \u0442\u043e \u0441\u0443\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0445\u0438\u0442\u0440\u044b\u0439 json, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e http, \u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0435\u0433\u043e \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0440\u0435\u0430\u043a\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0442\u0443\u0442-\u0442\u043e \u0438 \u0441\u0430\u043c\u043e\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 SSR, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 html \u043a\u043e\u0434). \u0412\u043e\u043e\u0431\u0449\u0435 \u0448\u0442\u0443\u043a\u0430 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u0430\u044f, \u043d\u043e \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430, \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0438\u0437-\u0437\u0430 \u0441\u044b\u0440\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043d\u0430 \u0442\u043e \u044d\u0442\u043e \u0438 \u0434\u0435\u043c\u043a\u0430), \u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 (\u0418\u041c\u0425\u041e)<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043a\u0430\u043a \u0431\u044b \u0442\u0430\u043c \u043d\u0438 \u0431\u044b\u043b\u043e \u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0441\u044f \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e HTTP, \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u043e\u0436\u043d\u043e \u0438 \u043f\u043e WebSocket. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435\u0442, \u0434\u0430 \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u041f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c <a href=\"https:\/\/github.com\/reactjs\/server-components-demo\" rel=\"nofollow noopener noreferrer\">\u0438\u0445 \u0434\u0435\u043c\u043a\u0443<\/a> \u043d\u0430 \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442\u044b \u043f\u043e\u0442\u0435\u0440\u043f\u0435\u043b\u0430 \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0443\u0436 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u0430\u043c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043a\u043e\u0434\u0430, \u0434\u0430 \u0438 \u043d\u0435 \u043e\u0445\u043e\u0442\u0430 \u0431\u044b\u043b\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0442\u043e \u043e\u0431\u0438\u043b\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043b\u0438\u0447\u043d\u0443\u044e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432 \u0440\u0435\u0430\u043b-\u0442\u0430\u0439\u043c\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0432\u0435\u0431-\u0441\u043e\u043a\u0435\u0442 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e. \u041f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442.<\/p>\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-413528","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413528","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=413528"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/413528\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=413528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=413528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=413528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}