{"id":469974,"date":"2025-08-07T15:01:21","date_gmt":"2025-08-07T15:01:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=469974"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=469974","title":{"rendered":"<span>\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u043f\u0440\u043e\u0435\u043a\u0442\u0430: \u043a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438 MobX\u2011\u0441\u0442\u043e\u0440\u044b \u043d\u0430 React Query \u0432 \u0431\u043e\u043b\u044c\u0448\u043e\u043c Next.js\u2011\u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/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<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d9\/acb\/113\/8d9acb113df0fa1159bc63502ef53119.png\" width=\"2438\" height=\"1369\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8d9\/acb\/113\/8d9acb113df0fa1159bc63502ef53119.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8d9\/acb\/113\/8d9acb113df0fa1159bc63502ef53119.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442. \u042f \u0414\u0438\u043c\u0430 \u0420\u0430\u0433\u043e\u0437\u0438\u043d, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 <a href=\"https:\/\/kts.tech\/\" rel=\"noopener noreferrer nofollow\">KTS<\/a>. \u042d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u044f \u0445\u043e\u0447\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u2014 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a \u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 \u0443\u0436\u0435 \u0436\u0438\u043b\u0438 \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u0434\u0432\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u2014 CSR-\u0432\u0435\u0440\u0441\u0438\u044f (Client Side Rendering) \u0438 SSR\u2011\u0432\u0435\u0440\u0441\u0438\u044f (Server Side Rendering), \u2014 \u0430 MobX\u2011\u0441\u0442\u043e\u0440\u044b \u0432\u0441\u0435 \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u043b \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 (\u0430 \u0442\u043e \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e), \u0435\u0449\u0435 \u043a\u0443\u0447\u0443 \u0441\u0432\u044f\u0437\u0435\u0439, \u0438 \u0432 \u043a\u0430\u043a\u043e\u0439\u2011\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 HTTP\u2011\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u044c\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0435\u0435 \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u0441\u0442\u043e\u0440\u044b \u043d\u0430 React Query, \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u043a\u043e\u0434 \u0432\u043e\u043a\u0440\u0443\u0433 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u224850\u202f% \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 GET\u2011\u043e\u0432. \u041f\u043e\u043f\u0443\u0442\u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0430\u044e \u043e \u043d\u0430\u0448\u0438\u0445 \u0433\u0440\u0430\u0431\u043b\u044f\u0445 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438 \u043f\u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0427\u0442\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438\u0437\u2011\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438: \u043a\u0430\u043a \u0436\u0438\u0442\u044c, \u043f\u043e\u043a\u0430 MobX \u0438 React Query \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u043e\u043a \u043e \u0431\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0434\u0435 \u043d\u0430\u0431\u0438\u043b\u0438 \u0448\u0438\u0448\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u2014 \u0447\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u0438 \u0433\u0434\u0435 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0434\u0435\u0440\u0436\u0438\u043c MobX.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438 \u0442\u0438\u043c\u043b\u0438\u0434\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0443\u043c\u0430\u044e\u0442 \u043e \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0435 \u043d\u0430 React Query \u0438 \u0445\u043e\u0442\u044f\u0442 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438.<\/p>\n<p>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D0%BD%D0%B0%E2%80%AFMobX\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9B%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" rel=\"noopener noreferrer nofollow\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" rel=\"noopener noreferrer nofollow\">\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#CSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%D0%B1%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5%20MobX-%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%B1%D0%BE%D0%BB%D0%B8%D1%82%20%D0%B2%20MobX%20%D0%B8%20%D0%BE%D1%82%20%D1%87%D0%B5%D0%B3%D0%BE%20%D1%85%D0%BE%D1%82%D0%B8%D0%BC%20%D0%B8%D0%B7%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%D1%81%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BB%D0%B8%20React%20Query\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D1%8F%20%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9%20%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%20%D0%BA%20%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0%D0%BC\" rel=\"noopener noreferrer nofollow\">\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%20%D0%BD%D0%BE%D0%B2%D0%BE%D0%B9%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433 \u043e \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%93%D1%80%D0%B0%D0%B1%D0%BB%D0%B8%20%D0%B8%20%D0%B8%D0%BD%D1%81%D0%B0%D0%B9%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0413\u0440\u0430\u0431\u043b\u0438 \u0438 \u0438\u043d\u0441\u0430\u0439\u0442\u044b<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9A%D0%BE%D0%BB%D0%BB%D0%B8%D0%B7%D0%B8%D0%B8%20queryKey%20%D0%BC%D0%B5%D0%B6%D0%B4%D1%83%20useQuery%20%D0%B8%20useInfiniteQuery\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 queryKey \u043c\u0435\u0436\u0434\u0443 useQuery \u0438 useInfiniteQuery<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A0%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5%20query%20key%20%D0%BD%D0%B0%20%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%B5%20%D0%B8%20%D0%BD%D0%B0%20%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D0%B5%20(SSR-%D1%84%D0%BB%D0%BE%D1%83)\" rel=\"noopener noreferrer nofollow\">\u0420\u0430\u0437\u043d\u044b\u0435 query key \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (SSR-\u0444\u043b\u043e\u0443)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%95%D1%81%D0%BB%D0%B8%20%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%BE%D1%88%D0%BB%D0%B0%20%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0,%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B5%D0%B5%20%D0%B2%D1%8B%D0%B1%D1%80%D0%BE%D1%81%D0%B8%D1%82%D1%8C\" rel=\"noopener noreferrer nofollow\">\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0443\u0436\u043d\u043e \u0435\u0435 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%B0%D0%B3%D0%B8%D0%BD%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D0%BE%D0%B3%D0%BE%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82%20%D0%BC%D0%B5%D0%B4%D0%BB%D0%B5%D0%BD%D0%BD%D0%BE\" rel=\"noopener noreferrer nofollow\">\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D0%BB%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%BE%D0%B3%D0%B4%D0%B0%20MobX%20%D0%B2%D1%81%D0%B5%20%D0%B5%D1%89%D0%B5%20%D1%83%D0%BC%D0%B5%D1%81%D1%82%D0%B5%D0%BD\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0433\u0434\u0430 MobX \u0432\u0441\u0435 \u0435\u0449\u0435 \u0443\u043c\u0435\u0441\u0442\u0435\u043d<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B8%20%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX<\/h2>\n<p><a class=\"anchor\" name=\"%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D0%BD%D0%B0%E2%80%AFMobX\" id=\"\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX\"><\/a><\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0432\u0435\u0441\u0442\u0438 React Query, \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435, \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435) \u043c\u044b \u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0432 MobX\u2011\u0441\u0442\u043e\u0440\u0430\u0445. \u041d\u0438\u0436\u0435 \u2014 \u043e\u0447\u0435\u043d\u044c \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e. \u0412 \u0431\u043e\u0435\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435\/\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044f, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0439 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435, \u043d\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0432\u044b\u0436\u0438\u043c\u043a\u0443.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u044e \u0443\u043f\u043e\u0440 \u043d\u0430 SSR\u2011\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Next.js \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0431\u0443\u0434\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u043c\u0430\u0440\u043a\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0447\u0438\u0441\u0442\u043e\u043c CSR. \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u043d\u0435\u043c \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h3>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/h3>\n<p><a class=\"anchor\" name=\"%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" id=\"\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b\"><\/a><\/p>\n<p>\u042d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 \u043d\u0435\u043a\u043e\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u043e\u0440\u0430 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<pre><code>import { makeAutoObservable, runInAction } from 'mobx';  export class UserStore { \u00a0\u00a0user: UserEntity | null = null;  \u00a0\u00a0constructor() { \u00a0\u00a0\u00a0\u00a0makeAutoObservable(this); \u00a0\u00a0}  \u00a0\u00a0init = async () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = await fetchUser();  \u00a0\u00a0\u00a0\u00a0if (response.error) return;  \u00a0\u00a0\u00a0\u00a0runInAction(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.user = response.data; \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0}; }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u2011\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u043b\u0435 user \u0438 \u043c\u0435\u0442\u043e\u0434 init(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f makeAutoObservable \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u0442\u043e\u0440\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c (\u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0438\u0442\u0430\u0435\u0442 user, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445).<\/p>\n<p>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d: \u0441\u0442\u043e\u0440 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u0443\u043a\u0438 \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f. \u0412 \u0431\u043e\u0435\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u043a\u0443\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041d\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0445\u0432\u0430\u0442\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u043b\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0441\u0442\u043e\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0435\u0433\u043e singleton\u2011\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043b \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code>const IS_SSR = typeof window === 'undefined';  enableStaticRendering(IS_SSR);  const StoreContext = createContext&lt;UserStore | null&gt;(null);  export const UserStoreProvider = ({ children }: { children: ReactNode }) =&gt; { \u00a0\u00a0const ref = useRef&lt;UserStore | null&gt;(null);  \u00a0\u00a0if (!ref.current || IS_SSR) { \u00a0\u00a0\u00a0\u00a0ref.current = new UserStore(); \u00a0\u00a0}  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0&lt;StoreContext.Provider value={ref.current}&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children} \u00a0\u00a0\u00a0\u00a0&lt;\/StoreContext.Provider&gt; \u00a0\u00a0); };<\/code><\/pre>\n<p>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 UserStore \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0436\u0438\u0432\u0435\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0436\u0438\u0432\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0441\u0442\u0438\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u2014 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442: \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0437\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 UserStore, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n<h3>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9B%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" id=\"\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b\"><\/a><\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b. \u0422\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u0436\u0438\u0432\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c (\u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439): \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f, \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u0424\u043b\u043e\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 useEffect \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c loadData(), \u0441\u0442\u043e\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043a\u043b\u0430\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 observable\u2011\u043f\u043e\u043b\u0435. \u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0438\u043d\u0435\u0439\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0424\u043b\u043e\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (SSR) \u2014 Next.js \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 loadInitialData(), \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u0440\u0430. \u041c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0440\u043e\u043f\u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0438\u0445 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430. \u041a\u043b\u0438\u0435\u043d\u0442 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code>import { makeAutoObservable, runInAction } from 'mobx';  type Params = { initialData?: BlogPostEntity };  export class BlogPostPageStore { \u00a0\u00a0blogPost: BlogPostEntity | null = null;  \u00a0\u00a0constructor({ initialData }: Params = {}) { \u00a0\u00a0\u00a0\u00a0if (initialData) this.blogPost = initialData;  \u00a0\u00a0\u00a0\u00a0makeAutoObservable(this); \u00a0\u00a0}  \u00a0\u00a0\/\/ \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0444\u043b\u043e\u0443 (CSR) \u00a0\u00a0loadData = async () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = await fetchBlogPost();  \u00a0\u00a0\u00a0\u00a0if (response.data) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0runInAction(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.blogPost = response.data; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0};  \u00a0\u00a0\/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0444\u043b\u043e\u0443 (SSR) \u00a0\u00a0static loadInitialData = () =&gt; fetchBlogPost(); }<\/code><\/pre>\n<h3>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/h3>\n<p><a class=\"anchor\" name=\"%D0%A1%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" id=\"\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)\"><\/a><\/p>\n<p>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<pre><code>export default async function Page() { \u00a0\u00a0const initial = await BlogPostPageStore.loadInitialData();  \u00a0\u00a0if (!initial.data) notFound();  \u00a0\u00a0return &lt;BlogPostPage initialData={initial.data} \/&gt;; }<\/code><\/pre>\n<h3>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" id=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)\"><\/a><\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0438\u043c\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u043e\u0440:<\/p>\n<pre><code>'use client';  import { observer } from 'mobx-react-lite';  const BlogPostPage = ({ initialData }: { initialData: BlogPostEntity }) =&gt; { \u00a0\u00a0const [store] = useState(() =&gt; new BlogPostPageStore({ initialData }));  \u00a0\u00a0if (!store.blogPost) return null;  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\/\/ ... \u00a0\u00a0); };  export default observer(BlogPostPage);<\/code><\/pre>\n<h3>CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p><a class=\"anchor\" name=\"CSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\"><\/a><\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b \u0432\u044b\u0437\u043e\u0432 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0442\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 useEffect:<\/p>\n<pre><code>import { observer } from 'mobx-react-lite';  export const BlogPostPage = ({ initialData }: { initialData: BlogPostEntity }) =&gt; { \u00a0\u00a0const [store] = useState(() =&gt; new BlogPostPageStore({ initialData }));  \u00a0\u00a0useEffect(() =&gt; { \u00a0\u00a0\u00a0\u00a0store.loadData(); \u00a0\u00a0}, []);  \u00a0\u00a0if (!store.blogPost) return &lt;div&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/div&gt;;  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\/\/ ... \u00a0\u00a0); };  export default observer(BlogPostPage);<\/code><\/pre>\n<h3>\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432<\/h3>\n<p><a class=\"anchor\" name=\"%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%D0%B1%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5%20MobX-%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%B2\" id=\"\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432\"><\/a><\/p>\n<ul>\n<li>\n<p>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u044b \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430, \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b. \u0422\u0430\u043a\u0438\u0435 \u0441\u0442\u043e\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u0437 API.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0443\u0442\u0438\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u043c\u0438 \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f<\/h3>\n<p><a class=\"anchor\" name=\"%D0%A7%D1%82%D0%BE%20%D0%B1%D0%BE%D0%BB%D0%B8%D1%82%20%D0%B2%20MobX%20%D0%B8%20%D0%BE%D1%82%20%D1%87%D0%B5%D0%B3%D0%BE%20%D1%85%D0%BE%D1%82%D0%B8%D0%BC%20%D0%B8%D0%B7%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%D1%81%D1%8F\" id=\"\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f\"><\/a><\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b: \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u043e\u0431\u043d\u0443\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0430\u0445. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0430\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u043b\u0438\u0441\u044c \u0432 \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u0432\u0443\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (CSR \u0438 SSR), \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0431\u044b\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u043c\u044b \u0432\u044b\u043d\u043e\u0441\u0438\u043b\u0438 \u043e\u0431\u0449\u0438\u0435 \u0432\u0435\u0449\u0438 \u0432 \u00ab\u0431\u0430\u0437\u043e\u0432\u044b\u0439\u00bb \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043c\u0435\u0436\u0434\u0443 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u043c\u043d\u0435 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u0434-\u0440\u0435\u0432\u044c\u044e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c UML-\u0441\u0445\u0435\u043c\u0443 \u0441\u0442\u043e\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f\u2026<\/p>\n<\/li>\n<li>\n<p>\u0414\u0432\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f SSR \u0438 CSR: \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u0432\u0443\u0445 \u0444\u043b\u043e\u0443 (CSR \u0438 SSR) \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u0439, \u043c\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043a\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443, \u0445\u043e\u0442\u044f \u0432 \u0446\u0435\u043b\u043e\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u044f\u043c\u043e\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BB%D0%B8%20React%20Query\" id=\"\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query\"><\/a><\/p>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0435 \u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u0437\u2011\u0437\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0443\u0445\u043e\u0434\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0432\u0438\u0437\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 API. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0435\u043b \u044d\u043a\u0440\u0430\u043d \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0430 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e\u0439. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u2014 \u044d\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u0441\u0435\u0449\u0430\u0435\u043c\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430.<\/p>\n<ul>\n<li>\n<p>\u041a\u0435\u0448 React Query \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2014 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u0420\u0430\u043d\u044c\u0448\u0435 \u0441\u0442\u043e\u0440 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0441\u044f, DOM \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f, \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0443\u043b\u0435\u0442\u0430\u043b\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421 React Query \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0438 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0435 \u00ab\u043f\u0440\u044b\u0433\u0430\u0435\u0442\u00bb.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439: \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u00ab\u043e\u0431\u0432\u044f\u0437\u043a\u0438\u00bb, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0432 MobX (\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u043e\u0448\u0438\u0431\u043e\u043a, \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439, \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445), \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0438 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0431\u044b\u043b\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u0430. React Query \u0432\u0437\u044f\u043b \u043d\u0430 \u0441\u0435\u0431\u044f \u043a\u0435\u0448 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u0438\u0437\u043d\u0435\u0441\u2011\u043b\u043e\u0433\u0438\u043a\u0435.<\/p>\n<h2>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/h2>\n<p><a class=\"anchor\" name=\"%D0%A1%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D1%8F%20%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" id=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438\"><\/a><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e React Query \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043c \u043a\u043e\u0434\u0430 \u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 MobX. \u041a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a\u043e\u0435:<\/p>\n<ul>\n<li>\n<p>\u041b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 API\u2011\u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441\u0440\u0430\u0437\u0443 \u043f\u0438\u0448\u0435\u043c \u043d\u0430 React Query.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0442\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0430 React Query \u0441\u0442\u0430\u0440\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u043a\u0430 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, MobX \u0438 React Query \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442: \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u043f\u0441\u044b, \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u0438\u043b\u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u043c \u0447\u0435\u0440\u0435\u0437 useEffect \u2014 \u0431\u0435\u0437 \u0442\u044f\u0436\u0435\u043b\u044b\u0445 \u0430\u0434\u0430\u043f\u0442\u0435\u0440\u043e\u0432.<\/p>\n<h2>\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9%20%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%20%D0%BA%20%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0%D0%BC\" id=\"\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\"><\/a><\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0434\u0435\u043b\u0430\u044e \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>Query \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432 useQuery \u0438 useInfiniteQuery. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 GET\u2011\u0437\u0430\u043f\u0440\u043e\u0441\u0430: \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 \u043d\u0438\u043c\u0438 \u043a\u0435\u0448, \u0441\u0442\u0430\u0442\u0443\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041a\u0430\u0436\u0434\u0430\u044f query \u0438 \u0435\u0435 \u043a\u0435\u0448 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 query key.<\/p>\n<\/li>\n<li>\n<p>Mutation \u2014 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0445\u0443\u043a\u0430 useMutation, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <strong>\u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 <\/strong>\u0434\u0430\u043d\u043d\u044b\u0435 (POST\/PUT\/DELETE). Mutation \u0442\u043e\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 API \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0434-\u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>QueryClient \u2014 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u0435\u0448 \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 React Query, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043a\u0435\u0448\u0435\u043c queries (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f).<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u044d\u0442\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u044f \u0442\u0430\u043a \u0438 \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c: queries, mutations \u0438 QueryClient.<\/p>\n<p>\u041d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u044f\u0442\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0440\u043e\u0432\u043d\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f request. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0430\u043d\u044c\u0448\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0439 MobX-\u0441\u0442\u043e\u0440, \u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0432\u0441\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0431\u044b\u043b\u0438 \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0442\u0430\u043c, \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0421\u0430\u043c\u0443\u044e \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0443\u044e \u043b\u044e\u0431\u043e\u043c\u0443: \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0435\u043b\u043e \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0438 \u0434\u0440\u0443\u0433\u043e\u0435. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0437\u0434\u0435\u0441\u044c (\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u044b \u0435\u0449\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c): \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443, \u0430 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0435\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0441 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a:<\/p>\n<\/li>\n<\/ul>\n<pre><code>const requestEventDetail = async ({ id, cityAlias }: Params) =&gt; { \u00a0\u00a0const response = await request({ \u00a0\u00a0\u00a0\u00a0url: ENDPOINTS.eventDetail.getUrl(id), \u00a0\u00a0\u00a0\u00a0method: ENDPOINTS.eventDetail.method, \u00a0\u00a0\u00a0\u00a0params: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0city_alias: cityAlias \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0});  \u00a0\u00a0\/\/ \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043f\u043e zod-\u0441\u0445\u0435\u043c\u0435 \u00a0\u00a0return eventDetailSchema.parse(response); }<\/code><\/pre>\n<ul>\n<li>\n<p>\u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438 \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 queries. \u0422\u0430\u043a\u0438\u0435 \u043a\u043b\u044e\u0447\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 queries, \u0447\u0442\u043e\u0431\u044b \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u0435\u0448\u043e\u043c. \u041d\u043e \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043b\u044e\u0447\u0435\u0439 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 query: \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043b\u044e\u0447 \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<pre><code>\/\/ \u041a\u043b\u044e\u0447\u0438 const REACT_QUERY_KEYS = { \u00a0\u00a0eventDetail: (id: string) =&gt; ENDPOINTS.eventDetail.getUrl(id), \u00a0\u00a0favorites: () =&gt; ENDPOINTS.favorites.getUrl(), \u00a0\u00a0\/\/ ... };  \/\/ \u0417\u0430\u043f\u0440\u043e\u0441 const query = useQuery({ \u00a0\u00a0queryKey: [REACT_QUERY_KEYS.eventDetail(id), { cityAlias }], \u00a0\u00a0\/\/ ... });  \/\/ \u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0435\u0448\u043e\u043c queryClient.invalidateQueries({ \u00a0\u00a0queryKey: [REACT_QUERY_KEYS.eventDetail(id)], });<\/code><\/pre>\n<ul>\n<li>\n<p>\u041e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 useQuery. \u0425\u0443\u043a useQuery \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u043d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438, \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0432\u043e\u0439 \u0445\u0443\u043a \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 query. \u0422\u0430\u043c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u043f\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u043a\u043b\u044e\u0447\u0435\u0439, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 request \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/li>\n<\/ul>\n<pre><code>const useEventDetailQuery = ({ id, cityAlias }: Params) =&gt; \u00a0\u00a0useQuery({ \u00a0\u00a0\u00a0\u00a0queryKey: [BASE_REACT_QUERY_KEYS.eventDetail(id), { cityAlias }], \u00a0\u00a0\u00a0\u00a0queryFn: () =&gt; requestEventDetail({ id, cityAlias }), \u00a0\u00a0});<\/code><\/pre>\n<ul>\n<li>\n<p>\u0425\u0443\u043a-\u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 useInfiniteQuery \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 \u0441 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c. \u0422\u0430\u043a\u043e\u0439 \u0445\u0443\u043a \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442 API React Query \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b: \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0432 \u0441\u043f\u043b\u043e\u0448\u043d\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041c\u044b \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 \u0438 \u043d\u043e\u043c\u0435\u0440\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0442 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u0425\u0443\u043a-\u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 useInfiniteQuery<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>type PaginationEntity&lt;I&gt; = { \u00a0\u00a0count: number; \u00a0\u00a0next: number | null; \u00a0\u00a0results: I[]; };  type RequestPaginatedDataParams&lt;T, TApi&gt; = { \u00a0\u00a0pageLimit?: number; \u00a0\u00a0startPage?: number; \u00a0\u00a0schemaParser: (raw: PaginationEntity&lt;TApi&gt;) =&gt; PaginationEntity&lt;T&gt;; } &amp; RequestParams;  const requestPaginatedData = async &lt;T, TApi&gt;({ \u00a0\u00a0params, \u00a0\u00a0pageLimit, \u00a0\u00a0startPage = 0, \u00a0\u00a0schemaParser, \u00a0\u00a0...init }: RequestPaginatedDataParams&lt;T, TApi&gt;): Promise&lt;PaginationEntity&lt;T&gt;&gt; =&gt; { \u00a0\u00a0const response = await request&lt;PaginationEntity&lt;TApi&gt;&gt;({ \u00a0\u00a0\u00a0\u00a0params: { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page: startPage, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page_size: pageLimit, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...params, \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0...init, \u00a0\u00a0});  \u00a0\u00a0return schemaParser(response); };  type PaginatedQueryParams&lt;T&gt; = Partial&lt; \u00a0\u00a0UndefinedInitialDataInfiniteOptions&lt; \u00a0\u00a0\u00a0\u00a0PaginationEntity&lt;T&gt;, \u00a0\u00a0\u00a0\u00a0DefaultError, \u00a0\u00a0\u00a0\u00a0InfiniteData&lt;PaginationEntity&lt;T&gt;, number&gt;, \u00a0\u00a0\u00a0\u00a0QueryKey, \u00a0\u00a0\u00a0\u00a0number \u00a0\u00a0&gt; &gt;;  const usePaginatedQuery = &lt;T&gt;({ \u00a0\u00a0initialPageParam = 0, \u00a0\u00a0getNextPageParam = (page) =&gt; page.next, \u00a0\u00a0...queryInit }: PaginatedQueryParams&lt;T&gt;) =&gt; { \u00a0\u00a0const query = useInfiniteQuery({ \u00a0\u00a0\u00a0\u00a0initialPageParam, \u00a0\u00a0\u00a0\u00a0getNextPageParam, \u00a0\u00a0\u00a0\u00a0...queryInit, \u00a0\u00a0});  \u00a0\u00a0const flatData = useMemo( \u00a0\u00a0\u00a0\u00a0() =&gt; query.data?.pages.map((page) =&gt; page.results).flat() ?? [], \u00a0\u00a0\u00a0\u00a0[query.data] \u00a0\u00a0);  \u00a0\u00a0const total = query.data?.pages.at(-1)?.count ?? 0; \u00a0\u00a0const isEmpty = !flatData.length &amp;&amp; query.isSuccess;  \u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0...query, \u00a0\u00a0\u00a0\u00a0flatData, \u00a0\u00a0\u00a0\u00a0isEmpty, \u00a0\u00a0\u00a0\u00a0total, \u00a0\u00a0}; };  \/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: const eventsPaginationEntitySchema = z.object({ \u00a0\u00a0count: z.number(), \u00a0\u00a0next: z.number().nullable(), \u00a0\u00a0results: z.array(eventEntitySchema), });  type RequestEventsParams = { \u00a0\u00a0pageParam: number; \u00a0\u00a0params: Record&lt;string, unknown&gt;; };  const requestEvents = ({ pageParam, params }: RequestEventsParams) =&gt; \u00a0\u00a0requestPaginatedData&lt;EventEntity, EventEntityApi&gt;({ \u00a0\u00a0\u00a0\u00a0params, \u00a0\u00a0\u00a0\u00a0startPage: pageParam, \u00a0\u00a0\u00a0\u00a0url: ENDPOINTS.events.getUrl(), \u00a0\u00a0\u00a0\u00a0method: ENDPOINTS.events.method, \u00a0\u00a0\u00a0\u00a0schemaParser: eventsPaginationEntitySchema.parse, \u00a0\u00a0});  type UseEventsQueryParams = { \u00a0\u00a0params: Record&lt;string, unknown&gt;; };  const useEventsQuery = ({ params }: UseEventsQueryParams) =&gt; \u00a0\u00a0usePaginatedQuery({ \u00a0\u00a0\u00a0\u00a0queryKey: [REACT_QUERY_KEYS.events(), params], \u00a0\u00a0\u00a0\u00a0queryFn: ({ pageParam }) =&gt; requestEvents({ pageParam, params }), \u00a0\u00a0});<\/code><\/pre>\n<\/div>\n<\/details>\n<ul>\n<li>\n<p>SSR-\u0444\u043b\u043e\u0443. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u2014 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u0435\u0448 React Query \u043f\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 query key. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432:<\/p>\n<ol>\n<li>\n<p>\u0412\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 QueryClientProvider.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 QueryClient \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043b\u0438\u0441\u044c).<\/p>\n<\/li>\n<li>\n<p>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e QueryClient \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<\/li>\n<li>\n<p>QueryClient \u0434\u0435\u0433\u0438\u0434\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\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 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0433\u0434\u0435 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>SSR-\u0444\u043b\u043e\u0443<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>\/\/ page.tsx (\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b) type Params = { \u00a0\u00a0id: string; \u00a0\u00a0cityAlias: string; \u00a0\u00a0queryClient: QueryClient; };  \/\/ \u0414\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 const fetchEventDetailQuery = async ({ queryClient, id, cityAlias }: Params) =&gt; \u00a0\u00a0await queryClient.fetchQuery({ \u00a0\u00a0\u00a0\u00a0queryKey: [REACT_QUERY_KEYS.eventDetail(id), { cityAlias }], \u00a0\u00a0\u00a0\u00a0queryFn: async () =&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0requestEventDetail({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0id, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cityAlias, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}), \u00a0\u00a0});  type PageProps = { \u00a0\u00a0params: Promise&lt;{ city: string; id: string }&gt;; };  export default async function Page(props: PageProps) { \u00a0\u00a0const { city, id } = await props.params;  \u00a0\u00a0const queryClient = new QueryClient();  \u00a0\u00a0try { \u00a0\u00a0  await fetchEventDetailQuery({ id, cityAlias: city }); \u00a0\u00a0\u00a0\u00a0return (   &lt;EventDetail         id={id}         cityAlias={city}         dehydratedState={dehydrate(queryClient)}       \/&gt; ); \u00a0\u00a0} catch (error) { \u00a0\u00a0\u00a0\u00a0return &lt;SomethingWentWrongErrorPage \/&gt;; \u00a0\u00a0} }  \/\/ EventDetail.tsx (\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b) type Props = { \u00a0\u00a0id: string; \u00a0\u00a0cityAlias: string; };  const EventDetail = ({ id, cityAlias }: Props) =&gt; { \u00a0\u00a0\/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 useQuery \u0438\u0437 \u043a\u0435\u0448\u0430 \u0434\u0435\u0433\u0438\u0434\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e QueryClient \u00a0\u00a0const event = useEventDetailQuery({ \u00a0\u00a0\u00a0\u00a0id, \u00a0\u00a0\u00a0\u00a0cityAlias, \u00a0\u00a0});  \u00a0\u00a0return &lt;div&gt;{\/* \u0412\u0451\u0440\u0441\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b *\/}&lt;\/div&gt;; };  \/\/ \u0412 \u0431\u043e\u0435\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043b\u0443\u0447\u0448\u0435 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 HOC export const EventDetailWithDehydratedState = ({ \u00a0\u00a0dehydratedState, \u00a0\u00a0...props }: Props &amp; { dehydratedState: unknown }) =&gt; ( \u00a0\u00a0&lt;HydrationBoundary state={dehydratedState}&gt; \u00a0\u00a0\u00a0\u00a0&lt;EventDetail {...props} \/&gt; \u00a0\u00a0&lt;\/HydrationBoundary&gt; );<\/code><\/pre>\n<\/div>\n<\/details>\n<h3>\u0418\u0442\u043e\u0433 \u043e \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435<\/h3>\n<p><a class=\"anchor\" name=\"%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%20%D0%BD%D0%BE%D0%B2%D0%BE%D0%B9%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5\" id=\"\u0418\u0442\u043e\u0433 \u043e \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435\"><\/a><\/p>\n<ul>\n<li>\n<p>\u0415\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0445\u0443\u043a\u043e\u0432, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0443 React Query \u043f\u043e\u0434 \u043d\u0443\u0436\u043d\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0435\u0439\u0441\u0430 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430: \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043e\u0431\u043e\u0433\u0430\u0449\u0435\u043d\u0438\u044f QueryClient \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0445\u0443\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0432\u0435\u0440\u0445 useQuery\/useInfiniteQuery \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043a\u0435\u0448\u0443 QueryClient \u043c\u043e\u0436\u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 React-\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0413\u0440\u0430\u0431\u043b\u0438 \u0438 \u0438\u043d\u0441\u0430\u0439\u0442\u044b<\/h2>\n<p><a class=\"anchor\" name=\"%D0%93%D1%80%D0%B0%D0%B1%D0%BB%D0%B8%20%D0%B8%20%D0%B8%D0%BD%D1%81%D0%B0%D0%B9%D1%82%D1%8B\" id=\"\u0413\u0440\u0430\u0431\u043b\u0438 \u0438 \u0438\u043d\u0441\u0430\u0439\u0442\u044b\"><\/a><\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u043b\u0438 \u0432 \u0441\u0432\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u0438\u0445 \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c. \u042f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0438\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u043a\u0435\u0439\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u043d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u0441.<\/p>\n<h3>\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 queryKey \u043c\u0435\u0436\u0434\u0443 useQuery \u0438 useInfiniteQuery<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%BE%D0%BB%D0%BB%D0%B8%D0%B7%D0%B8%D0%B8%20queryKey%20%D0%BC%D0%B5%D0%B6%D0%B4%D1%83%20useQuery%20%D0%B8%20useInfiniteQuery\" id=\"\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 queryKey \u043c\u0435\u0436\u0434\u0443 useQuery \u0438 useInfiniteQuery\"><\/a><\/p>\n<p>\u041a\u0435\u0439\u0441: \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u041d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430, \u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<pre><code>\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0438\u0306 const paginatedQuery = useInfiniteQuery({ \u00a0\u00a0queryKey: ['my-key', { category: 'music' }], \u00a0\u00a0queryFn: ({ pageParam }) =&gt; \u00a0\u00a0\u00a0\u00a0requestEvents({ pageParam, pageLimit: 20, params: { category: 'music' } }), \u00a0\u00a0\/\/ ... });  \/\/ \u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 const fixedSizeQuery = useQuery({ \u00a0\u00a0queryKey: ['my-key', { category: 'music' }], \u00a0\u00a0queryFn: () =&gt; \u00a0\u00a0\u00a0\u00a0requestEvents({ pageLimit: 5, params: { category: 'music' } }), \u00a0\u00a0\/\/ ... });<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0445\u0443\u043a\u0438, \u043e\u043d\u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0432 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u044f\u0447\u0435\u0439\u043a\u0443 \u043a\u0435\u0448\u0430 React Query. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0439\u0442\u0438 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u044f\u0432\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435 \u044d\u0442\u0438\u0445 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432 query key:<\/p>\n<pre><code>\/\/ \u041f\u043b\u043e\u0445\u043e: useQuery \u0438 useInfiniteQuery \u043f\u0438\u0448\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u044f\u0447\u0435\u0439\u043a\u0443 \u043a\u0435\u0448\u0430 queryKey: ['my-key', { category: 'music' }]  \/\/ \u0425\u043e\u0440\u043e\u0448\u043e: \u043a\u043b\u044e\u0447\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u043b\u044f useQuery \u0438 useInfiniteQuery queryKey: ['my-key-fixed-size', { category: 'music' }] queryKey: ['my-key-paginated', { category: 'music' }]<\/code><\/pre>\n<h3>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" id=\"\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\"><\/a><\/p>\n<p>\u041a\u0435\u0439\u0441: \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0446\u0438\u0439 \u0434\u043b\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043e\u043f\u0446\u0438\u0438 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u0438 \u043e\u043f\u0446\u0438\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0447\u0435\u043d\u044c \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 query key:<\/p>\n<pre><code>queryKey: ['my-key', { options: ['A', 'B', 'C'] }] queryKey: ['my-key', { options: ['B', 'A', 'C'] }] queryKey: ['my-key', { options: ['C', 'B', 'A'] }]<\/code><\/pre>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u0440\u0430\u0437\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u0445 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043a\u0435\u0448\u0435 React Query. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e \u043d\u0435 \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445. \u041c\u044b \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u0434\u0445\u043e\u0434, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0435 \u0432\u0441\u0435\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445, \u0447\u0442\u043e\u0431\u044b query key \u0432\u0441\u0435\u0433\u0434\u0430 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043e\u0434\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>\/\/ \u041f\u043b\u043e\u0445\u043e: \u0440\u0430\u0437\u043d\u044b\u0439 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0440\u0430\u0437\u043d\u044b\u043c query key queryKey: ['my-key', { options: ['A', 'B', 'C'] }] queryKey: ['my-key', { options: ['B', 'A', 'C'] }]  \/\/ \u0425\u043e\u0440\u043e\u0448\u043e: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f, query key \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 queryKey: ['my-key', sortArrays({ options: ['A', 'B', 'C'] })] queryKey: ['my-key', sortArrays({ options: ['B', 'A', 'C'] })]<\/code><\/pre>\n<h3>\u0420\u0430\u0437\u043d\u044b\u0435 query key \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (SSR-\u0444\u043b\u043e\u0443)<\/h3>\n<p><a class=\"anchor\" name=\"%D0%A0%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5%20query%20key%20%D0%BD%D0%B0%20%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%B5%20%D0%B8%20%D0%BD%D0%B0%20%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D0%B5%20(SSR-%D1%84%D0%BB%D0%BE%D1%83)\" id=\"\u0420\u0430\u0437\u043d\u044b\u0435 query key \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (SSR-\u0444\u043b\u043e\u0443)\"><\/a><\/p>\n<p>\u041f\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0441\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e query key, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u0430\u043a\u043e\u0432\u044b\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0440\u0438\u0441\u043a\u043e\u0432\u0430\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 query key \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u0432\u044b, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0434\u0430\u0442\u0430\u043c\u0438 \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0432\u0432\u0438\u0434\u0443 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u043e\u0432\u044b\u0445 \u043f\u043e\u044f\u0441\u043e\u0432.<\/p>\n<p>\u0420\u0430\u0437\u043b\u0438\u0447\u0438\u0435 query key \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043b\u0438\u0448\u043d\u0435\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a \u0441\u043a\u0430\u0447\u043a\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044e \u043a\u043b\u044e\u0447\u0435\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<h3>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0443\u0436\u043d\u043e \u0435\u0435 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c<\/h3>\n<p><a class=\"anchor\" name=\"%D0%95%D1%81%D0%BB%D0%B8%20%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%BE%D1%88%D0%BB%D0%B0%20%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0,%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B5%D0%B5%20%D0%B2%D1%8B%D0%B1%D1%80%D0%BE%D1%81%D0%B8%D1%82%D1%8C\" id=\"\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0443\u0436\u043d\u043e \u0435\u0435 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c\"><\/a><\/p>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0443\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435\u043a\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438, \u0430 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 throw. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e React Query \u043d\u0435 \u043c\u043e\u0433 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0438, \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0432\u0441\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0431\u044b\u043b\u0438 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u043c\u0438. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434, \u043c\u044b \u043f\u043e\u0448\u043b\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<pre><code>\/\/ \u041f\u043b\u043e\u0445\u043e: \u043e\u0448\u0438\u0431\u043a\u0430 \u043d\u0435 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, React Query \u0441\u0447\u0438\u0442\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u043c useQuery({ \u00a0\u00a0queryFn: () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = &lt;...&gt;;  \u00a0\u00a0\u00a0\u00a0if (response.error) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return null; \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0return response.data; \u00a0\u00a0}, });  \/\/ \u0425\u043e\u0440\u043e\u0448\u043e: \u043e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f, React Query \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 useQuery({ \u00a0\u00a0queryFn: () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = &lt;...&gt;;  \u00a0\u00a0\u00a0\u00a0if (response.error) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0throw new Error(response.error); \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0return response.data; \u00a0\u00a0}, });<\/code><\/pre>\n<h3>\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%B0%D0%B3%D0%B8%D0%BD%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D0%BE%D0%B3%D0%BE%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82%20%D0%BC%D0%B5%D0%B4%D0%BB%D0%B5%D0%BD%D0%BD%D0%BE\" id=\"\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\"><\/a><\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a (useInfiniteQuery). \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u0435\u0448\u0430 \u0438\u043b\u0438 \u0432\u044b \u044f\u0432\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 refetch(). \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 React Query \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u2014 \u0438 \u0442\u0430\u043a, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439, \u0442\u0430\u043a\u0430\u044f \u0434\u043e\u043b\u0433\u0430\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439. \u0411\u0443\u0434\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e 100 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0435\u043c \u0434\u0432\u0430 \u0434\u0435\u0441\u044f\u0442\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e 10 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043d\u0435\u0442 \u0438\u043d\u043e\u0433\u043e \u0432\u044b\u0445\u043e\u0434\u0430, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0441\u0442\u044b\u043b\u044c \u0438 \u0438\u0434\u0442\u0438 \u0432 \u043e\u0431\u0445\u043e\u0434 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 React Query. \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439 (\u043d\u0443\u043c\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043d\u0443\u043b\u044f):<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>import { useInfiniteQuery, useQueryClient, type InfiniteData } from '@tanstack\/react-query';  const PAGE_LIMIT = 10; const MAX_LIMIT = 100; const QUERY_KEY = ['my-key'];  \/\/ \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0437\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 const requestManyEvents = async (eventsCount: number) =&gt; { \u00a0\u00a0let eventsCountRest = eventsCount; \u00a0\u00a0let startPage = 0; \u00a0\u00a0const requests = [];  \u00a0\u00a0while (eventsCountRest &gt; 0) { \u00a0\u00a0\u00a0\u00a0const pageLimit = Math.min(MAX_LIMIT, eventsCountRest); \u00a0\u00a0\u00a0\u00a0requests.push( \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0requestEvents({ startPage, pageLimit }) \u00a0\u00a0\u00a0\u00a0);  \u00a0\u00a0\u00a0\u00a0startPage++; \u00a0\u00a0\u00a0\u00a0eventsCountRest -= pageLimit; \u00a0\u00a0}  \u00a0\u00a0const responsePages = await Promise.all(requests);  \u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0events: responsePages.map((page) =&gt; page.results).flat(), \u00a0\u00a0\u00a0\u00a0total: responsePages.at(-1).total, \u00a0\u00a0}; };  \/\/ \u0420\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 useInfiniteQuery const splitIntoInfiniteQueryPages = ( \u00a0\u00a0events: EventEntity[], \u00a0\u00a0total: number ): InfiniteData&lt;EventEntity&gt; =&gt; { \u00a0\u00a0const totalPagesCount = Math.ceil(total \/ PAGE_LIMIT); \u00a0\u00a0const pagesCount = Math.ceil(events.length \/ PAGE_LIMIT);  \u00a0\u00a0return { \u00a0\u00a0\u00a0\u00a0pages: events.reduce&lt;PaginationEntity&lt;EventEntity&gt;[]&gt;((acc, event, i) =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const page = Math.floor(i \/ PAGE_LIMIT);  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!acc[page]) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0acc[page] = { results: [], count: total, next: null };  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (page &lt; totalPagesCount - 1) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0acc[page].next = page + 1; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0acc[page].results.push(event);  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return acc; \u00a0\u00a0\u00a0\u00a0}, []),  \u00a0\u00a0\u00a0\u00a0pageParams: Array.from({ length: pagesCount }).map((_, i) =&gt; i), \u00a0\u00a0}; };  const useEventsQuery = () =&gt; { \u00a0\u00a0const queryClient = useQueryClient();  \u00a0\u00a0const query = useInfiniteQuery({ \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0queryKey: QUERY_KEY, \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0queryFn: ({ pageParam }) =&gt; requestEvents({ startPage: pageParam }), \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ ... \u00a0\u00a0\u00a0\u00a0}, \u00a0\u00a0\u00a0\u00a0queryClient \u00a0\u00a0);  \u00a0\u00a0const flatData = useMemo( \u00a0\u00a0\u00a0\u00a0() =&gt; query.data?.pages.map((page) =&gt; page.results).flat() ?? [], \u00a0\u00a0\u00a0\u00a0[query.data] \u00a0\u00a0);  \u00a0\u00a0const refetchAll = useCallback(async () =&gt; { \u00a0\u00a0\u00a0\u00a0let count = Math.max(flatData.length, VK_WIDGET_EVENTS_PAGE_LIMIT);  \u00a0\u00a0\u00a0\u00a0\/\/ \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0431\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438, \u00a0\u00a0\u00a0\u00a0\/\/ \u043d\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u00a0\u00a0\u00a0\u00a0\/\/ \u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 (\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0442\u044c, \u00a0\u00a0\u00a0\u00a0\/\/ \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u044f\u0432\u043d\u044b\u0435 limit \u0438 offset) \u00a0\u00a0\u00a0\u00a0if (count % PAGE_LIMIT !== 0) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0count = Math.ceil(count \/ PAGE_LIMIT) * PAGE_LIMIT; \u00a0\u00a0\u00a0\u00a0}  \u00a0\u00a0\u00a0\u00a0const { events, total } = await requestManyEvents(count);  \u00a0\u00a0\u00a0\u00a0const pages = splitIntoInfiniteQueryPages(events, total);  \u00a0\u00a0\u00a0\u00a0queryClient.setQueryData(QUERY_KEY, pages); \u00a0\u00a0}, [flatData.length, queryClient]);  \u00a0\u00a0return { ...query, flatData, refetchAll }; };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u043a \u0442\u0430\u043a\u0438\u043c \u043a\u043e\u0441\u0442\u044b\u043b\u044f\u043c \u043a\u0440\u0430\u0439\u043d\u0435 \u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0422\u0430\u043a \u0432\u044b \u043b\u0438\u0448\u0430\u0435\u0442\u0435\u0441\u044c \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432 React Query \u0432 \u0447\u0430\u0441\u0442\u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0440\u0443\u0442\u0438\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0442\u043e \u043b\u0443\u0447\u0448\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438 (\u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0431\u044b\u043b\u043e \u043c\u0435\u043d\u044c\u0448\u0435) \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0435\u0448, \u0430 \u043d\u0435 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e, \u0441 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0438.<\/p>\n<h2>\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438<\/h2>\n<p><a class=\"anchor\" name=\"%D0%A7%D1%82%D0%BE%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D0%BB%D0%B8\" id=\"\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\"><\/a><\/p>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<td>\n<p align=\"left\"><strong>\u0411\u044b\u043b\u043e (MobX)<\/strong><\/p>\n<\/td>\n<td>\n<p align=\"left\"><strong>\u0421\u0442\u0430\u043b\u043e (React Query)<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 GET \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u043a\u0435\u0448\u0430<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0413\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u0435 \u0441\u0442\u043e\u0440\u044b \u0441 \u0434\u043b\u0438\u043d\u043d\u043e\u0439 \u0446\u0435\u043f\u043e\u0447\u043a\u043e\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 (\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432\u0434\u0432\u043e\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430)<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0412\u044b\u0441\u043e\u043a\u0438\u0439 \u043f\u043e\u0440\u043e\u0433 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 MobX<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0439 \u0434\u043b\u044f React \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 \u0445\u0443\u043a\u0430\u043c\u0438<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447: \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u0430\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0440\u043e\u0433\u0438\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u0440\u0438\u0441\u043a \u043e\u0432\u0435\u0440\u0438\u043d\u0436\u0438\u043d\u0438\u0440\u0438\u043d\u0433\u0430<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u0427\u0435\u0442\u043a\u0438\u0439 \u0444\u043b\u043e\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2>\u041a\u043e\u0433\u0434\u0430 MobX \u0432\u0441\u0435 \u0435\u0449\u0435 \u0443\u043c\u0435\u0441\u0442\u0435\u043d<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%BE%D0%B3%D0%B4%D0%B0%20MobX%20%D0%B2%D1%81%D0%B5%20%D0%B5%D1%89%D0%B5%20%D1%83%D0%BC%D0%B5%D1%81%D1%82%D0%B5%D0%BD\" id=\"\u041a\u043e\u0433\u0434\u0430 MobX \u0432\u0441\u0435 \u0435\u0449\u0435 \u0443\u043c\u0435\u0441\u0442\u0435\u043d\"><\/a><\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u0435\u0437 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0431\u044d\u043a\u0435\u043d\u0434\u0430. \u041a\u043e\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0442\u043e\u043d\u043a\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, MobX\u2011\u0441\u0442\u043e\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u044f\u0432\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u0431\u0438\u0437\u043d\u0435\u0441\u2011\u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0442 UI.<\/p>\n<\/li>\n<li>\n<p>OO\u041f\u2011\u0441\u0442\u0438\u043b\u044c \u0438 \u00ab\u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435\u00bb \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443\u0436\u0435 \u0436\u0438\u0432\u0443\u0442 \u043a\u043b\u0430\u0441\u0441\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a Phaser, Three.js), \u0442\u043e MobX-\u0441\u0442\u043e\u0440\u044b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u043d\u043e, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u0438\u0437 \u041e\u041e\u041f. \u0423 \u043d\u0430\u0441 \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0434\u0430\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0440\u0435\u0433\u043b\u0430\u043c\u0435\u043d\u0442 \u043e \u0442\u043e\u043c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u043a\u0435\u0439\u0441\u0430\u0445 \u0441\u0442\u043e\u0438\u0442 \u0438\u043b\u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 MobX. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0436\u0435 React Query \u0432\u044b \u0433\u0432\u043e\u0437\u0434\u044f\u043c\u0438 \u043f\u0440\u0438\u0431\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0435\u0431\u044f \u043a \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435, \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u0445\u0443\u043a\u043e\u0432 \u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 React.<\/p>\n<\/li>\n<li>\n<p>\u0413\u0440\u0430\u043d\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e observable-\u043f\u043e\u043b\u044f, MobX \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a \u0441\u0442\u043e\u0440\u0443, \u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u044d\u0442\u043e \u043f\u043e\u043b\u0435. \u042d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0432 MobX \u043e\u0442 \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u0432 React \u2014 \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 state \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e state \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e (\u0430 \u044d\u0442\u043e \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0434\u043b\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0437\u043a\u043e\u0433\u043e \u043a\u0440\u0443\u0433\u0430 \u043a\u0435\u0439\u0441\u043e\u0432), \u0442\u043e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 MobX \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. React Query \u2014 \u044d\u0442\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0430 \u043d\u0435 \u043f\u0440\u043e \u0441\u0442\u0435\u0439\u0442-\u043c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u0442\u044c\u0441\u044f, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MobX \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 React Query. \u0412\u043e\u043f\u0440\u043e\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0446\u0435\u043d\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p><a class=\"anchor\" name=\"%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B8%20%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D1%8B\" id=\"\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434\u044b\"><\/a><\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0430\u043b\u0441\u044f \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b mutations \u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430, \u0445\u043e\u0442\u044f \u043e\u043d\u0438 \u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0432 React Query \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e. \u042f \u0432\u0441\u0435 \u0436\u0435 \u0445\u043e\u0442\u0435\u043b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u0439 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u0440\u0438\u0441\u043a \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>\u0412\u043d\u0435\u0434\u0440\u0438\u0432 React Query, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0447\u0442\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u0435\u0430\u043d\u0441\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u0434\u0432\u043e\u0435 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0447\u0430\u0441\u0442\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.<\/p>\n<p>React Query \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438, \u043a\u0435\u0448\u0435\u043c \u0438 SSR\u2011\u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0435\u0439. \u0418\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0431\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u0442 \u0431\u0435\u0437 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0438\u0441\u043a\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c. \u0413\u043b\u044f\u0434\u044f \u043d\u0430 \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0442 MobX, \u0437\u0430\u043c\u0435\u043d\u044f\u044f \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043d\u0430 React Query, \u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 React. \u041d\u043e \u043d\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e MobX \u043f\u043b\u043e\u0445 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e React Query \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0440\u0435\u0448\u0438\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 React Query \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0412 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0432\u0430\u043c \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0438 \u0431\u044b\u043b \u043b\u0438 \u0443 \u0432\u0430\u0441 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n<p>\u0410 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u043c\u043e\u0438\u0445 \u043a\u043e\u043b\u043b\u0435\u0433-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/882078\/\" rel=\"noopener noreferrer nofollow\">Three.js c \u043d\u0443\u043b\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435: \u043a\u0430\u043a \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0440\u043a\u0430\u0434\u043d\u0443\u044e 3D-\u0438\u0433\u0440\u0443. \u0427\u0430\u0441\u0442\u044c 1<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/874464\/\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 Web: \u043a\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b \u0432 2025?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/864302\/\" rel=\"noopener noreferrer nofollow\">\u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: CSS, WebP, Canvas, Lottie, Spine \u0438 \u0441\u0435\u043a\u0432\u0435\u043d\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/843054\/\" rel=\"noopener noreferrer nofollow\">Next.js + Playwright. \u041a\u0430\u043a \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0442\u0435\u0441\u0442\u044b \u0438 \u0447\u0442\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0448\u043b\u043e<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/kts\/articles\/821111\/\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e npm\/yarn link<\/a><\/p>\n<\/li>\n<\/ul>\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\/935086\/\"> https:\/\/habr.com\/ru\/articles\/935086\/<\/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<figure class=\"full-width\"><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442. \u042f \u0414\u0438\u043c\u0430 \u0420\u0430\u0433\u043e\u0437\u0438\u043d, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 <a href=\"https:\/\/kts.tech\/\" rel=\"noopener noreferrer nofollow\">KTS<\/a>. \u042d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u044f \u0445\u043e\u0447\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u0438.<\/p>\n<p>\u041f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u043d\u0430\u0437\u0430\u0434 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u2014 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a \u0442\u043e\u043c\u0443 \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 \u0443\u0436\u0435 \u0436\u0438\u043b\u0438 \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434 \u0434\u0432\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u2014 CSR-\u0432\u0435\u0440\u0441\u0438\u044f (Client Side Rendering) \u0438 SSR\u2011\u0432\u0435\u0440\u0441\u0438\u044f (Server Side Rendering), \u2014 \u0430 MobX\u2011\u0441\u0442\u043e\u0440\u044b \u0432\u0441\u0435 \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043d\u043e\u0432\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043d\u043e\u0441\u0438\u043b \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 (\u0430 \u0442\u043e \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e), \u0435\u0449\u0435 \u043a\u0443\u0447\u0443 \u0441\u0432\u044f\u0437\u0435\u0439, \u0438 \u0432 \u043a\u0430\u043a\u043e\u0439\u2011\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 HTTP\u2011\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u044c\u044e \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0435\u0435 \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u043e\u0441\u0442\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0448\u0430\u0433 \u0437\u0430 \u0448\u0430\u0433\u043e\u043c \u043f\u0435\u0440\u0435\u0432\u0435\u043b\u0438 \u0442\u0430\u043a\u0438\u0435 \u0441\u0442\u043e\u0440\u044b \u043d\u0430 React Query, \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0438 \u043a\u043e\u0434 \u0432\u043e\u043a\u0440\u0443\u0433 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u224850\u202f% \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c \u043e\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 GET\u2011\u043e\u0432. \u041f\u043e\u043f\u0443\u0442\u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0430\u044e \u043e \u043d\u0430\u0448\u0438\u0445 \u0433\u0440\u0430\u0431\u043b\u044f\u0445 \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438 \u043f\u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0427\u0442\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u044e \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0438\u0437\u2011\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0437\u0430\u0434\u0443\u043c\u0430\u043b\u0438\u0441\u044c \u043e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438: \u043a\u0430\u043a \u0436\u0438\u0442\u044c, \u043f\u043e\u043a\u0430 MobX \u0438 React Query \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0431\u043e\u043a \u043e \u0431\u043e\u043a;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0434\u0435 \u043d\u0430\u0431\u0438\u043b\u0438 \u0448\u0438\u0448\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u2014 \u0447\u0442\u043e \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u0438 \u0433\u0434\u0435 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0434\u0435\u0440\u0436\u0438\u043c MobX.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u2011\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438 \u0442\u0438\u043c\u043b\u0438\u0434\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0443\u043c\u0430\u044e\u0442 \u043e \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0435 \u043d\u0430 React Query \u0438 \u0445\u043e\u0442\u044f\u0442 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438.<\/p>\n<p>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D0%BD%D0%B0%E2%80%AFMobX\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9B%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" rel=\"noopener noreferrer nofollow\">\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" rel=\"noopener noreferrer nofollow\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" rel=\"noopener noreferrer nofollow\">\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#CSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%D0%B1%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5%20MobX-%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%B2\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%B1%D0%BE%D0%BB%D0%B8%D1%82%20%D0%B2%20MobX%20%D0%B8%20%D0%BE%D1%82%20%D1%87%D0%B5%D0%B3%D0%BE%20%D1%85%D0%BE%D1%82%D0%B8%D0%BC%20%D0%B8%D0%B7%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%D1%81%D1%8F\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BB%D0%B8%20React%20Query\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D1%8F%20%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9D%D0%BE%D0%B2%D1%8B%D0%B9%20%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%20%D0%BA%20%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0%D0%BC\" rel=\"noopener noreferrer nofollow\">\u041d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%20%D0%BD%D0%BE%D0%B2%D0%BE%D0%B9%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433 \u043e \u043d\u043e\u0432\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%93%D1%80%D0%B0%D0%B1%D0%BB%D0%B8%20%D0%B8%20%D0%B8%D0%BD%D1%81%D0%B0%D0%B9%D1%82%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0413\u0440\u0430\u0431\u043b\u0438 \u0438 \u0438\u043d\u0441\u0430\u0439\u0442\u044b<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9A%D0%BE%D0%BB%D0%BB%D0%B8%D0%B7%D0%B8%D0%B8%20queryKey%20%D0%BC%D0%B5%D0%B6%D0%B4%D1%83%20useQuery%20%D0%B8%20useInfiniteQuery\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 queryKey \u043c\u0435\u0436\u0434\u0443 useQuery \u0438 useInfiniteQuery<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A0%D0%B0%D0%B7%D0%BD%D1%8B%D0%B5%20query%20key%20%D0%BD%D0%B0%20%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%B5%20%D0%B8%20%D0%BD%D0%B0%20%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D0%B5%20(SSR-%D1%84%D0%BB%D0%BE%D1%83)\" rel=\"noopener noreferrer nofollow\">\u0420\u0430\u0437\u043d\u044b\u0435 query key \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (SSR-\u0444\u043b\u043e\u0443)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%95%D1%81%D0%BB%D0%B8%20%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%BE%D1%88%D0%BB%D0%B0%20%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0,%20%D0%BD%D1%83%D0%B6%D0%BD%D0%BE%20%D0%B5%D0%B5%20%D0%B2%D1%8B%D0%B1%D1%80%D0%BE%D1%81%D0%B8%D1%82%D1%8C\" rel=\"noopener noreferrer nofollow\">\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u043d\u0443\u0436\u043d\u043e \u0435\u0435 \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D0%B5%D1%80%D0%B5%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%B0%D0%B3%D0%B8%D0%BD%D0%B8%D1%80%D1%83%D0%B5%D0%BC%D0%BE%D0%B3%D0%BE%20%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B0%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82%20%D0%BC%D0%B5%D0%B4%D0%BB%D0%B5%D0%BD%D0%BD%D0%BE\" rel=\"noopener noreferrer nofollow\">\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0433\u0438\u043d\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e<\/a><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D0%BB%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9A%D0%BE%D0%B3%D0%B4%D0%B0%20MobX%20%D0%B2%D1%81%D0%B5%20%D0%B5%D1%89%D0%B5%20%D1%83%D0%BC%D0%B5%D1%81%D1%82%D0%B5%D0%BD\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0433\u0434\u0430 MobX \u0432\u0441\u0435 \u0435\u0449\u0435 \u0443\u043c\u0435\u0441\u0442\u0435\u043d<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B8%20%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0432\u043e\u0434\u044b<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX<\/h2>\n<p><a class=\"anchor\" name=\"%D0%98%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%B0%D1%8F%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0%20%D0%BD%D0%B0%E2%80%AFMobX\" id=\"\u0418\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX\">\u043a\u0442\u0443\u0440\u0430 \u043d\u0430\u202fMobX&#187;<\/a><\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u0432\u0435\u0441\u0442\u0438 React Query, \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435, \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435) \u043c\u044b \u0434\u0435\u0440\u0436\u0430\u043b\u0438 \u0432 MobX\u2011\u0441\u0442\u043e\u0440\u0430\u0445. \u041d\u0438\u0436\u0435 \u2014 \u043e\u0447\u0435\u043d\u044c \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e. \u0412 \u0431\u043e\u0435\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435\/\u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u043e\u043b\u044f, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0439 \u0438 \u043f\u0440\u043e\u0447\u0435\u0435, \u043d\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0432\u044b\u0436\u0438\u043c\u043a\u0443.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u044e \u0443\u043f\u043e\u0440 \u043d\u0430 SSR\u2011\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Next.js \u2014 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043c \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043f\u043e \u0445\u043e\u0434\u0443 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u044f \u0431\u0443\u0434\u0443 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0435\u043c\u0430\u0440\u043a\u0438 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0447\u0438\u0441\u0442\u043e\u043c CSR. \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u043d\u0435\u043c \u0432\u0441\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h3>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/h3>\n<p><a class=\"anchor\" name=\"%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" id=\"\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b\">\u0435 \u0441\u0442\u043e\u0440\u044b&#187;><\/a><\/p>\n<p>\u042d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442 \u043d\u0435\u043a\u043e\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u043e\u0440\u0430 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<pre><code>import { makeAutoObservable, runInAction } from 'mobx';  export class UserStore { \u00a0\u00a0user: UserEntity | null = null;  \u00a0\u00a0constructor() { \u00a0\u00a0\u00a0\u00a0makeAutoObservable(this); \u00a0\u00a0}  \u00a0\u00a0init = async () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = await fetchUser();  \u00a0\u00a0\u00a0\u00a0if (response.error) return;  \u00a0\u00a0\u00a0\u00a0runInAction(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.user = response.data; \u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0}; }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u2011\u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u043f\u043e\u043b\u0435 user \u0438 \u043c\u0435\u0442\u043e\u0434 init(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f makeAutoObservable \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u0442\u043e\u0440\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c (\u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0438\u0442\u0430\u0435\u0442 user, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445).<\/p>\n<p>\u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d: \u0441\u0442\u043e\u0440 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u0443\u043a\u0438 \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f. \u0412 \u0431\u043e\u0435\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u043a\u0443\u043a\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041d\u043e \u0434\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0445\u0432\u0430\u0442\u0438\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u043b\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u0432.<\/p>\n<p>\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0441\u0442\u043e\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u0435\u0433\u043e singleton\u2011\u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u043b \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442:<\/p>\n<pre><code>const IS_SSR = typeof window === 'undefined';  enableStaticRendering(IS_SSR);  const StoreContext = createContext&lt;UserStore | null&gt;(null);  export const UserStoreProvider = ({ children }: { children: ReactNode }) =&gt; { \u00a0\u00a0const ref = useRef&lt;UserStore | null&gt;(null);  \u00a0\u00a0if (!ref.current || IS_SSR) { \u00a0\u00a0\u00a0\u00a0ref.current = new UserStore(); \u00a0\u00a0}  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0&lt;StoreContext.Provider value={ref.current}&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{children} \u00a0\u00a0\u00a0\u00a0&lt;\/StoreContext.Provider&gt; \u00a0\u00a0); };<\/code><\/pre>\n<p>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 UserStore \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u0436\u0438\u0432\u0435\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0436\u0435, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0436\u0438\u0432\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0439 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0438\u0441\u0442\u0438\u043d\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u2014 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442: \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0437\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 UserStore, \u0447\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u043b\u0438\u0441\u044c \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n<h3>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9B%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5%20%D1%81%D1%82%D0%BE%D1%80%D1%8B\" id=\"\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b\">\u0435 \u0441\u0442\u043e\u0440\u044b&#187;<\/a><\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b. \u0422\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u0436\u0438\u0432\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c (\u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439): \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f, \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u0424\u043b\u043e\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432 useEffect \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c loadData(), \u0441\u0442\u043e\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043a\u043b\u0430\u0434\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 observable\u2011\u043f\u043e\u043b\u0435. \u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043b\u0438\u043d\u0435\u0439\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0424\u043b\u043e\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (SSR) \u2014 Next.js \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 loadInitialData(), \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u0440\u0430. \u041c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u0440\u043e\u043f\u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0438\u0445 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430. \u041a\u043b\u0438\u0435\u043d\u0442 \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0438 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<pre><code>import { makeAutoObservable, runInAction } from 'mobx';  type Params = { initialData?: BlogPostEntity };  export class BlogPostPageStore { \u00a0\u00a0blogPost: BlogPostEntity | null = null;  \u00a0\u00a0constructor({ initialData }: Params = {}) { \u00a0\u00a0\u00a0\u00a0if (initialData) this.blogPost = initialData;  \u00a0\u00a0\u00a0\u00a0makeAutoObservable(this); \u00a0\u00a0}  \u00a0\u00a0\/\/ \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0444\u043b\u043e\u0443 (CSR) \u00a0\u00a0loadData = async () =&gt; { \u00a0\u00a0\u00a0\u00a0const response = await fetchBlogPost();  \u00a0\u00a0\u00a0\u00a0if (response.data) { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0runInAction(() =&gt; { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.blogPost = response.data; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}); \u00a0\u00a0\u00a0\u00a0} \u00a0\u00a0};  \u00a0\u00a0\/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0444\u043b\u043e\u0443 (SSR) \u00a0\u00a0static loadInitialData = () =&gt; fetchBlogPost(); }<\/code><\/pre>\n<h3>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/h3>\n<p><a class=\"anchor\" name=\"%D0%A1%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" id=\"\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)\">\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)&#187;<\/a><\/p>\n<p>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<pre><code>export default async function Page() { \u00a0\u00a0const initial = await BlogPostPageStore.loadInitialData();  \u00a0\u00a0if (!initial.data) notFound();  \u00a0\u00a0return &lt;BlogPostPage initialData={initial.data} \/&gt;; }<\/code><\/pre>\n<h3>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)<\/h3>\n<p><a class=\"anchor\" name=\"%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B9%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%20(SSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5)\" id=\"\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)\">\u043d\u0438\u0446\u044b (SSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435)&#187;><\/a><\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0438\u043c\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u043e\u0440:<\/p>\n<pre><code>'use client';  import { observer } from 'mobx-react-lite';  const BlogPostPage = ({ initialData }: { initialData: BlogPostEntity }) =&gt; { \u00a0\u00a0const [store] = useState(() =&gt; new BlogPostPageStore({ initialData }));  \u00a0\u00a0if (!store.blogPost) return null;  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\/\/ ... \u00a0\u00a0); };  export default observer(BlogPostPage);<\/code><\/pre>\n<h3>CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p><a class=\"anchor\" name=\"CSR-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5\" id=\"CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\">\u0435\u043d\u0438\u0435&#187;><\/a><\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b \u0432\u044b\u0437\u043e\u0432 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0442\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 useEffect:<\/p>\n<pre><code>import { observer } from 'mobx-react-lite';  export const BlogPostPage = ({ initialData }: { initialData: BlogPostEntity }) =&gt; { \u00a0\u00a0const [store] = useState(() =&gt; new BlogPostPageStore({ initialData }));  \u00a0\u00a0useEffect(() =&gt; { \u00a0\u00a0\u00a0\u00a0store.loadData(); \u00a0\u00a0}, []);  \u00a0\u00a0if (!store.blogPost) return &lt;div&gt;\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/div&gt;;  \u00a0\u00a0return ( \u00a0\u00a0\u00a0\u00a0\/\/ ... \u00a0\u00a0); };  export default observer(BlogPostPage);<\/code><\/pre>\n<h3>\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432<\/h3>\n<p><a class=\"anchor\" name=\"%D0%98%D1%82%D0%BE%D0%B3%20%D0%BE%D0%B1%20%D0%B0%D1%80%D1%85%D0%B8%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B5%20MobX-%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%B2\" id=\"\u0418\u0442\u043e\u0433 \u043e\u0431 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432\">\u0440\u0435 MobX-\u0441\u0442\u043e\u0440\u043e\u0432&#187;<\/a><\/p>\n<ul>\n<li>\n<p>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b.<\/p>\n<\/li>\n<li>\n<p>\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u0445\u0440\u0430\u043d\u044f\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u044b \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430, \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b. \u0422\u0430\u043a\u0438\u0435 \u0441\u0442\u043e\u0440\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u0437 API.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0443\u0442\u0438\u043d\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0440\u043d\u044b\u043c\u0438 \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f<\/h3>\n<p><a class=\"anchor\" name=\"%D0%A7%D1%82%D0%BE%20%D0%B1%D0%BE%D0%BB%D0%B8%D1%82%20%D0%B2%20MobX%20%D0%B8%20%D0%BE%D1%82%20%D1%87%D0%B5%D0%B3%D0%BE%20%D1%85%D0%BE%D1%82%D0%B8%D0%BC%20%D0%B8%D0%B7%D0%B1%D0%B0%D0%B2%D0%B8%D1%82%D1%8C%D1%81%D1%8F\" id=\"\u0427\u0442\u043e \u0431\u043e\u043b\u0438\u0442 \u0432 MobX \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u0445\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f\">\u043e\u0442\u0438\u043c \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f&#187;><\/a><\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b: \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u043e\u0431\u043d\u0443\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u043e\u0440\u0430\u0445. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0447\u0430\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u043b\u0438\u0441\u044c \u0432 \u043f\u043e\u0434\u0441\u0442\u043e\u0440\u044b. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u0432\u0443\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (CSR \u0438 SSR), \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0431\u044b\u043b\u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438, \u043c\u044b \u0432\u044b\u043d\u043e\u0441\u0438\u043b\u0438 \u043e\u0431\u0449\u0438\u0435 \u0432\u0435\u0449\u0438 \u0432 \u00ab\u0431\u0430\u0437\u043e\u0432\u044b\u0439\u00bb \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u043e\u0442 \u043d\u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u043e\u0440\u044b \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u043a\u0430\u043a \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f\u0442 \u043c\u0435\u0436\u0434\u0443 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u0432\u0441\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u043c\u043d\u0435 \u0434\u0430\u0436\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u0434-\u0440\u0435\u0432\u044c\u044e \u043d\u0430\u043a\u0438\u0434\u0430\u0442\u044c UML-\u0441\u0445\u0435\u043c\u0443 \u0441\u0442\u043e\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f\u2026<\/p>\n<\/li>\n<li>\n<p>\u0414\u0432\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f SSR \u0438 CSR: \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u0432\u0443\u0445 \u0444\u043b\u043e\u0443 (CSR \u0438 SSR) \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e\u0439, \u043c\u043d\u043e\u0433\u043e \u0440\u0438\u0441\u043a\u0430 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443, \u0445\u043e\u0442\u044f \u0432 \u0446\u0435\u043b\u043e\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u044f\u043c\u043e\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83%20%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BB%D0%B8%20React%20Query\" id=\"\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 React Query\">React Query&#187;><\/a><\/p>\n<p>\u041d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0435 \u0441 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u0437\u2011\u0437\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0442\u043e\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u0440\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0443\u0445\u043e\u0434\u0435 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0432\u0438\u0437\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0432 API. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0438\u0434\u0435\u043b \u044d\u043a\u0440\u0430\u043d \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0430 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0430 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u043e\u0439. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u2014 \u044d\u0442\u043e \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u0441\u0435\u0449\u0430\u0435\u043c\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430.<\/p>\n<ul>\n<li>\n<p>\u041a\u0435\u0448 React Query \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2014 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0430 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e \u0434\u0430\u043d\u043d\u044b\u043c \u0438\u0437 \u043a\u0435\u0448\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u0420\u0430\u043d\u044c\u0448\u0435 \u0441\u0442\u043e\u0440 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u043b\u0441\u044f, DOM \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f, \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0443\u043b\u0435\u0442\u0430\u043b\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0421 React Query \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0438 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0435 \u00ab\u043f\u0440\u044b\u0433\u0430\u0435\u0442\u00bb.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439: \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u00ab\u043e\u0431\u0432\u044f\u0437\u043a\u0438\u00bb, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438 \u0432 MobX (\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u043e\u0448\u0438\u0431\u043e\u043a, \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u0430\u0433\u0438\u043d\u0430\u0446\u0438\u0435\u0439, \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445), \u0441\u0442\u0430\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0438 \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u0431\u044b\u043b\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u0430. React Query \u0432\u0437\u044f\u043b \u043d\u0430 \u0441\u0435\u0431\u044f \u043a\u0435\u0448 \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u0430 \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0441\u043a\u043e\u043d\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u0438\u0437\u043d\u0435\u0441\u2011\u043b\u043e\u0433\u0438\u043a\u0435.<\/p>\n<h2>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438<\/h2>\n<p><a class=\"anchor\" name=\"%D0%A1%D1%82%D1%80%D0%B0%D1%82%D0%B5%D0%B3%D0%B8%D1%8F%20%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8\" id=\"\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438\">\u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438&#187;<\/a><\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u0443\u0431\u0435\u0434\u0438\u043b\u0438\u0441\u044c, \u0447\u0442\u043e React Query \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442<\/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-469974","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/469974","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=469974"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/469974\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=469974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=469974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=469974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}