{"id":354485,"date":"2024-05-20T22:49:21","date_gmt":"2024-05-20T22:49:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=354485"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=354485","title":{"rendered":"<span>\u0427\u0442\u043e \u0431\u044b \u044f \u0445\u043e\u0442\u0435\u043b \u0437\u043d\u0430\u0442\u044c \u0434\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 50 000 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/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-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u2013 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u0440\u0430\u0431\u043e\u0442\u044b. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b\u00a0<a href=\"https:\/\/www.mux.com\/blog\/the-building-blocks-of-great-docs\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u0438\u043b\u0438 \u043d\u0430\u0448\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>\u00a0\u0438 \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u0438\u00a0<a href=\"https:\/\/www.mux.com\/blog\/rebranding-during-a-recession\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0431\u0440\u0435\u043d\u0434\u0438\u043d\u0433 Mux<\/a>. \u041f\u043e\u043a\u0430 \u043c\u044b \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c, \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u0432\u0435\u0441\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0430\u0439\u0442\u043e\u0432 <a href=\"https:\/\/www.mux.com\/\" rel=\"noopener noreferrer nofollow\">mux.com<\/a>\u00a0\u0438\u00a0<a href=\"https:\/\/docs.mux.com\/\" rel=\"noopener noreferrer nofollow\">docs.mux.com<\/a>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0430\u043a \u0447\u0442\u043e, \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043c\u043d\u0435\u2026 \u044f \u0437\u043d\u0430\u044e. \u0417\u043d\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0442\u0430\u043a \u0441\u0442\u0440\u0430\u0448\u043d\u043e \u0438, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u043e \u0442\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u0432\u0430\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043f\u043e\u0447\u0435\u043c\u0443, \u043e\u0442\u0432\u0435\u0442\u0438\u0432 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-did-we-get-here\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u0432\u0430\u0436\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#what-are-react-server-components-what-are-they-good-for\" rel=\"noopener noreferrer nofollow\">\u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u0438<\/a>?\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#what-arent-react-server-components-good-for\" rel=\"noopener noreferrer nofollow\">\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u0438<\/a>?\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-do-i-use-react-server-components\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a>,\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-do-i-incrementally-adopt-react-server-components-in-a-real-life-codebase\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u0438\u0445 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c<\/a> \u0438\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#did-someone-say-advanced-patterns\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c? \u0414\u043e\u0447\u0438\u0442\u0430\u0432 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0432\u044b \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c, <a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#so-should-i-use-react-server-components\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043b\u0438 \u0432\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/a>, \u0430 \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u2013 \u0442\u043e \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. <\/p>\n<h2>\u041a\u0430\u043a \u043c\u044b \u043a \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u0438?<\/h2>\n<p>\u0415\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0441\u043c\u044b\u0441\u043b\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u2013 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441 \u044d\u0442\u043e\u0433\u043e \u0438 \u043d\u0430\u0447\u043d\u0451\u043c.<\/p>\n<p>\u0414\u0430\u0432\u043d\u044b\u043c-\u0434\u0430\u0432\u043d\u043e, \u0432 \u0441\u0435\u0434\u043e\u0439 \u0434\u0440\u0435\u0432\u043d\u043e\u0441\u0442\u0438, \u0441\u0430\u0439\u0442\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u043a\u0430\u043a PHP. \u0422\u0430\u043a \u0431\u044b\u043b\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0435\u043a\u0440\u0435\u0442\u043e\u0432. \u041d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0426\u041f, \u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0438 \u043b\u0451\u0433\u043a\u0430\u044f HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5b8\/d5f\/206\/5b8d5f20631c3cfa5a3defefa8bf2ba1.png\" alt=\"\u041a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0451 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 HTML. \u041a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e.\" title=\"\u041a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0451 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 HTML. \u041a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e.\" width=\"721\" height=\"405\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5b8\/d5f\/206\/5b8d5f20631c3cfa5a3defefa8bf2ba1.png\"\/><\/p>\n<div><figcaption>\u041a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0451 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 HTML. \u041a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u00a0<\/p>\n<p>\u0410 \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f: \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u0438 \u0443\u0441\u0438\u043b\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c? <em>\u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435<\/em> \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0440\u0446\u0438\u044e \u043a\u0443\u043a\u0438 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0443? \u0412\u0435\u0441\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 JavaScript \u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442!<\/p>\n<p>\u0422\u0430\u043a\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u00ab\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u00bb (CSR), \u0430 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00bb (SPA), \u0438 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433\u00a0<a href=\"https:\/\/begin.com\/blog\/posts\/2023-02-21-why-does-everyone-suddenly-hate-single-page-apps\" rel=\"noopener noreferrer nofollow\">\u0431\u044b\u043b \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0446\u0435\u043d\u0435\u043d \u0432 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043a\u0440\u0443\u0433\u0430\u0445<\/a>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0430\u043a\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0430, \u0438 \u044d\u0442\u043e \u0434\u043e\u0440\u043e\u0433\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442! \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">create-react-app<\/a>. \u0415\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c (\u0432\u043e\u0437\u044c\u043c\u0451\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u0430\u0448\u0431\u043e\u0440\u0434), \u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c JavaScript? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0435\u043a\u0440\u0435\u0442\u044b? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043c\u0430\u043b\u043e\u043c\u043e\u0449\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u0438\u043b\u0438 \u0443 \u043d\u0438\u0445 \u043f\u043b\u043e\u0445\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c (<a href=\"https:\/\/unctad.org\/topic\/least-developed-countries\/chart-april-2021\" rel=\"noopener noreferrer nofollow\">\u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0442\u0430\u043a \u0438 \u0435\u0441\u0442\u044c<\/a>)?<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/696\/afe\/7c5\/696afe7c5b448b1870fe24d950e1db59.png\" alt=\"\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u043e\u0434 JavaScript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\" title=\"\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u043e\u0434 JavaScript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.\" width=\"725\" height=\"569\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/696\/afe\/7c5\/696afe7c5b448b1870fe24d950e1db59.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u043e\u0434 JavaScript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0432 \u0445\u043e\u0434\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u0434 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u043d\u0438\u0445 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442\u043a\u043b\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/905\/624\/e88\/905624e889eca816acd93f0cbada5ea3.png\" width=\"722\" height=\"503\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/905\/624\/e88\/905624e889eca816acd93f0cbada5ea3.png\"\/><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0432 \u0434\u0435\u043b\u043e \u0432\u0441\u0442\u0443\u043f\u0438\u043b\u0438 \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 (SSR) \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 (SSG). \u0412 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u043a\u0430\u043a\u00a0<a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer nofollow\">Next.js<\/a>\u00a0\u0438\u00a0<a href=\"https:\/\/www.gatsbyjs.com\/\" rel=\"noopener noreferrer nofollow\">Gatsby<\/a>\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 SSR \u0438 SSG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u0434\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 HTML\u00a0<em>\u0438<\/em>\u00a0JavaScript. \u041b\u0443\u0447\u0448\u0435\u0435 \u043e\u0442 \u0434\u0432\u0443\u0445 \u043c\u0438\u0440\u043e\u0432. \u041a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 HTML, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0447\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0417\u0430\u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f JS, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439. \u0411\u043e\u043d\u0443\u0441: \u044d\u0442\u043e\u0442 HTML \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438, \u0447\u0442\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u043a\u0440\u0443\u0442\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0da\/928\/7b6\/0da9287b68fd1e9ee07e3125613e8c00.png\" alt=\"\u041f\u0440\u0438 \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 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u043d\u0438\u0445 \u00ab\u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0438\u0434\u0435\u043d\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b JavaScript \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043c \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0430\u0441\u044c, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435.\" title=\"\u041f\u0440\u0438 \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 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u043d\u0438\u0445 \u00ab\u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0438\u0434\u0435\u043d\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b JavaScript \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043c \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0430\u0441\u044c, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435.\" width=\"675\" height=\"528\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0da\/928\/7b6\/0da9287b68fd1e9ee07e3125613e8c00.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0438 \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 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u043d\u0438\u0445 \u00ab\u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0438\u0434\u0435\u043d\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b JavaScript \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043c \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0430\u0441\u044c, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435.<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/015\/61a\/0ba\/01561a0baf593dba67b534df1abfa43a.png\" alt=\"\u0422\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSR, \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 SSR \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u043e.\" title=\"\u0422\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSR, \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 SSR \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u043e.\" width=\"716\" height=\"499\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/015\/61a\/0ba\/01561a0baf593dba67b534df1abfa43a.png\"\/><\/p>\n<div><figcaption>\u0422\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSR, \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 SSR \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e! \u041d\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 SSR\/SSG \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043c\u044b \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 <em>\u0432\u0435\u0441\u044c JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/em>, \u0438 \u0437\u0434\u0435\u0441\u044c \u043a\u043b\u0438\u0435\u043d\u0442 <em>\u0432\u043d\u043e\u0432\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 <\/em>\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 HTML \u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0432\u0448\u0438\u043c\u0441\u044f JavaScript. (\u041a\u0441\u0442\u0430\u0442\u0438, \u044d\u0442\u043e\u0442 \u0441\u043e\u044e\u0437 \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0435\u043c\u00bb (hydration) \u2014 \u044d\u0442\u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0435\u043c\u0435\u0441\u043b\u0435.) \u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 JavaScript? \u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u0440\u043e\u0441\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0441\u044f?<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438? \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0437\u0430\u0441\u0442\u0440\u044f\u043b\u0430 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0438 \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u0435\u0433\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f. \u0418 \u0432\u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430\u0434\u043e\u0435\u043b\u043e \u0436\u0434\u0430\u0442\u044c. \u0411\u0443\u043c.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React? \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u0438? <\/h2>\n<p>\u041d\u0435\u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e React Server Components (RSC) \u2013 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 React \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u0447\u0442\u043e?\u00bb, \u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u043f\u043e\u0447\u0435\u043c\u0443?\u00bb. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f RSC? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 RSC \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044e\u0442 \u0443 SSR \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 RSC \u0434\u043b\u044f \u043d\u0430\u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u0434: \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f\u00a0<em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043a\u0430\u043a \u0432 \u0441\u0442\u0430\u0440\u044b\u0435 \u0434\u043e\u0431\u0440\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 PHP), \u0430 \u0447\u0442\u043e \u2013 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043a\u0430\u043a SSR). \u0422\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u0434, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u044b\u043b\u0430\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 JavaScript \u2013 \u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b (\u0431\u0430\u043d\u0434\u043b\u044b), \u0438 \u043f\u0440\u0438 \u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u044b. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/254\/6e4\/5ce\/2546e45ce8c17d0fa60ace12e11e82a2.png\" alt=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u0437\u0435\u043b\u0451\u043d\u044b\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (\u0441\u0438\u043d\u0438\u0435) \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\" title=\"\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u0437\u0435\u043b\u0451\u043d\u044b\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (\u0441\u0438\u043d\u0438\u0435) \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.\" width=\"722\" height=\"441\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/254\/6e4\/5ce\/2546e45ce8c17d0fa60ace12e11e82a2.png\"\/><\/p>\n<div><figcaption>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u0437\u0435\u043b\u0451\u043d\u044b\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (\u0441\u0438\u043d\u0438\u0435) \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e RSC-\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 <em>\u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/em>. \u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442\u00a0<em>\u043f\u043e\u0442\u043e\u043a\u043e\u043c<\/em>\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0441\u0440\u0430\u0437\u0443 \u0432 \u0434\u0432\u0443\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c React \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u0443\u0434\u0438\u0442\u044c. \u0412\u0435\u0434\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u2026 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 node \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0441\u0435 \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0438 \u043b\u044e\u0431\u0438\u043c. \u0412\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 user \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 movie \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u0438\u043b\u044c\u043c\u0435 \u0438 \u043f\u0440. \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043d\u0438 \u043a \u043a\u0430\u043a\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c \u0438\u043b\u0438\u00a0<a href=\"https:\/\/react.dev\/reference\/react\/useEffect#fetching-data-with-effects\" rel=\"noopener noreferrer nofollow\">useEffect<\/a> \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (<a href=\"https:\/\/tanstack.com\/query\/v3\/\" rel=\"noopener noreferrer nofollow\">react-query<\/a>, \u044f \u0442\u0435\u0431\u044f \u043d\u0435 \u0440\u0430\u0437\u043b\u044e\u0431\u0438\u043b), \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/get-server-side-props\" rel=\"noopener noreferrer nofollow\">getServerSideProps<\/a>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u0431\u0443\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c.<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0442\u0430\u043a \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0432\u044b\u0448\u0435. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445? \u041d\u0435\u0437\u0430\u0447\u0435\u043c \u0436\u0434\u0430\u0442\u044c: \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0422\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/855\/3a5\/c2f\/8553a5c2fc286407bbe7f32c835f2c46.png\" alt=\"\u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432 \u2013 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u0442\u043e\u043a\u0430.\" title=\"\u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432 \u2013 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u0442\u043e\u043a\u0430.\" width=\"713\" height=\"441\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/855\/3a5\/c2f\/8553a5c2fc286407bbe7f32c835f2c46.png\"\/><\/p>\n<div><figcaption>\u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432 \u2013 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u0442\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0437\u0430\u043a\u0443\u0441\u043a\u0443: \u0430 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u043b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0444\u043e\u0440\u043c\u0443)? \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u043c\u043e. \u041a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2013 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u043d\u0443\u0436\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u0441\u044b\u043b\u0430\u043b \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. <em>\u0427\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438<\/em> \u0442\u0430\u043a\u0430\u044f \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a React Server Components \u2014 \u044d\u0442\u043e\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/server-actions#actions\" rel=\"noopener noreferrer nofollow\">React Actions<\/a>\u00a0\u2014 \u043d\u043e \u043e\u0431\u0435 \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0435, \u0438 \u043e\u043d\u0438 \u0442\u0435\u0441\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u044b. \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 React Actions. \u041f\u0440\u0438\u0431\u0435\u0440\u0435\u0433\u0443 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-actions\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u0432 \u0431\u043b\u043e\u0433\u0435.<\/a><\/p>\n<h2>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0445\u043e\u0440\u043e\u0448\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React? <\/h2>\n<p>\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0415\u0441\u043b\u0438 RSC \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0443\u0447\u0448\u0435 CSR \u0438 SSR, \u0442\u043e <em>\u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b<\/em>\u00a0\u0438\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f? \u042f \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0442\u0435\u043c \u0436\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0438 \u043d\u0430 \u0433\u043e\u0440\u044c\u043a\u043e\u043c \u043e\u043f\u044b\u0442\u0435 (\u043a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430) \u0443\u0431\u0435\u0434\u0438\u043b\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041f\u0440\u0438\u0447\u0451\u043c, \u043d\u0435\u043c\u0430\u043b\u043e. \u0412\u043e\u0442 \u0442\u0440\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React.<\/p>\n<h2>CSS-in-JS &#8212; \u043d\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u043d\u0430\u0447\u0430\u043b\u043e<\/h2>\n<p>\u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043d\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 CSS-\u0432-JS\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/upgrading\/app-router-migration#step-7-styling\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/a>. \u042d\u0442\u043e \u0431\u043e\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0441 <a href=\"https:\/\/styled-components.com\/\" rel=\"noopener noreferrer nofollow\">styled-components<\/a>\u00a0\u043d\u0430\u00a0<a href=\"https:\/\/tailwindcss.com\/\" rel=\"noopener noreferrer nofollow\">Tailwind CSS<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u043c \u043a\u0440\u0443\u043f\u043d\u044b\u043c \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0435\u043c \u0432 \u0445\u043e\u0434\u0435 \u043d\u0430\u0448\u0435\u0439 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 RSC, \u043f\u0440\u0430\u0432\u0434\u0430,\u00a0<a href=\"https:\/\/www.mux.com\/blog\/the-building-blocks-of-great-docs#tailwind-css\" rel=\"noopener noreferrer nofollow\">\u043c\u044b \u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u0430 \u043c\u043e\u0440\u043e\u043a\u0430 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0438\u043b\u0438\u0439<\/a>.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043f\u043e\u0448\u043b\u0438 \u0432\u0430-\u0431\u0430\u043d\u043a \u0438 \u0432\u0441\u0451 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432 \u0432\u0438\u0434\u0435 CSS-\u0432-JS, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043b\u043e\u0442\u043d\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0427\u0442\u043e \u0436, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0448\u0435, \u043f\u0440\u0430\u0432\u0434\u0430?<\/p>\n<h2>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 React \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a\u00a0<a href=\"https:\/\/react.dev\/learn\/passing-data-deeply-with-context\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 React<\/a>\u00a0<a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#rendering-third-party-context-providers-in-server-components\" rel=\"noopener noreferrer nofollow\"><em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em>\u00a0\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u2013 \u0442\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u0441\u0442\u0430\u0440\u044b\u043c \u0434\u043e\u0431\u0440\u044b\u043c <a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#sharing-data-between-server-components\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0434\u0443\u043b\u044f\u043c<\/a>.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u044e\u0440\u043f\u0440\u0438\u0437: \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 <em>\u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430<\/em> \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React, \u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438. (\u0415\u0441\u043b\u0438 \u044f \u043d\u0435\u043f\u0440\u0430\u0432, \u0438 \u043e\u043d \u0435\u0441\u0442\u044c \u0433\u0434\u0435-\u0442\u043e \u0435\u0449\u0451 \u2013 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u043c\u0435\u043d\u044f. \u041c\u043d\u0435 \u0435\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442.)<\/p>\n<p>\u041d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0422\u0435 \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React, \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e, \u0438 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0448\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0queryString\u00a0\u0438\u00a0isOpen, \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041d\u043e \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u043e\u0432\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u0441\u0451 \u0432\u044b\u0448\u043b\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u0423 \u043d\u0430\u0441 \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u043e\u0432\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0435\u0441\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u0433\u0434\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0435\u043c\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043d\u0430\u0434 \u00ab\u043f\u043e\u0434\u0432\u0430\u043b\u043e\u043c\u00bb \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u043b\u0436\u0435\u043d \u00ab\u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c\u00bb, \u0447\u0442\u043e \u043e\u043d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0437\u0435\u043b\u0451\u043d\u043e\u043c \u0444\u043e\u043d\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043d\u0451\u043c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0451\u043c\u043d\u043e-\u0437\u0435\u043b\u0451\u043d\u0430\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0442\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a Context, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0441 Server Components, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f Context \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041c\u044b \u043d\u0430\u0448\u043b\u0438 \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043c\u0430\u043d\u0435\u0432\u0440, \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u043e \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0432 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\" rel=\"noopener noreferrer nofollow\">\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS<\/a>\u00a0(\u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0442\u0430\u043a \u0434\u0430\u0436\u0435 \u043b\u0443\u0447\u0448\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u0432 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445). \u041d\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u0432\u0435\u0437\u043b\u043e \u043c\u0435\u043d\u044c\u0448\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ede\/939\/005\/ede939005e9c8e238990fa9cb2529970.png\" alt=\"\u0421 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0435\u043b\u0451\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u041c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 React Context \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.\" title=\"\u0421 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0435\u043b\u0451\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u041c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 React Context \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.\" width=\"723\" height=\"205\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ede\/939\/005\/ede939005e9c8e238990fa9cb2529970.png\"\/><\/p>\n<div><figcaption>\u0421 \u043a\u0430\u0436\u0434\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0432 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0435\u043b\u0451\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u041c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 React Context \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438.<\/figcaption><\/div>\n<\/figure>\n<h2>\u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u043b\u043e\u0436\u043d\u043e \u0443\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u0432\u0441\u0451 \u0441\u0440\u0430\u0437\u0443<\/h2>\n<p>\u041d\u0430 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 RSC \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0442\u043e\u043c\u0443, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0448 \u043a\u043e\u0434, \u0438 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. <strong>\u041d\u043e \u0441 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c<\/strong>. \u041d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e <a href=\"https:\/\/www.joelonsoftware.com\/2002\/11\/11\/the-law-of-leaky-abstractions\/\" rel=\"noopener noreferrer nofollow\">\u0435\u0451 \u0437\u0430\u043c\u0430\u0437\u0430\u0442\u044c<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432 \u043d\u0435\u0439 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0430 \u0434\u0430\u043b\u0435\u0435 \u0438\u043c\u0435\u0442\u044c \u0441 \u043d\u0435\u044e \u0434\u0435\u043b\u043e \u0438 \u043d\u0430\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u0435\u0451 \u0434\u0440\u0443\u0433\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c.<\/p>\n<p>\u0412\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u043b\u0438 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0430\u0448\u0435\u0439 \u0431\u0430\u0437\u043e\u0439 \u043a\u043e\u0434\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: \u00ab\u0427\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435?\u00bb, \u00ab\u0427\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435?\u00bb. \u041a\u0430\u0436\u0434\u043e\u043c\u0443 PR-\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0443 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043e \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u0430\u044f-\u043b\u0438\u0431\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0435\u0437 \u043d\u0443\u0436\u0434\u044b\/\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u042f \u0447\u0430\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u0432 \u043c\u043e\u0439 \u043a\u043e\u0434 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u0433\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041f\u0440\u0438\u0447\u0451\u043c, \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043c\u0435\u043d\u044f \u0437\u0430\u0433\u043e\u0432\u0430\u0440\u0438\u0432\u0430\u0442\u044c \u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/caching\" rel=\"noopener noreferrer nofollow\">\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/a>.<\/p>\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0443\u0435\u0448\u044c\u0441\u044f \u0438 \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0448\u044c \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0436\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c. \u041a\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React? \u041a\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e? \u041a\u0430\u043a \u043c\u044b \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u0441 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u0435\u0449\u0430\u043c\u0438, <em>\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f<\/em> \u043d\u0435\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u044c\u0435\u0432 \u0441\u043f\u0430\u0433\u0435\u0442\u0442\u0438-\u043a\u043e\u0434\u0430? <\/p>\n<h2>\u041a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React? <\/h2>\n<p>\u0412\u0430\u043c \u0435\u0449\u0451 \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e? \u0421\u0447\u0438\u0442\u0430\u0435\u0442\u0435, \u0438\u0433\u0440\u0430 \u0441\u0442\u043e\u0438\u0442 \u0441\u0432\u0435\u0447? \u0427\u0442\u043e \u0436, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0434\u0435\u043b\u0443 \u0438 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0441\u0430\u043c\u044b\u0445 \u043e\u0441\u043d\u043e\u0432.<\/p>\n<blockquote>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f RSC, \u0433\u043e\u0442\u043e\u0432\u0430\u044f \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435. \u042d\u0442\u043e \u043d\u043e\u0432\u0430\u044f <a href=\"https:\/\/nextjs.org\/docs\/app\" rel=\"noopener noreferrer nofollow\">app directory<\/a> \u0438\u0437 Next.js 13. <em>\u041c\u043e\u0436\u043d\u043e<\/em>\u00a0\u0432\u044b\u043a\u0430\u0442\u0438\u0442\u044c \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a RSC, \u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0437 \u0442\u0435\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c\u0438 \u0434\u0435\u043b\u0430\u043c\u0438, \u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0431\u044b \u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0445 \u043d\u0438\u0436\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u0439 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b \u0434\u043b\u044f Next.js.<\/p>\n<\/blockquote>\n<h2>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0442\u0430\u043a \u043b\u0435\u0433\u043a\u043e, \u0437\u0430\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0432\u0435\u0437\u043b\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0432 \u043d\u043e\u0432\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <a href=\"https:\/\/nextjs.org\/docs\/app\" rel=\"noopener noreferrer nofollow\">app directory<\/a>, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u043e\u043c \u0432 Next.js 13, \u0431\u0443\u0434\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0438\u043a\u0430\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0434\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<pre><code class=\"javascript\">function Description() {    return (     &lt;p>       \u041d\u0438\u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0422\u043e\u043b\u044c\u043a\u043e HTML!     &lt;\/p>   ) }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u044d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c async \u2013 \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445! \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0432\u044b\u0431\u043e\u0440\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<pre><code class=\"javascript\">async function getVideo(id) {   const res = await fetch(`https:\/\/api.example.com\/videos\/${id}`)   return res.json() }  async function Description({ videoId }) {   const video = await getVideo(userId)   return &lt;p>{video.description}&lt;\/p> }<\/code><\/pre>\n<p>\u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0438\u043d\u0433\u0440\u0435\u0434\u0438\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u0432\u0441\u044e \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u044c. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0438\u0434\u0435\u0442\u044c \u0438 \u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0430\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u00a0React.Suspense. React \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0437\u0435\u0440\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0430 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441 \u0432\u044b\u0431\u043e\u0440\u043a\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u043e\u043d \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u043c\u043e\u0436\u0435\u0442 \u0443\u0431\u0440\u0430\u0442\u044c \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0437\u0430\u043c\u0435\u043d\u0438\u0432 \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>\u0412 \u043d\u0438\u0436\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u043d\u044b \u043d\u0430\u0434\u043f\u0438\u0441\u0438 \u201cloading comments\u201d (\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432) \u0438 \u201cloading related videos.\u201d (\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0432\u0438\u0434\u0435\u043e). \u041a\u043e\u0433\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0441 \u0432\u044b\u0431\u043e\u0440\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043e\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &lt;Comments \/>\u00a0\u0438 \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0438 \u0441\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u0435\u043e.<\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0432\u044b\u0431\u043e\u0440\u043a\u043e\u0439 \u0438 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<pre><code class=\"javascript\">import { Suspense }  from 'react'  async function VideoSidebar({ videoId }) {   return (     &lt;Suspense fallback={&lt;p>loading comments...&lt;\/p>}>       &lt;Comments videoId={videoId} \/>     &lt;\/Suspense>     &lt;Suspense fallback={&lt;p>loading related videos...&lt;\/p>}>       &lt;RelatedVideos videoId={videoId} \/>     &lt;\/Suspense>   ) }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u00a0React.Suspense\u00a0\u0432\u044b\u0433\u043e\u0434\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e \u043c\u0435\u0440\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. React \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 Suspense \u0434\u043b\u044f \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u0432 \u2013 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e (\u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f) \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c. \u0422\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u0451\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u043f\u0438\u0442\u043a\u043e\u0439\u00bb, \u043d\u043e \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u0442\u0435\u043c\u044b, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043b\u0443\u0447\u0448\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c <a href=\"https:\/\/www.youtube.com\/watch?v=Q98l5o1y3ao\" rel=\"noopener noreferrer nofollow\">\u044d\u043a\u0441\u043f\u0435\u0440\u0442\u0430\u043c<\/a>.<\/p>\n<h2>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c onClick, \u043b\u0438\u0431\u043e \u0432\u044b \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442\u0435 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0435, \u0441\u043e\u0445\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0435 \u0432\u00a0useState.<\/p>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0439: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0\u201cuse client\u201d\u00a0\u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0444\u0430\u0439\u043b\u0430, \u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<p>\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<pre><code class=\"javascript\">\"use client\" import { useState } from 'react'  function Counter() {   const [count, setCount] = useState(0)   const increment = () => setCount(count + 1)    return (     &lt;button onClick={increment}>       The count is {count}     &lt;\/button>   ) }<\/code><\/pre>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u2014\u00a0<em>\u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/em>\u00a0\u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a\u00a0\u201cuse client\u201d, \u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u043e \u0438 <em>\u0432\u0441\u0435\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442<\/em>.<\/p>\n<p>(\u041e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430? \u041d\u0435\u0442, \u043d\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u043d\u043e \u0442\u0443\u0442 \u0432\u0441\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0436\u043d\u043e. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.)<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:\u00a0\u201cuse client\u201d\u00a0\u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0449\u0438\u043a\u0443 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e <em>\u0437\u0434\u0435\u0441\u044c<\/em>\u00a0\u0438 \u043f\u0440\u043e\u043b\u0435\u0433\u0430\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a \u043d\u0435 \u043f\u0440\u043e\u0449\u0435, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u044d\u0442\u043e\u0442 \u0442\u0435\u0437\u0438\u0441.<\/p>\n<h2>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/h2>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0438\u0437 \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b\u00a0\u201cuse client\u201d. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0435\u0451 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2013 \u0438 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c.<\/p>\n<p>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<pre><code class=\"javascript\">\"use client\"  \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043a\u0430\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \/\/ \u043e\u043d\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 import MuxPlayer from \"@mux\/mux-player-react\"  function ClientMuxPlayer(props) {   return &lt;MuxPlayer {...props} \/> }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f96\/dec\/4b7\/f96dec4b763b353c16261c5e5103cbf5.png\" alt=\"\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0451 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\" title=\"\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0451 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.\" width=\"455\" height=\"374\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f96\/dec\/4b7\/f96dec4b763b353c16261c5e5103cbf5.png\"\/><\/p>\n<div><figcaption>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0451 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/figcaption><\/div>\n<\/figure>\n<h2>\u0412 \u043a\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445?<\/h2>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0437\u0430\u0434 \u0438 \u043f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c.<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2013 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u043d\u0438\u0439 \u043a\u0440\u0430\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 React. \u0421 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u0442\u0440\u0430\u0442\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0431\u043b\u043e\u0433\u0435 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432 \u0431\u043b\u043e\u043a\u0435 \u043a\u043e\u0434\u0430. \u0412 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u0434 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u0441 \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2013 \u044d\u0442\u043e \u0442\u043e\u0442 React, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0438 \u043b\u044e\u0431\u0438\u043c. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0432\u0432\u043e\u0434 \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c\u0438 SSR-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0438\u043a\u0442\u043e \u0432\u0430\u0441 \u043d\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b! \u0412\u043d\u0435\u0434\u0440\u044f\u0439\u0442\u0435 \u0438\u0445 \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0442\u0435\u0445 \u0443\u0447\u0430\u0441\u0442\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u0435\u0441\u0443\u0442 \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u0443. \u0410, \u0435\u0441\u043b\u0438 \u0443\u0436 \u0437\u0430\u0448\u043b\u0430 \u0440\u0435\u0447\u044c \u043e \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u043c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438\u2026 <\/p>\n<h2>\u041a\u0430\u043a \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0447\u0435\u0439 \u0431\u0430\u0437\u0435 \u043a\u043e\u0434\u0430?<\/h2>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0430\u043a\u0442\u0435 \u0434\u0440\u0430\u043c\u044b \u0438\u0437 \u0437\u0430\u043b\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043b\u044b\u0448\u0438\u0442\u0441\u044f: \u00ab\u041a\u0440\u0430\u0441\u0438\u0432\u043e! \u041d\u043e, \u043f\u043e-\u0432\u0438\u0434\u0438\u043c\u043e\u043c\u0443, \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u0440\u0430\u0431\u043e\u0442\u044b, \u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0431\u0430\u0437\u0443 \u043a\u043e\u0434\u0430\u00bb. \u0427\u0442\u043e \u0436, \u043c\u043e\u0433\u0443 \u0432\u0430\u0441 \u0437\u0430\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0412\u043e\u0442 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432 \u0442\u0440\u0438 \u0448\u0430\u0433\u0430 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:<\/p>\n<ol>\n<li>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c  \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443\u00a0\u201cuse client\u201d\u00a0\u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0438\u0437\u043a\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e <\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435      \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b <\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u0448\u0430\u0433\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h2>1. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 &#171;use client&#187; \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0412 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u0432\u043e\u0442 \u0438 \u0432\u0441\u0451. \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 Next.js 13, \u0442\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f page.tsx, \u0438 \u0442\u0430\u043c \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435\u00a0\u201cuse client\u201d. \u0412\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0435\u0451 \u0432 \u043c\u0438\u0440 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432!\u00a0<\/p>\n<pre><code class=\"javascript\">video\/page.jsx  \"use client\"  export default function App() {   &lt;>     &lt;Player \/>     &lt;Title \/>   &lt;\/> }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c13\/45d\/29b\/c1345d29b748d47290ae2c250362dfe8.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u201cuse client\u201d \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0435 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u201cuse client\u201d \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0435 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \" width=\"450\" height=\"253\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c13\/45d\/29b\/c1345d29b748d47290ae2c250362dfe8.png\"\/><\/p>\n<div><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u201cuse client\u201d \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0435 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0442\u043e\u0447\u043d\u043e \u043a\u0430\u043a SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. <\/figcaption><\/div>\n<\/figure>\n<p>\u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430? \u0418\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">video\/page.jsx  \/**   * \u0412\u0441\u0451, \u0447\u0442\u043e \u043c\u044b \u0442\u0443\u0442 \u0434\u0435\u043b\u0430\u0435\u043c \u2013 \u044d\u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430   * \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442   *\/ import VideoPageClient from '.\/page.client.jsx'  \/\/ \u0440\u0430\u043d\u044c\u0448\u0435 \u044d\u0442\u043e \u0431\u044b\u043b getServerSideProps async function fetchData() {   const res = await fetch('https:\/\/api.example.com')   return await res.json() }  export default async function FetchData() {   const data = await fetchData()   {\/* \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0432 \u044d\u0442\u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 *\/}   const &lt;VideoPageClient data={data} \/> }  export default Page <\/code><\/pre>\n<pre><code class=\"javascript\">video\/page.client.jsx  \/**   * \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u0435\u0442 \u0436\u0438\u0442\u044c \u0432\u0441\u0451 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a\u0440\u043e\u043c\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.   *\/ \"use client\"  export default function App({ data }) {   &lt;>     &lt;Player videoId={data.videoId} \/>     &lt;Title content={data.title} \/>   &lt;\/> } <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/253\/d18\/ef0\/253d18ef091654d9aaf2515c14658021.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u00a0\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u00a0\" width=\"446\" height=\"376\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/253\/d18\/ef0\/253d18ef091654d9aaf2515c14658021.png\"\/><\/p>\n<div><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0434\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u00a0<\/figcaption><\/div>\n<\/figure>\n<h2>2. \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u044d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a \u043a\u043e\u0440\u043d\u044e \u0434\u0435\u0440\u0435\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e<\/h2>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0431\u0435\u0440\u0451\u043c \u044d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443\u00a0\u201cuse client\u201d\u00a0\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0437 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u00a0&lt;Client \/>\u00a0\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b\u00a0&lt;Player \/>\u00a0\u0438\u00a0&lt;Title \/>.<\/p>\n<pre><code class=\"javascript\">video\/Player.jsx  \"use client\" import MuxPlayer from \"@mux\/mux-player-react\"  function Player({ videoId }) {   return &lt;MuxPlayer streamType=\"on-demand\" playbackId={videoId} \/> } <\/code><\/pre>\n<pre><code class=\"javascript\">video\/Title.jsx  \"use client\"  function Title({ content }) {   return &lt;h1>{content}&lt;\/h1> } <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8f0\/87b\/32f\/8f087b32f5510be5702a070c6f7927a3.png\" alt=\"\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u201cuse client\u201d \u0435\u0449\u0451 \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\" title=\"\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u201cuse client\u201d \u0435\u0449\u0451 \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\" width=\"441\" height=\"371\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8f0\/87b\/32f\/8f087b32f5510be5702a070c6f7927a3.png\"\/><\/p>\n<div><figcaption>\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u201cuse client\u201d \u0435\u0449\u0451 \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c! \u041f\u0440\u0430\u0432\u0434\u0430\u2026 \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0438 \u0443\u00a0&lt;Player \/>,\u00a0\u043d\u0438 \u0443\u00a0&lt;Title \/>\u00a0\u043d\u0435\u0442 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u201cuse client\u201d, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0438\u0445!<\/p>\n<p>\u0421 &lt;Title \/>\u00a0\u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u043b\u044f\u00a0&lt;Title \/>\u00a0\u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0442\u043e\u0433\u043e HTML. \u0422\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c,\u00a0&lt;Player \/>\u00a0\u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f9c\/cba\/29e\/f9ccba29ed6230e8eae76d7f218743d8.png\" alt=\"\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Player \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u201cuse client\u201d.\" title=\"\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Player \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u201cuse client\u201d.\" width=\"725\" height=\"458\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f9c\/cba\/29e\/f9ccba29ed6230e8eae76d7f218743d8.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Player \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u043c\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u201cuse client\u201d.<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e. \u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0438\u0436\u0435 \u0443\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0439\u0442\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u00a0\u201cuse client\u201d\u00a0\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435\u00a0&lt;Player \/>, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u043e\u0448\u0438\u0431\u043a\u0443, \u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u0434\u0435\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5f4\/25c\/db6\/5f425cdb6684c024228fc388cd0cac51.png\" alt=\"\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" title=\"\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\" width=\"439\" height=\"375\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f4\/25c\/db6\/5f425cdb6684c024228fc388cd0cac51.png\"\/><\/p>\n<div><figcaption>\u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0438\u0434\u0438\u0442\u0435? \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0442\u0430\u043a \u043f\u043b\u043e\u0445\u043e. \u041c\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0435\u043f\u0435\u0440\u044c, \u043f\u043e \u043c\u0435\u0440\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0430\u0440\u044b\u0445, \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u0435\u0440\u0436\u0430 \u0432 \u0443\u043c\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0436\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043f\u0430\u043a\u0435\u0442, \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432 \u043d\u0435\u0433\u043e &lt;Title \/>\u00a0!<\/p>\n<h2>3. \u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b<\/h2>\n<p>\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 1 \u0438 2. \u041d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0436\u0430\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437 \u0432\u0430\u0448\u0435\u0433\u043e RSC-\u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f. <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b\u00a0<a href=\"https:\/\/www.mux.com\/blog\/the-building-blocks-of-great-docs\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043b\u0438 \u043d\u0430 RSC \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439<\/a>, \u043c\u044b \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0432\u0443\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u043e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 Suspense, \u0447\u0442\u043e\u0431\u044b \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0442\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b\u0431\u043e\u0440\u043a\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0434\u0451\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e (\u043a\u0430\u043a \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0432\u044b\u0448\u0435). \u0412\u0441\u0451 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435 (\u043a\u0440\u043e\u043c\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u2013 \u0436\u0443\u0440\u043d\u0430\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u0431\u043e\u0433\u043e\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0435\u0433\u043e \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Content_management_system\" rel=\"noopener noreferrer nofollow\">CMS<\/a>). \u041e\u0431\u0451\u0440\u0442\u044b\u0432\u0430\u044f \u044d\u0442\u0443 \u0431\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0432\u00a0Suspense, \u043c\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c: \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u043a\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u0441\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 CMS. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435\u043c, \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0432 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/routing\/loading-ui-and-streaming\" rel=\"noopener noreferrer nofollow\">loading.js<\/a> \u0438\u0437 Next.js 13: \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f Suspense \u0438 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0430\u0441\u044c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c: \u043c\u044b \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0430\u043c\u044b\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043d\u0430\u0448\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2013 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<a href=\"https:\/\/prismjs.com\/\" rel=\"noopener noreferrer nofollow\">Prism<\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430. \u0410 \u0435\u0441\u043b\u0438 \u0443\u0436 \u0440\u0435\u0447\u044c \u0437\u0430\u0448\u043b\u0430 \u043e \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\u2026 <\/p>\n<h2>\u0412\u044b \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u043b\u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b?<\/h2>\n<p>\u041a\u0430\u043a \u0436\u0435 \u0432\u0430\u043c \u0443\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/p>\n<p>\u0412\u044b\u0448\u0435 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441\u0430\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0422\u0430\u043a \u043a\u0430\u043a \u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e? \u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e,<strong>\u00a0\u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u044b, \u0430 \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0445.<\/strong>\u00a0\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0432\u0430\u0448 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. <\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0432\u043e \u0432\u0441\u0435\u0439 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u0435 \u0441 RSC \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u0451\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0443\u043b\u043e\u0436\u0438\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435. \u041d\u043e \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0435\u0433\u043e \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0438 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041a\u0430\u043a \u041d\u0415 \u041d\u0410\u0414\u041e \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <\/p>\n<pre><code class=\"javascript\">\/\/ \u0412\u0441\u0451, \u0447\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442,  \/\/ \u0442\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u0432\u0435\u0440\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442! import ServerComponentB from '.\/ServerComponentB.js'  function ClientComponent() {   return (     &lt;div>       &lt;button onClick={onClickFunction}>Button&lt;\/button>       {\/* \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c. *\/}       &lt;ServerComponentB \/>     &lt;\/div>   ) }<\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/066\/b51\/5ce\/066b515ced3b1ac719aa1b86548f6fc3.png\" alt=\"\u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e.\" title=\"\u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e.\" width=\"453\" height=\"386\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/066\/b51\/5ce\/066b515ced3b1ac719aa1b86548f6fc3.png\"\/><\/p>\n<div><figcaption>\u0412\u0441\u0451, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432\u00a0ServerComponent\u00a0\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 ServerComponent\u00a0\u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u041e, \u043d\u0435\u0442! \u0427\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u044b\u0448\u0435, \u0434\u043e \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2013 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435,\u00a0ServerPage\u00a0\u2014 \u0438 \u0443\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443.<\/p>\n<p>\u041a\u0430\u043a \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/p>\n<pre><code class=\"javascript\">import ClientComponent from '.\/ClientComponent.js' import ServerComponentB from '.\/ServerComponentB.js'  \/**    * \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014   * \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443   * \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430.   *\/ function ServerComponentA() {   return (     &lt;ClientComponent>       &lt;ServerComponentB \/>     &lt;\/ClientComponent>   ) }  \/**      * \u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014   * \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443   * \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0441\u0430   *\/ function ServerPage() {   return (     &lt;ClientComponent       content={&lt;ServerComponentB \/>}     \/>   ) } <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/942\/8a4\/7d6\/9428a47d627051802b44d6a3faf9f4b7.png\" alt=\"ServerComponentB \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e ClientComponent \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u0430, \u0430 \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \" title=\"ServerComponentB \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e ClientComponent \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u0430, \u0430 \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \" width=\"449\" height=\"379\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/942\/8a4\/7d6\/9428a47d627051802b44d6a3faf9f4b7.png\"\/><\/p>\n<div><figcaption>ServerComponentB \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e ClientComponent \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u0430, \u0430 \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. <\/figcaption><\/div>\n<\/figure>\n<h2>\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0444\u0430\u0439\u043b\u0430 \u0431\u044b\u043b\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 &#8212; \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c?<\/h2>\n<p>\u041d\u0438 \u0432 \u043a\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435! \u041d\u043e \u043d\u0438\u0436\u0435 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0447\u0430\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &lt;CodeBlock \/>. \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0442\u0430\u043a \u0438 \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u044d\u0442\u0443 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041d\u043e \u043d\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u0434\u0430. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0440\u0430\u0437\u043e\u0431\u044c\u0451\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u0434\u0432\u0435 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b:\u00a0CodeBlock.server.js\u00a0\u0438\u00a0CodeBlock.client.js. \u041f\u0435\u0440\u0432\u0430\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0442\u043e\u0440\u0443\u044e. (\u0418\u043c\u0435\u043d\u0430 \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c\u0438; \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0.server\u00a0\u0438\u00a0.client, \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e.)<\/p>\n<pre><code class=\"javascript\">components\/CodeBlock\/CodeBlock.server.js  \/\/ filename: components\/CodeBlock\/CodeBlock.server.js import Highlight from 'expensive-library' import ClientCodeBlock from '.\/CodeBlock.client.js' import { example0, example1, example2 } from '.\/examples.js'  function ServerCodeBlock() {   return (     &lt;ClientCodeBlock       \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u043e\u043d\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435       renderedExamples={[         &lt;Highlight code={example0.code} language={example0.language} \/>,         &lt;Highlight code={example1.code} language={example1.language} \/>,         &lt;Highlight code={example2.code} language={example2.language} \/>       ]}     >   ) }  export default ServerCodeBlock<\/code><\/pre>\n<pre><code class=\"javascript\">components\/CodeBlock\/CodeBlock.client.js  \"use client\" import { useState } from 'react'  function ClientCodeBlock({ renderedExamples }) {   \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043d\u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 onClick,   \/\/ \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442   const [currentExample, setCurrentExample] = useState(1)      return (     &lt;>       &lt;button onClick={() => setCurrentExample(0)}>Example 1&lt;\/button>       &lt;button onClick={() => setCurrentExample(1)}>Example 2&lt;\/button>       &lt;button onClick={() => setCurrentExample(2)}>Example 3&lt;\/button>       { renderedExamples[currentExample] }     &lt;\/>   ) }  export default ClientCodeBlock<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u043c \u0438\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u044d\u0442\u0443 <a href=\"https:\/\/www.joshwcomeau.com\/react\/file-structure\/\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u0443\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443<\/a>. \u041f\u043e\u043b\u043e\u0436\u0438\u043c \u0434\u0432\u0430 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u0430 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f CodeBlock, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u00a0index.js, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:\u00a0<\/p>\n<pre><code class=\"javascript\">export { default } from '.\/CodeBlock.server.js'<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043b\u044e\u0431\u043e\u0439 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c CodeBlock \u0438\u0437 \u2018components\/CodeBlock.js\u2019, \u0430 \u043a\u0430\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439, \u0442\u0430\u043a \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c\u0438.<\/p>\n<h2>\u041a\u0430\u043a-\u0442\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e. \u041a\u0430\u043a \u044f \u043c\u043e\u0433\u0443 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043c\u043e\u0439 \u043a\u043e\u0434 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435?<\/h2>\n<p>\u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u043d\u0430\u0448 \u043a\u043e\u0434 console.log\u00a0\u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b\u0438, \u043e\u0442\u043a\u0443\u0434\u0430 \u0438\u0434\u0443\u0442 \u044d\u0442\u0438 \u043b\u043e\u0433\u0438: \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438 \u044d\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043d\u043e \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0448\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0432 \u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/www.npmjs.com\/package\/server-only\" rel=\"noopener noreferrer nofollow\">\u043f\u0430\u043a\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/a>. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u044b, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0438\u043b\u0438 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u043d\u0435 \u043e\u043a\u0430\u0436\u0443\u0442\u0441\u044f \u0433\u0434\u0435 \u043d\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043e. (\u041f\u0440\u0430\u0432\u0434\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c Next.js,\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/configuring\/environment-variables#bundling-environment-variables-for-the-browser\" rel=\"noopener noreferrer nofollow\">\u043e\u043d<em>\u00a0\u0441\u0430\u043c<\/em>\u00a0\u0437\u0430\u0449\u0438\u0442\u0438\u0442 \u0432\u0430\u0441<\/a>\u00a0\u043e\u0442 \u043d\u0435\u0447\u0430\u044f\u043d\u043d\u043e\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0432\u0430\u0448\u0438\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.)<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0430\u043a\u0435\u0442\u044b \u00ab\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u00bb, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0430\u043b\u0438 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0442\u043e\u043d\u043a\u0443\u044e, \u043d\u043e \u0432\u0430\u0436\u043d\u0443\u044e \u0432\u044b\u0433\u043e\u0434\u0443: \u043f\u043e\u0432\u044b\u0448\u0430\u043b\u0438 <em>\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438<\/em>. \u0415\u0441\u043b\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0437\u0430\u043d\u044f\u0442\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u0432\u0438\u0434\u0438\u0442 \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043c\u0435\u0442\u043a\u0443 server-only, \u043e\u043d \u0441\u0440\u0430\u0437\u0443 \u0437\u043d\u0430\u0435\u0442, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b, \u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0443\u043c\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h2>\u0418\u0442\u0430\u043a, \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043b\u0438 \u043c\u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React? <\/h2>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 React \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u044e \u0446\u0435\u043d\u0443. \u0420\u0435\u0447\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e \u043a\u043e\u0432\u0430\u0440\u043d\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445 CSS-in-JS \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 React. \u0412\u0430\u0436\u043d\u0430 \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c: \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u0447\u0442\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435,\u00a0<a href=\"https:\/\/www.joshwcomeau.com\/react\/the-perils-of-rehydration\/\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0435<\/a>, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u0434\u0430 (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432). \u041a\u0430\u0436\u0434\u0430\u044f \u0433\u0440\u0430\u043d\u044c \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u2013 \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043b\u0430\u0437\u0435\u0439\u043a\u0430 \u0434\u043b\u044f \u0431\u0430\u0433\u043e\u0432 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043a\u043e\u0434\u0430. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044d\u0442\u0443 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043a\u0443\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n<p>\u0420\u0435\u0448\u0430\u044f, \u0445\u043e\u0442\u0438\u0442\u0435 \u043b\u0438 \u0432\u044b \u0431\u0440\u0430\u0442\u044c \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435 RSC, \u0432\u0437\u0432\u0435\u0441\u044c\u0442\u0435 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438. \u0418\u0437 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u2013 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f SEO. \u0422\u0430\u043a\u0436\u0435 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438 \u043d\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.\u00a0<a href=\"https:\/\/twitter.com\/jescalan\" rel=\"noopener noreferrer nofollow\">\u0414\u0436\u0435\u0444\u0444 \u042d\u0441\u043a\u0430\u043b\u0430\u043d\u0442\u0435<\/a>, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u0442\u0435 \u0436\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0432 \u0441\u0432\u043e\u0435\u0439\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=TJOiXyVKExg&amp;list=PLRvKvw42Rc7MoxLVE_9qM24NAjqDdbBJc&amp;index=5\" rel=\"noopener noreferrer nofollow\">\u043b\u0435\u043a\u0446\u0438\u0438 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Reactathon<\/a>, \u043f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043b \u0435\u0451 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0445\u0435\u043c\u043e\u0439:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ca2\/fcf\/c5a\/ca2fcfc5a17e2e4555d94961112dd1f4.png\" width=\"728\" height=\"415\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ca2\/fcf\/c5a\/ca2fcfc5a17e2e4555d94961112dd1f4.png\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0433\u043e\u0442\u043e\u0432\u0430 \u0432\u043d\u0438\u043a\u0430\u0442\u044c \u0432 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 RSC, \u043d\u043e \u0432\u0437\u0430\u043c\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, RSC \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u0434\u043e\u0439\u0434\u0443\u0442.<\/p>\n<\/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\/760098\/\"> https:\/\/habr.com\/ru\/articles\/760098\/<\/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-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u2013 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u0440\u0430\u0431\u043e\u0442\u044b. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b\u00a0<a href=\"https:\/\/www.mux.com\/blog\/the-building-blocks-of-great-docs\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u0438\u043b\u0438 \u043d\u0430\u0448\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e<\/a>\u00a0\u0438 \u0443\u0441\u0442\u0440\u043e\u0438\u043b\u0438\u00a0<a href=\"https:\/\/www.mux.com\/blog\/rebranding-during-a-recession\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0431\u0440\u0435\u043d\u0434\u0438\u043d\u0433 Mux<\/a>. \u041f\u043e\u043a\u0430 \u043c\u044b \u044d\u0442\u0438\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u044c, \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0438 \u0432\u0435\u0441\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0430\u0439\u0442\u043e\u0432 <a href=\"https:\/\/www.mux.com\/\" rel=\"noopener noreferrer nofollow\">mux.com<\/a>\u00a0\u0438\u00a0<a href=\"https:\/\/docs.mux.com\/\" rel=\"noopener noreferrer nofollow\">docs.mux.com<\/a>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0430\u043a \u0447\u0442\u043e, \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043c\u043d\u0435\u2026 \u044f \u0437\u043d\u0430\u044e. \u0417\u043d\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0442\u0430\u043a \u0441\u0442\u0440\u0430\u0448\u043d\u043e \u0438, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u043e \u0442\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u0432\u0430\u043c \u043e\u0431\u044a\u044f\u0441\u043d\u044e, \u043f\u043e\u0447\u0435\u043c\u0443, \u043e\u0442\u0432\u0435\u0442\u0438\u0432 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b:\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-did-we-get-here\" rel=\"noopener noreferrer nofollow\">\u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u0432\u0430\u0436\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#what-are-react-server-components-what-are-they-good-for\" rel=\"noopener noreferrer nofollow\">\u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u0438<\/a>?\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#what-arent-react-server-components-good-for\" rel=\"noopener noreferrer nofollow\">\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u043d\u0435 \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448\u0438<\/a>?\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-do-i-use-react-server-components\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a>,\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#how-do-i-incrementally-adopt-react-server-components-in-a-real-life-codebase\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a \u0438\u0445 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c<\/a> \u0438\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#did-someone-say-advanced-patterns\" rel=\"noopener noreferrer nofollow\">\u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c<\/a>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c? \u0414\u043e\u0447\u0438\u0442\u0430\u0432 \u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e, \u0432\u044b \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c, <a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-components#so-should-i-use-react-server-components\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043b\u0438 \u0432\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/a>, \u0430 \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u2013 \u0442\u043e \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. <\/p>\n<h2>\u041a\u0430\u043a \u043c\u044b \u043a \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u0438?<\/h2>\n<p>\u0415\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0441\u043c\u044b\u0441\u043b\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u2013 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043e\u043d\u0438 \u0440\u0435\u0448\u0430\u044e\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441 \u044d\u0442\u043e\u0433\u043e \u0438 \u043d\u0430\u0447\u043d\u0451\u043c.<\/p>\n<p>\u0414\u0430\u0432\u043d\u044b\u043c-\u0434\u0430\u0432\u043d\u043e, \u0432 \u0441\u0435\u0434\u043e\u0439 \u0434\u0440\u0435\u0432\u043d\u043e\u0441\u0442\u0438, \u0441\u0430\u0439\u0442\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0430\u043a\u0438\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u043a\u0430\u043a PHP. \u0422\u0430\u043a \u0431\u044b\u043b\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0435\u043a\u0440\u0435\u0442\u043e\u0432. \u041d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0430\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043d\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0426\u041f, \u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u0430\u044f \u0438 \u043b\u0451\u0433\u043a\u0430\u044f HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043f\u043e\u0434 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0435\u0451 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 HTML. \u041a\u0440\u0430\u0441\u0438\u0432\u043e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u00a0<\/p>\n<p>\u0410 \u043f\u043e\u0442\u043e\u043c \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f: \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043e\u0442\u043a\u043b\u0438\u043a\u0430 \u0438 \u0443\u0441\u0438\u043b\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c? <em>\u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435<\/em> \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u043e\u0440\u0446\u0438\u044e \u043a\u0443\u043a\u0438 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0443? \u0412\u0435\u0441\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 JavaScript \u0438 \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442!<\/p>\n<p>\u0422\u0430\u043a\u0443\u044e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044e \u043d\u0430\u0437\u0432\u0430\u043b\u0438 \u00ab\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u00bb (CSR), \u0430 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u00bb (SPA), \u0438 \u044d\u0442\u043e\u0442 \u0448\u0430\u0433\u00a0<a href=\"https:\/\/begin.com\/blog\/posts\/2023-02-21-why-does-everyone-suddenly-hate-single-page-apps\" rel=\"noopener noreferrer nofollow\">\u0431\u044b\u043b \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0446\u0435\u043d\u0435\u043d \u0432 \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043a\u0440\u0443\u0433\u0430\u0445<\/a>. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0430\u043a\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0430, \u0438 \u044d\u0442\u043e \u0434\u043e\u0440\u043e\u0433\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442! \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c <a href=\"https:\/\/create-react-app.dev\/\" rel=\"noopener noreferrer nofollow\">create-react-app<\/a>. \u0415\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e \u0447\u0430\u0441\u0442\u043e \u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c (\u0432\u043e\u0437\u044c\u043c\u0451\u043c, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u0430\u0448\u0431\u043e\u0440\u0434), \u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c JavaScript? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0435\u043a\u0440\u0435\u0442\u044b? \u0427\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043c\u0430\u043b\u043e\u043c\u043e\u0449\u043d\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u0438\u043b\u0438 \u0443 \u043d\u0438\u0445 \u043f\u043b\u043e\u0445\u043e\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c (<a href=\"https:\/\/unctad.org\/topic\/least-developed-countries\/chart-april-2021\" rel=\"noopener noreferrer nofollow\">\u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0442\u0430\u043a \u0438 \u0435\u0441\u0442\u044c<\/a>)?<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440-\u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043a\u043e\u0434 JavaScript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0432 \u0445\u043e\u0434\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u0434 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u043d\u0438\u0445 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c, \u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u0442\u043a\u043b\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0432 \u0434\u0435\u043b\u043e \u0432\u0441\u0442\u0443\u043f\u0438\u043b\u0438 \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 (SSR) \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 (SSG). \u0412 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u043a\u0430\u043a\u00a0<a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer nofollow\">Next.js<\/a>\u00a0\u0438\u00a0<a href=\"https:\/\/www.gatsbyjs.com\/\" rel=\"noopener noreferrer nofollow\">Gatsby<\/a>\u00a0\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 SSR \u0438 SSG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u0434\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430 HTML\u00a0<em>\u0438<\/em>\u00a0JavaScript. \u041b\u0443\u0447\u0448\u0435\u0435 \u043e\u0442 \u0434\u0432\u0443\u0445 \u043c\u0438\u0440\u043e\u0432. \u041a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u044d\u0442\u043e\u0442 HTML, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0447\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0417\u0430\u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f JS, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u043a\u0440\u0430\u0441\u0438\u0432\u043e\u0439 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439. \u0411\u043e\u043d\u0443\u0441: \u044d\u0442\u043e\u0442 HTML \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u0438, \u0447\u0442\u043e, \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u043a\u0440\u0443\u0442\u043e.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u041f\u0440\u0438 \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 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430 \u043d\u0438\u0445 \u00ab\u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0432\u0438\u0434\u0435\u043d\u00bb, \u0430 \u0442\u0430\u043a\u0436\u0435 JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041d\u0430 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b JavaScript \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f, \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u043c \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0430\u0441\u044c, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435.<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u0422\u043e\u0447\u043d\u043e \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSR, \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 SSR \u0432 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u043e.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e! \u041d\u043e \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u0440\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 SSR\/SSG \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043c\u044b \u043f\u0435\u0440\u0435\u0441\u044b\u043b\u0430\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 <em>\u0432\u0435\u0441\u044c JavaScript, \u043d\u0443\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/em>, \u0438 \u0437\u0434\u0435\u0441\u044c \u043a\u043b\u0438\u0435\u043d\u0442 <em>\u0432\u043d\u043e\u0432\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 <\/em>\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 HTML \u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0432\u0448\u0438\u043c\u0441\u044f JavaScript. (\u041a\u0441\u0442\u0430\u0442\u0438, \u044d\u0442\u043e\u0442 \u0441\u043e\u044e\u0437 \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u00ab\u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0435\u043c\u00bb (hydration) \u2014 \u044d\u0442\u043e\u0442 \u0442\u0435\u0440\u043c\u0438\u043d \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0448\u0435\u043c \u0440\u0435\u043c\u0435\u0441\u043b\u0435.) \u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u0442\u043e\u0442 JavaScript? \u0412 \u0441\u0430\u043c\u043e\u043c \u043b\u0438 \u0434\u0435\u043b\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u0440\u043e\u0441\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0430\u0439\u0442 \u043f\u0440\u043e\u043f\u0438\u0442\u0430\u043b\u0441\u044f?<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438? \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0437\u0430\u0441\u0442\u0440\u044f\u043b\u0430 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0438 \u0434\u043e\u0436\u0438\u0434\u0430\u0435\u043c\u0441\u044f \u0435\u0433\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f. \u0418 \u0432\u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0430\u0434\u043e\u0435\u043b\u043e \u0436\u0434\u0430\u0442\u044c. \u0411\u0443\u043c.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React.<\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React? \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u0438? <\/h2>\n<p>\u041d\u0435\u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e React Server Components (RSC) \u2013 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 React \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u0447\u0442\u043e?\u00bb, \u0430 \u0432\u043e\u043f\u0440\u043e\u0441 \u00ab\u043f\u043e\u0447\u0435\u043c\u0443?\u00bb. \u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f RSC? \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 RSC \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044e\u0442 \u0443 SSR \u0432 \u0434\u0432\u0443\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 RSC \u0434\u043b\u044f \u043d\u0430\u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u0434: \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f\u00a0<em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em>\u00a0\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043a\u0430\u043a \u0432 \u0441\u0442\u0430\u0440\u044b\u0435 \u0434\u043e\u0431\u0440\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 PHP), \u0430 \u0447\u0442\u043e \u2013 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043a\u0430\u043a SSR). \u0422\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u0434, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u044b\u043b\u0430\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 JavaScript \u2013 \u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b (\u0431\u0430\u043d\u0434\u043b\u044b), \u0438 \u043f\u0440\u0438 \u043f\u0440\u043e\u043f\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u044b. <\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b (\u0437\u0435\u043b\u0451\u043d\u044b\u0435) \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442, \u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 (\u0441\u0438\u043d\u0438\u0435) \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e RSC-\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 <em>\u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/em>. \u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0439 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442\u00a0<em>\u043f\u043e\u0442\u043e\u043a\u043e\u043c<\/em>\u00a0\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0441\u0440\u0430\u0437\u0443 \u0432 \u0434\u0432\u0443\u0445 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f\u0445. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c React \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0441\u0443\u0434\u0438\u0442\u044c. \u0412\u0435\u0434\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u2026 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 node \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/fetch\" rel=\"noopener noreferrer nofollow\">fetch<\/a>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0441\u0435 \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0438 \u043b\u044e\u0431\u0438\u043c. \u0412\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 user \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 movie \u0432\u044b\u0431\u0435\u0440\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u0438\u043b\u044c\u043c\u0435 \u0438 \u043f\u0440. \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043d\u0438 \u043a \u043a\u0430\u043a\u0438\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c \u0438\u043b\u0438\u00a0<a href=\"https:\/\/react.dev\/reference\/react\/useEffect#fetching-data-with-effects\" rel=\"noopener noreferrer nofollow\">useEffect<\/a> \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 (<a href=\"https:\/\/tanstack.com\/query\/v3\/\" rel=\"noopener noreferrer nofollow\">react-query<\/a>, \u044f \u0442\u0435\u0431\u044f \u043d\u0435 \u0440\u0430\u0437\u043b\u044e\u0431\u0438\u043b), \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/nextjs.org\/docs\/pages\/building-your-application\/data-fetching\/get-server-side-props\" rel=\"noopener noreferrer nofollow\">getServerSideProps<\/a>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u0431\u0443\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c.<\/p>\n<p>\u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0442\u0430\u043a \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0432\u044b\u0448\u0435. \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445? \u041d\u0435\u0437\u0430\u0447\u0435\u043c \u0436\u0434\u0430\u0442\u044c: \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0422\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u042d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u043a\u043e\u0433\u0434\u0430 \u0433\u043e\u0442\u043e\u0432 \u2013 \u043f\u043e\u0441\u044b\u043b\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u0442\u043e\u043a\u0430.<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0437\u0430\u043a\u0443\u0441\u043a\u0443: \u0430 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u043b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0444\u043e\u0440\u043c\u0443)? \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0438\u043c\u043e. \u041a\u043b\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u2013 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u043a\u0443 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0435 \u043d\u0443\u0436\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u0441\u044b\u043b\u0430\u043b \u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. <em>\u0427\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438<\/em> \u0442\u0430\u043a\u0430\u044f \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a React Server Components \u2014 \u044d\u0442\u043e\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/data-fetching\/server-actions#actions\" rel=\"noopener noreferrer nofollow\">React Actions<\/a>\u00a0\u2014 \u043d\u043e \u043e\u0431\u0435 \u044d\u0442\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0441\u0442\u0440\u043e\u044f\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0435, \u0438 \u043e\u043d\u0438 \u0442\u0435\u0441\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0441\u0432\u044f\u0437\u0430\u043d\u044b. \u041f\u0440\u0430\u0432\u0434\u0430, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 React Actions. \u041f\u0440\u0438\u0431\u0435\u0440\u0435\u0433\u0443 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u0434\u043b\u044f\u00a0<a href=\"https:\/\/www.mux.com\/blog\/what-are-react-server-actions\" rel=\"noopener noreferrer nofollow\">\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u0432 \u0431\u043b\u043e\u0433\u0435.<\/a><\/p>\n<h2>\u0414\u043b\u044f \u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0445\u043e\u0440\u043e\u0448\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React? <\/h2>\n<p>\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0415\u0441\u043b\u0438 RSC \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0443\u0447\u0448\u0435 CSR \u0438 SSR, \u0442\u043e <em>\u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b<\/em>\u00a0\u0438\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f? \u042f \u0437\u0430\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0442\u0435\u043c \u0436\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u0438 \u043d\u0430 \u0433\u043e\u0440\u044c\u043a\u043e\u043c \u043e\u043f\u044b\u0442\u0435 (\u043a\u0430\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430) \u0443\u0431\u0435\u0434\u0438\u043b\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438. \u041f\u0440\u0438\u0447\u0451\u043c, \u043d\u0435\u043c\u0430\u043b\u043e. \u0412\u043e\u0442 \u0442\u0440\u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React.<\/p>\n<h2>CSS-in-JS &#8212; \u043d\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u043d\u0430\u0447\u0430\u043b\u043e<\/h2>\n<p>\u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043d\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 CSS-\u0432-JS\u00a0<a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/upgrading\/app-router-migration#step-7-styling\" rel=\"noopener noreferrer nofollow\">\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/a>. \u042d\u0442\u043e \u0431\u043e\u043b\u044c\u043d\u043e. \u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0441 <a href=\"https:\/\/styled-components.com\/\" rel=\"noopener noreferrer nofollow\">styled-components<\/a>\u00a0\u043d\u0430\u00a0<a href=\"https:\/\/tailwindcss.com\/\" rel=\"noopener noreferrer nofollow\">Tailwind CSS<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0431\u044b\u043b \u0441\u0430\u043c\u044b\u043c \u043a\u0440\u0443\u043f\u043d\u044b\u043c \u043c\u0435\u0440\u043e\u043f\u0440\u0438\u044f\u0442\u0438\u0435\u043c \u0432 \u0445\u043e\u0434\u0435 \u043d\u0430\u0448\u0435\u0439 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 RSC, \u043f\u0440\u0430\u0432\u0434\u0430,\u00a0<a href=\"https:\/\/www.mux.com\/blog\/the-building-blocks-of-great-docs#tailwind-css\" rel=\"noopener noreferrer nofollow\">\u043c\u044b \u0434\u0443\u043c\u0430\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u0430 \u043c\u043e\u0440\u043e\u043a\u0430 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u0443\u0441\u0438\u043b\u0438\u0439<\/a>.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043f\u043e\u0448\u043b\u0438 \u0432\u0430-\u0431\u0430\u043d\u043a \u0438 \u0432\u0441\u0451 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432 \u0432\u0438\u0434\u0435 CSS-\u0432-JS, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u043b\u043e\u0442\u043d\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0427\u0442\u043e \u0436, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0438\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0448\u0435, \u043f\u0440\u0430\u0432\u0434\u0430?<\/p>\n<h2>\u041a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 React \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a\u00a0<a href=\"https:\/\/react.dev\/learn\/passing-data-deeply-with-context\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 React<\/a>\u00a0<a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#rendering-third-party-context-providers-in-server-components\" rel=\"noopener noreferrer nofollow\"><em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em>\u00a0\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u2013 \u0442\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u0441\u0442\u0430\u0440\u044b\u043c \u0434\u043e\u0431\u0440\u044b\u043c <a href=\"https:\/\/nextjs.org\/docs\/getting-started\/react-essentials#sharing-data-between-server-components\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0434\u0443\u043b\u044f\u043c<\/a>.<\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u044e\u0440\u043f\u0440\u0438\u0437: \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 <em>\u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0430<\/em> \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f React, \u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438. (\u0415\u0441\u043b\u0438 \u044f \u043d\u0435\u043f\u0440\u0430\u0432, \u0438 \u043e\u043d \u0435\u0441\u0442\u044c \u0433\u0434\u0435-\u0442\u043e \u0435\u0449\u0451 \u2013 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043f\u043e\u043f\u0440\u0430\u0432\u044c\u0442\u0435 \u043c\u0435\u043d\u044f. \u041c\u043d\u0435 \u0435\u0433\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442.)<\/p>\n<p>\u041d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u044d\u0442\u043e \u0431\u044b\u043b\u0430 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0422\u0435 \u043c\u0435\u0441\u0442\u0430, \u0433\u0434\u0435 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React, \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u0438\u0441\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e, \u0438 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0442\u0430\u043a \u0438\u043b\u0438 \u0438\u043d\u0430\u0447\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0448\u0430 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0queryString\u00a0\u0438\u00a0isOpen, \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u041d\u043e \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u043e\u0432\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u0441\u0451 \u0432\u044b\u0448\u043b\u043e<\/p>\n<\/div>\n<\/div>\n<\/div>\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-354485","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354485","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=354485"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354485\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=354485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=354485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=354485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}