{"id":373856,"date":"2024-05-21T05:45:55","date_gmt":"2024-05-21T05:45:55","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=373856"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=373856","title":{"rendered":"<span>\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e Next.js. 2\/3<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0432\u0442\u043e\u0440\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/804663\/\">\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/810055\/\">\u0422\u0440\u0435\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/my-js.org\/docs\/guide\/nextjs\/\">\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, Next.js \u2014 \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u0442\u0435 JavaScript \u0438 <a href=\"https:\/\/react.dev\/\">React<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f Next.js \u0432\u0435\u0440\u0441\u0438\u0438 14.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u044f \u043e\u043f\u0438\u0440\u0430\u043b\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0432 &#171;\u043e\u0442\u0441\u0435\u0431\u044f\u0442\u0438\u043d\u0435&#187; \u043c\u043e\u0433 \u0438 \u043f\u0440\u0438\u0432\u0440\u0430\u0442\u044c (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0447\u0435\u043f\u044f\u0442\u0430\u0442\u044c\u0441\u044f) ? \u041f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443 ?<\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u043e\u0447\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Next.js<\/a><\/li>\n<li><a href=\"https:\/\/www.codewithantonio.com\/\">\u041a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/a><\/li>\n<\/ul>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"soderzhanie\">\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/a><br \/> \n<ul>\n<li><a href=\"#%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85-%D0%B8%D1%85-%D0%BA%D0%B5%D1%88%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8-%D1%80%D0%B5%D0%B2%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0445 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B5-%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D0%B8-%D0%B8-%D0%BC%D1%83%D1%82%D0%B0%D1%86%D0%B8%D0%B8\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B0%D1%82%D1%82%D0%B5%D1%80%D0%BD%D1%8B-%D0%B8-%D0%BB%D1%83%D1%87%D1%88%D0%B8%D0%B5-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA%D0%B8\">\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0438 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#%D1%80%D0%B5%D0%BD%D0%B4%D0%B5%D1%80%D0%B8%D0%BD%D0%B3\">\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/a><br \/> \n<ul>\n<li><a href=\"#%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80%D0%BD%D1%8B%D0%B5-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BA%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B5-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B\">\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a><\/li>\n<li><a href=\"#%D0%BF%D0%B0%D1%82%D1%82%D0%B5%D1%80%D0%BD%D1%8B-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D0%B8\">\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"#%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%BD%D0%B0%D1%8F-%D0%B8-nodejs-%D1%81%D1%80%D0%B5%D0%B4%D1%8B-%D0%B2%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F\">\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0438 Node.js \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#%D0%BA%D0%B5%D1%88%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5\">\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#%D1%81%D1%82%D0%B8%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/a><br \/> \n<ul>\n<li><a href=\"#%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D0%B8-css\">\u041c\u043e\u0434\u0443\u043b\u0438 CSS<\/a><\/li>\n<li><a href=\"#tailwind-css\">Tailwind CSS<\/a><\/li>\n<li><a href=\"#css-%D0%B2-js\">CSS \u0432 JS<\/a><\/li>\n<li><a href=\"#sass\">Sass<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<h1 id=\"poluchenie-dannyh\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/h1>\n<p>  <\/p>\n<h2 id=\"poluchenie-dannyh-ih-keshirovanie-i-revalidaciya\">\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0445 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 Next.js \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>fetch<\/code>.<\/li>\n<li>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/li>\n<li>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0440\u043e\u0443\u0442\u0430.<\/li>\n<li>\u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>fetch<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Fetch_API\">Fetch API<\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. Next.js \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 <code>fetch<\/code> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><code>fetch<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 <code>async\/await<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx async function getData() {   const res = await fetch('https:\/\/api.example.com\/...')   \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f,   \/\/ \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c Date, Map, Set \u0438 \u0434\u0440.    if (!res.ok) {     \/\/ \u042d\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044f `error.js`     throw new Error('\u041f\u0440\u043e\u0432\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445')   }    return res.json() }  export default async function Page() {   const data = await getData()    return &lt;main>&lt;\/main> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 <code>fetch<\/code> \u0432 \u043a\u0435\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 (data cache) \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ 'force-cache' \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0443\u0449\u0435\u043d\u043e fetch('https:\/\/...', { cache: 'force-cache' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u044b <code>fetch<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u043e\u0434 <code>POST<\/code>, \u0442\u0430\u043a\u0436\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u0432\u0435\u0436\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439<\/li>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u2014 \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b). \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u0433\u0430 \u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0443\u0442\u0438 \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u043e\u0439 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441\u0432\u0435\u0436\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>fetch<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>next.revalidate<\/code>, \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0436\u0438\u0437\u043d\u0438 \u043a\u0435\u0448\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 (\u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u0432 \u0447\u0430\u0441 fetch('https:\/\/...', { next: { revalidate: 3600 } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 <code>fetch<\/code> \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>revalidate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const revalidate = 3600 \/\/ \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u0432 \u0447\u0430\u0441<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 <code>fetch<\/code> \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u043e\u0443\u0442\u0435, \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u0412 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u0430\u0445 \u043a\u0430\u0436\u0434\u044b\u0439 <code>fetch<\/code> \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043f\u043e \u043f\u0443\u0442\u0438 (<code>revalidatePath<\/code>) \u0438 \u043f\u043e \u0442\u0435\u0433\u0443 \u043a\u0435\u0448\u0430 (<code>revalidateTag<\/code>) \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>Next.js \u0438\u043c\u0435\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0442\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0435\u0448\u0430 \u0434\u043b\u044f \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 <code>fetch<\/code> \u0432 \u0440\u043e\u0443\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>fetch<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043a\u0435\u0448\u0430 \u043e\u0434\u043d\u0438\u043c \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0442\u0435\u0433\u043e\u043c.<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>revalidateTag<\/code> \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u044d\u0442\u0438\u043c \u0442\u0435\u0433\u043e\u043c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u0433\u0430 <code>collection<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/app\/page.tsx export default async function Page() {   const res = await fetch('https:\/\/...', { next: { tags: ['collection'] } })   const data = await res.json()   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0441 \u0442\u0435\u0433\u043e\u043c <code>collection<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { revalidateTag } from 'next\/cache'  export default async function action() {   revalidateTag('collection') }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430, \u0438\u0437 \u043a\u0435\u0448\u0430 \u0431\u0443\u0434\u0443 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 Next.js \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0440\u043e\u0441\u044b <code>fetch<\/code> \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0432 <code>fetch<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>cache: 'no-store'<\/code><\/li>\n<li>\u0432 <code>fetch<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>revalidate: 0<\/code><\/li>\n<li><code>fetch<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u043e\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>POST<\/code><\/li>\n<li><code>fetch<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>cookies<\/code> \u0438\u043b\u0438 <code>headers<\/code><\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>const dynamic = 'force-dynamic'<\/code><\/li>\n<li>\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>fetchCache<\/code><\/li>\n<li><code>fetch<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 <code>Authorization<\/code> \u0438 <code>Cookie<\/code> \u0438 \u0432\u044b\u0448\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b <code>fetch<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>cache<\/code> \u0432 <code>fetch<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>'no-store'<\/code>. \u042d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c (\u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">fetch('https:\/\/...', { cache: 'no-store' })<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 <code>fetch<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 <code>fetch<\/code> \u0432 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u0440\u043e\u0443\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0430\u043a\u0435\u0442\u0435 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435) \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e <code>fetch<\/code> \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u043b\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <code>fetch<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, CMS \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442 ORM), \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>cache<\/code> \u0438\u0437 React.<\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043b\u0438 \u043d\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0443\u0442. \u0415\u0441\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0440\u043e\u0443\u0442\u0430. \u0415\u0441\u043b\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 API <a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/functions\/unstable_cache\">unstable_cache<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0438\u043c\u0435\u0440<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>cache<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>revalidate<\/code> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>3600<\/code> \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u0432 \u0447\u0430\u0441<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/utils.ts import { cache } from 'react'  export const getItem = cache(async (id: string) => {   const item = await db.item.findUnique({ id })   return item })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getItem<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b, \u0432 \u0411\u0414 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/item\/[id]\/layout.tsx import { getItem } from '@\/utils\/get-item'  export const revalidate = 3600  export default async function Layout({   params: { id }, }: {   params: { id: string } }) {   const item = await getItem(id)   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/item\/[id]\/page.tsx import { getItem } from '@\/utils\/get-item'  export const revalidate = 3600  export default async function Page({   params: { id }, }: {   params: { id: string } }) {   const item = await getItem(id)   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0440\u043e\u0443\u0442\u0430 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0440\u043e\u0443\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0443. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043a\u0440\u044b\u0442\u044c \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b API, \u043e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437\u0432\u043d\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <a href=\"https:\/\/swr.vercel.app\/\">SWR<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/tanstack.com\/query\/latest\">TanStack Query<\/a>. \u042d\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 API \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<h2 id=\"servernye-operacii-i-mutacii\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0438<\/h2>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c \u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 Next.js.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use server<\/code>. \u042d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>use server<\/code> \u0443\u0440\u043e\u0432\u043d\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx \/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 export default function Page() {   \/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f   async function create() {     'use server'     \/\/ ...   }    return (     \/\/ ...   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>use server<\/code> \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0432 \u0435\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>use server<\/code>. \u0412\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  export async function create() {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/button.tsx 'use client' import { create } from '@\/app\/actions'  export function Button() {   return (     \/\/ ...   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u043f\u0440\u043e\u043f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ `updateItem` - \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f &lt;ClientComponent updateItem={updateItem} \/><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/client-component.jsx 'use client'  export default function ClientComponent({ updateItem }) {   return &lt;form action={updateItem}>{\/* ... *\/}&lt;\/form> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>action<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>form<\/code>:<br \/> \n<ul>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 JS \u043d\u0435 \u0443\u0441\u043f\u0435\u043b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d<\/li>\n<li>\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0444\u043e\u0440\u043c\u044b, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0435\u0441\u043b\u0438 JS \u043d\u0435 \u0443\u0441\u043f\u0435\u043b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f, \u043e\u0436\u0438\u0434\u0430\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435 \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b<\/li>\n<\/ul>\n<\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c <code>form<\/code> \u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, <code>useEffect<\/code>, \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>button<\/code><\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043e\u0439 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 Next.js. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 Next.js \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 UI \u0438 \u043d\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u0442\u0432\u0435\u0442\u0435<\/li>\n<li>\u0437\u0430 \u0441\u0446\u0435\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u043e\u0434 <code>POST<\/code>, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u0430<\/li>\n<li>\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u043c\u0438. <a href=\"https:\/\/react.dev\/reference\/react\/use-server#serializable-parameters-and-return-values\">\u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/a><\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0441\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u043c\u0430\u043a\u0435\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f<\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u043c\u0430\u043a\u0435\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0424\u043e\u0440\u043c\u044b<\/em><\/p>\n<p>  <\/p>\n<p>React \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>form<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u0430 <code>action<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/FormData\/FormData\">FormData<\/a>. \u0414\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f\u043c\u0438 \u0444\u043e\u0440\u043c\u044b \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0445\u0443\u043a <code>useState<\/code>, \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <code>FormData<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/invoices\/page.tsx export default function Page() {   async function createInvoice(formData: FormData) {     'use server'      const rawFormData = {       customerId: formData.get('customerId'),       amount: formData.get('amount'),       status: formData.get('status'),     }      \/\/ \u041c\u0443\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435     \/\/ \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u043c \u043a\u0435\u0448   }    return &lt;form action={createInvoice}>...&lt;\/form> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>bind<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/client-component.tsx 'use client'  import { updateUser } from '.\/actions'  export function UserProfile({ userId }: { userId: string }) {   \/\/ !   const updateUserWithId = updateUser.bind(null, userId)    return (     &lt;form action={updateUserWithId}>       &lt;input type=\"text\" name=\"name\" \/>       &lt;button type=\"submit\">\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f&lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0442 <code>userId<\/code> \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0444\u043e\u0440\u043c\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.js 'use server'  export async function updateUser(userId, formData) {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <a href=\"https:\/\/react.dev\/reference\/react-dom\/hooks\/useFormStatus\">useFormStatus<\/a>.<\/p>\n<p>  <\/p>\n<ul>\n<li><code>useFormStatus<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0443\u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b, \u0442.\u0435. \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e\u0442 \u0445\u0443\u043a, \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>form<\/code><\/li>\n<li><code>useFormStatus<\/code> \u2014 \u044d\u0442\u043e \u0445\u0443\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/submit-button.tsx 'use client'  import { useFormStatus } from 'react-dom'  export function SubmitButton() {   const { pending } = useFormStatus()    return (     &lt;button type=\"submit\" disabled={pending}>       \u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c     &lt;\/button>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>SubmitButton<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u0439 \u0444\u043e\u0440\u043c\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { SubmitButton } from '@\/app\/submit-button' import { createItem } from '@\/app\/actions'  export default async function Home() {   return (     &lt;form action={createItem}>       &lt;input type=\"text\" name=\"field-name\" \/>       &lt;SubmitButton \/>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e HTML, \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u043a <code>required<\/code> \u0438 <code>type=\"email\"<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/zod.dev\/\">zod<\/a> \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u043f\u0435\u0440\u0435\u0434 \u043c\u0443\u0442\u0430\u0446\u0438\u0435\u0439 \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { z } from 'zod'  const schema = z.object({   email: z.string({     invalid_type_error: '\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email',   }), })  export default async function createUser(formData: FormData) {   const validatedFields = schema.safeParse({     email: formData.get('email'),   })    \/\/ \u0420\u0430\u043d\u043d\u0438\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043f\u0440\u0438 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u044b   if (!validatedFields.success) {     return {       errors: validatedFields.error.flatten().fieldErrors,     }   }    \/\/ \u041c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0435\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043c\u043e\u0436\u043d\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <a href=\"https:\/\/react.dev\/reference\/react-dom\/hooks\/useFormState\">useFormState<\/a> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e.<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 <code>useFormState<\/code>, \u0441\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f <code>prevState<\/code> \u0438\u043b\u0438 <code>initialState<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430<\/li>\n<li><code>useFormState<\/code> \u2014 \u044d\u0442\u043e \u0445\u0443\u043a, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  export async function createUser(prevState: any, formData: FormData) {   \/\/ ...   return {     message: '\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email',   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e \u0432 <code>useFormState<\/code> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 <code>state<\/code> \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/signup.tsx 'use client'  import { useFormState } from 'react-dom' import { createUser } from '@\/app\/actions'  const initialState = {   message: '', }  export function Signup() {   const [state, formAction] = useFormState(createUser, initialState)    return (     &lt;form action={formAction}>       &lt;label htmlFor=\"email\">Email&lt;\/label>       &lt;input type=\"text\" id=\"email\" name=\"email\" required \/>       {\/* ... *\/}       {state?.message &amp;&amp; (         &lt;p className=\"error\">           {state.message}         &lt;\/p>       )}       &lt;button>\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f&lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f UI \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u0434\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430) \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <a href=\"https:\/\/react.dev\/reference\/react\/useOptimistic\">useOptimistic<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx 'use client'  import { useOptimistic } from 'react' import { send } from '.\/actions'  type Message = {   message: string }  export function Thread({ messages }: { messages: Message[] }) {   const [optimisticMessages, addOptimisticMessage] = useOptimistic&lt;Message[]>(     messages,     (state: Message[], newMessage: string) => [       ...state,       { message: newMessage },     ]   )    return (     &lt;div>       {optimisticMessages.map((m, k) => (         &lt;div key={k}>{m.message}&lt;\/div>       ))}       &lt;form         action={async (formData: FormData) => {           const message = formData.get('message')           addOptimisticMessage(message)           await send(message)         }}       >         &lt;input type=\"text\" name=\"message\" \/>         &lt;button type=\"submit\">\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c&lt;\/button>       &lt;\/form>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 <code>form<\/code>, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>button<\/code>, <code>&lt;input type=\"submit\"><\/code> \u0438 <code>&lt;input type=\"image\"><\/code>. \u042d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0440\u043e\u043f <code>formAction<\/code> \u0438\u043b\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430 \u043f\u043e\u0441\u0442\u0430 \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a \u043a\u043d\u043e\u043f\u043a\u0435 \u0435\u0433\u043e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u0430\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLFormElement\/requestSubmit\">requestSubmit<\/a>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0430\u0442\u0438\u0435 <code>\u2318\/Ctrl + Enter<\/code> \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 <code>onKeyDown<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/entry.tsx 'use client'  export function Entry() {   const handleKeyDown = (e: React.KeyboardEvent&lt;HTMLTextAreaElement>) => {     if (       (e.ctrlKey || e.metaKey) &amp;&amp;       (e.key === 'Enter' || e.key === 'NumpadEnter')     ) {       e.preventDefault()       e.currentTarget.form?.requestSubmit()     }   }    return (     &lt;div>       &lt;textarea name=\"entry\" rows={20} required onKeyDown={handleKeyDown} \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u043e\u0440\u043c\u044b, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0445\u0443\u043a\u043e\u043c <code>useEffect<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>onClick<\/code>. \u041f\u0440\u0438\u043c\u0435\u0440 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043b\u0430\u0439\u043a\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/like-button.tsx 'use client'  import { incrementLike } from '.\/actions' import { useState } from 'react'  export default function LikeButton({ initialLikes }: { initialLikes: number }) {   const [likes, setLikes] = useState(initialLikes)    return (     &lt;>       &lt;p>\u041e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u0430\u0439\u043a\u043e\u0432: {likes}&lt;\/p>       &lt;button         onClick={async () => {           const updatedLikes = await incrementLike()           setLikes(updatedLikes)         }}       >         \u041b\u0430\u0439\u043a       &lt;\/button>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 React API, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>useOptimistic<\/code> \u0438 <code>useTransition<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f UI \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0444\u043e\u0440\u043c\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430 \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>onChange<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/ui\/edit-post.tsx 'use client'  import { publishPost, saveDraft } from '.\/actions'  export default function EditPost() {   return (     &lt;form action={publishPost}>       &lt;textarea         name=\"content\"         onChange={async (e) => {           await saveDraft(e.target.value)         }}       \/>       &lt;button type=\"submit\">\u041e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c&lt;\/button>     &lt;\/form>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c (debounce) \u0432\u044b\u0437\u043e\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<p><em><code>useEffect<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a <code>useEffect<\/code> \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043b\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>onKeyDown<\/code> \u0434\u043b\u044f &#171;\u0433\u043e\u0440\u044f\u0447\u0438\u0445&#187; \u043a\u043b\u0430\u0432\u0438\u0448, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API\">Intersection Observer API<\/a> \u0434\u043b\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/view-count.tsx 'use client'  import { incrementViews } from '.\/actions' import { useState, useEffect } from 'react'  export default function ViewCount({ initialViews }: { initialViews: number }) {   const [views, setViews] = useState(initialViews)    useEffect(() => {     const updateViews = async () => {       const updatedViews = await incrementViews()       setViews(updatedViews)     }      updateViews()   }, [])    return &lt;p>\u041e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043a\u0430\u0437\u043e\u0432: {views}&lt;\/p> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u043c \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u0435\u043c <code>error.js<\/code> \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>Suspense<\/code> \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0414\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0434\u043b\u044f \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 UI \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>try\/catch<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0443\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  export async function createTodo(prevState: any, formData: FormData) {   try {     \/\/ \u041c\u0443\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435   } catch (e) {     throw new Error('\u041f\u0440\u043e\u0432\u0430\u043b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438')   } }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 Next.js \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>revalidatePath<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { revalidatePath } from 'next\/cache'  export async function createPost() {   try {     \/\/ ...   } catch (error) {     \/\/ ...   }    revalidatePath('\/posts') }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0442\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043a\u0435\u0448\u0435, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>revalidateTag<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { revalidateTag } from 'next\/cache'  export async function createPost() {   try {     \/\/ ...   } catch (error) {     \/\/ ...   }    revalidateTag('posts') }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u0440\u043e\u0443\u0442 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>redirect<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0431\u043b\u043e\u043a\u0430 <code>try\/catch<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { redirect } from 'next\/navigation' import { revalidateTag } from 'next\/cache'  export async function createPost(id: string) {   try {     \/\/ ...   } catch (error) {     \/\/ ...   }    revalidateTag('posts') \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u044b   redirect(`\/post\/${id}`) \/\/ \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0443\u043a\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>cookies<\/code>, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u0443\u043a\u0438 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">'use server'  import { cookies } from 'next\/headers'  export async function exampleAction() {   const cookieHandler = cookies()   \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u0443\u043a\u0438   const value = cookieHandler.get('name')?.value    \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0443\u043a\u0438   cookieHandler.set('name', 'Harry')    \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u0443\u043a\u0438   cookieHandler.delete('name') }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0411\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0441\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 API, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u043b\u044f \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/actions.ts 'use server'  import { auth } from '.\/lib'  export function addItem() {   const { user } = auth()    if (!user) {     throw new Error('\u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f')   }    \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u0438 \u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f <code>action<\/code> \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>publishVersion<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx export default function Page() {   const publishVersion = await getLatestVersion();    async function publish(formData: FormData) {     \"use server\";      if (publishVersion !== await getLatestVersion()) {       throw new Error('\u0421 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0432\u0435\u0440\u0441\u0438\u044f');     }     \/\/ ...   }    return &lt;button action={publish}>\u041e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c&lt;\/button>; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u044b, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0441\u043d\u0438\u043c\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>publishVersion<\/code>) \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0437\u0430\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0448\u0438\u0444\u0440\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438. \u041f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u0439 \u043a\u043b\u044e\u0447. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"patterny-i-luchshie-praktiki\">\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0438 \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u0438 \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 React \u0438 Next.js.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u043c\u0435\u0442\u044c \u043f\u0440\u044f\u043c\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0411\u0414)<\/li>\n<li>\u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u043a\u043b\u044e\u0447\u0438 API<\/li>\n<li>\u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u0430\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u043c \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0442\u0430\u043a \u0438 <a href=\"https:\/\/vercel.com\/blog\/how-react-18-improves-application-performance\">\u043e\u0431\u044a\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435<\/a> \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/li>\n<li>\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/li>\n<li>\u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442-\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u043e\u0432 (waterfalls)<\/li>\n<li>\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0435\u0433\u0438\u043e\u043d\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0431\u043b\u0438\u0436\u0435 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<p><strong>\u0417\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e-\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c) \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>fetch<\/code> \u0438\u043b\u0438 <code>cache<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0443\u0436\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u0438\u0445 \u0438 \u0442\u0435\u0445 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 <code>fetch<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Suspense<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u0438 UI \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0436\u0434\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043d\u0435\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ry\/qw\/ym\/ryqwymdndvp6fzrvhdbymkrngho.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ry\/qw\/ym\/ryqwymdndvp6fzrvhdbymkrngho.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0435 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dj\/ab\/cs\/djabcsb2ijaojcvorf2cktqyjza.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dj\/ab\/cs\/djabcsb2ijaojcvorf2cktqyjza.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u044b. \u042d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e <code>fetch<\/code> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e <code>fetch<\/code> \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0441 \u0446\u0435\u043b\u044c\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043d\u0430\u043c\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0431\u043e\u043b\u0435\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f<\/li>\n<li>\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u043e\u0432 \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043e\u0431\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f (\u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043a\u0435\u0448\u0430).<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Playlist<\/code> \u043d\u0430\u0447\u043d\u0435\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Artist<\/code> \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 <code>Playlist<\/code> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u0440\u043e\u043f\u0430 <code>artistID<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/artist\/[username]\/page.tsx async function Playlists({ artistID }: { artistID: string }) {   \/\/ \u0416\u0434\u0435\u043c \u043f\u043b\u0435\u0439\u043b\u0438\u0441\u0442\u044b   const playlists = await getArtistPlaylists(artistID)    return (     &lt;ul>       {playlists.map((playlist) => (         &lt;li key={playlist.id}>{playlist.name}&lt;\/li>       ))}     &lt;\/ul>   ) }  export default async function Page({   params: { username }, }: {   params: { username: string } }) {   \/\/ \u0416\u0434\u0435\u043c \u043c\u0443\u0437\u044b\u043a\u0430\u043d\u0442\u0430   const artist = await getArtist(username)    return (     &lt;>       &lt;h1>{artist.name}&lt;\/h1>       &lt;Suspense fallback={&lt;div>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430...&lt;\/div>}>         &lt;Playlists artistID={artist.id} \/>       &lt;\/Suspense>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>loading.js<\/code> (\u0434\u043b\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430) \u0438\u043b\u0438 <code>Suspense<\/code> (\u0434\u043b\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0447\u0430\u0441\u0442\u044f\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043e\u0431\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>getArtist<\/code> \u0438 <code>getArtistAlbums<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Page<\/code>. \u0417\u0430\u0442\u0435\u043c \u043e\u043d\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 <code>Promise.all<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/artist\/[username]\/page.tsx import Albums from '.\/albums'  async function getArtist(username: string) {   const res = await fetch(`https:\/\/api.example.com\/artist\/${username}`)   return res.json() }  async function getArtistAlbums(username: string) {   const res = await fetch(`https:\/\/api.example.com\/artist\/${username}\/albums`)   return res.json() }  export default async function Page({   params: { username }, }: {   params: { username: string } }) {   \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u044b   const artistData = getArtist(username)   const albumsData = getArtistAlbums(username)    \/\/ \u0416\u0434\u0435\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432   const [artist, albums] = await Promise.all([artistData, albumsData])    return (     &lt;>       &lt;h1>{artist.name}&lt;\/h1>       &lt;Albums list={albums}>&lt;\/Albums>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f UX \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <code>Suspense<\/code> \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>preload<\/code>. \u042d\u0442\u043e \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0438\u0441\u044b \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>preload<\/code> \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d, \u0430 \u043d\u0435 API.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ components\/Item.tsx import { getItem } from '@\/utils\/get-item'  export const preload = (id: string) => {   \/\/ `void` \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 `undefined`   \/\/ https:\/\/developer.mozilla.org\/docs\/Web\/JavaScript\/Reference\/Operators\/void   void getItem(id) } export default async function Item({ id }: { id: string }) {   const result = await getItem(id)   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/item\/[id]\/page.tsx import Item, { preload, checkIsAvailable } from '@\/components\/Item'  export default async function Page({   params: { id }, }: {   params: { id: string } }) {   \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435   preload(id)   \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0440\u0443\u0433\u0443\u044e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443   const isAvailable = await checkIsAvailable()    return isAvailable ? &lt;Item id={id} \/> : null }<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>cache<\/code>, <code>server-only<\/code> \u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>cache<\/code>, \u043f\u0430\u0442\u0442\u0435\u0440\u043d <code>preload<\/code> \u0438 \u043f\u0430\u043a\u0435\u0442 <code>server-only<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ utils\/get-item.ts import { cache } from 'react' import 'server-only'  export const preload = (id: string) => {   void getItem(id) }  export const getItem = cache(async (id: string) => {   \/\/ ... })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u043e\u0432 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p>\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u044b <code>utils\/get-item.js<\/code> \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043c\u0430\u043a\u0435\u0442\u0430\u0445, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <a href=\"https:\/\/react.dev\/reference\/react\/experimental_taintObjectReference\">taintObjectReference<\/a> \u0438 <a href=\"https:\/\/react.dev\/reference\/react\/experimental_taintUniqueValue\">taintUniqueValue<\/a>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>experimental.taint<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>true<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   experimental: {     taint: true,   }, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0449\u0438\u0442\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0435\u0433\u043e \u043f\u043e\u043b\u044f \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/utils.ts import { queryDataFromDB } from '.\/api' import {   experimental_taintObjectReference,   experimental_taintUniqueValue, } from 'react'  export async function getUserData() {   const data = await queryDataFromDB()   experimental_taintObjectReference(     '\u041d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442',     data   )   experimental_taintUniqueValue(     '\u041d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442',     data,     data.phoneNumber   )   return data }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { getUserData } from '.\/data'  export async function Page() {   const userData = getUserData()   return (     &lt;ClientComponent       user={userData} \/\/ \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u0437-\u0437\u0430 `taintObjectReference`       phoneNumber={userData.phoneNumber} \/\/ \u044d\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0438\u0437-\u0437\u0430 `taintUniqueValue`     \/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"rendering\">\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/h1>\n<p>  <\/p>\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 UI. React \u0438 Next.js \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u041e\u0441\u043d\u043e\u0432\u044b<\/strong><\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430: \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442<\/li>\n<li>\u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b &#171;\u0437\u0430\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/li>\n<li>\u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0435\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0435 \u0441\u0440\u0435\u0434\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/et\/dz\/0p\/etdz0pdw2tbcxss6cjuxlcsoiti.png\" data-src=\"https:\/\/habrastorage.org\/webt\/et\/dz\/0p\/etdz0pdw2tbcxss6cjuxlcsoiti.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u043a\u043b\u0438\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c \u043e\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 UI<\/li>\n<li>\u0441\u0435\u0440\u0432\u0435\u0440 \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u044b<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0418\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u044f\u0437\u044b\u043a\u0438 (JavaScript, PHP \u0438 \u0434\u0440.) \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0421 React \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0434\u0438\u043d \u044f\u0437\u044b\u043a (JS) \u0438 \u043e\u0434\u0438\u043d \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a (Next.js \u0438 \u0434\u0440.). \u042d\u0442\u0430 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u0441\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0440\u0435\u0434\u044b \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0445\u043e\u0436 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0443\u0447\u0448\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439 \u2014 \u043a\u043b\u044e\u0447 \u043a \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e React \u0438 Next.js.<\/p>\n<p>  <\/p>\n<p><strong>\u0416\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b &#171;\u0437\u0430\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442&#187;<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0440\u043e\u0442\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0432\u0441\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u043c\u0443 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 &#171;\u0437\u0430\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442&#187;:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043b\u0438\u043a \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0444\u043e\u0440\u043c\u044b, \u0440\u0443\u0447\u043d\u043e\u0439 \u0432\u0432\u043e\u0434 URL \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0434\u0440.<\/li>\n<li>\u0417\u0430\u043f\u0440\u043e\u0441 HTTP. \u041a\u043b\u0438\u0435\u043d\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0440\u043e\u0441 HTTP, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 (<code>GET<\/code>, <code>POST<\/code> \u0438 \u0442.\u043f.) \u0438 \u0434\u0440.<\/li>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440. \u0421\u0435\u0440\u0432\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u043c. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u044d\u0442\u0430\u043f\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u043e\u0443\u0442\u0438\u043d\u0433, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0440.<\/li>\n<li>\u041e\u0442\u0432\u0435\u0442 HTTP. \u041f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0441\u0435\u0440\u0432\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043e\u0442\u0432\u0435\u0442 HTTP. \u042d\u0442\u043e\u0442 \u043e\u0442\u0432\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0442\u0430\u0442\u0443\u0441-\u043a\u043e\u0434 (\u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0438\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043e\u0431 \u0443\u0441\u043f\u0435\u0445\u0435 \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0430\u043b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430) \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b (HTML, CSS, JS, \u0441\u0442\u0430\u0442\u0438\u043a\u0430 \u0438 \u0434\u0440.).<\/li>\n<li>\u041a\u043b\u0438\u0435\u043d\u0442. \u041a\u043b\u0438\u0435\u043d\u0442 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u0442 (parse) \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 UI.<\/li>\n<li>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 UI, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c, \u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u043d\u0430\u0447\u0430\u043b\u0430.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043d\u044f\u0442\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u043a\u0443\u0434\u0430 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0435\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0413\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0435\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0435\u0442\u0438 \u2014 \u044d\u0442\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f, \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0449\u0430\u044f \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412 React \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0435\u0442\u0438 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430 \u0441\u0446\u0435\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438: \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0433\u0440\u0430\u0444 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0433\u0440\u0430\u0444 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0433\u0440\u0430\u0444 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u0433\u0440\u0430\u0444 \u2014 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u041e \u0433\u0440\u0430\u0444\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043a\u0430\u043a \u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>use client<\/code>. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>use server<\/code>, \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0449\u0430\u044f React, \u0447\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c. \u041f\u043e\u0442\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043d\u0443\u0436\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443, \u043e\u043d \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u0430 \u043d\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0442\u0430\u0440\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441. \u042d\u0442\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0433\u0434\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u0443\u0434\u0430 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0435\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0442\u0430\u043a\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0445\u043e\u0442\u044f\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"servernye-komponenty\">\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0438\u0441\u0430\u0442\u044c UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0438, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e, \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412 Next.js \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0430 \u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/li>\n<li>\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/li>\n<li>\u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433)<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0440\u0435\u0434\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u043b\u0438\u0436\u0435 \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0437\u0430 \u0441\u0447\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443<\/li>\n<li>\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438 \u043a\u043b\u044e\u0447\u0438 API, \u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0431\u0435\u0437 \u0440\u0438\u0441\u043a\u0430 \u0438\u0445 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442<\/li>\n<li>\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u0438 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/li>\n<li>\u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0431\u043e\u0440\u043a\u0438. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u0432\u044b\u0433\u043e\u0434\u043d\u043e, \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u043b\u044e\u0434\u044f\u043c \u0441 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c \u0438 \u0441\u043b\u0430\u0431\u044b\u043c\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 <a href=\"https:\/\/web.dev\/fcp\/\">First Contentful Paint (FCP)<\/a>. \u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 HTML \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0436\u0434\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f JS \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/li>\n<li>\u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f. \u041e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u044b\u0439 HTML \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0431\u043e\u0442\u0430\u043c\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0438\u043a\u043e\u0432 \u0434\u043b\u044f \u0438\u043d\u0434\u0435\u043a\u0441\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0431\u043e\u0442\u0430\u043c\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0432\u044c\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/li>\n<li>\u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0435\u0441\u043b\u0438 \u0436\u0434\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Next.js \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c, \u043e \u0447\u0435\u043c \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API React \u0434\u043b\u044f \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438: \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c <code>Suspense<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>React \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React (React Server Component Payload, RSC Payload).<\/li>\n<li>Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (Client Component JavaScript Instructions) \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>HTML \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u044c\u044e \u0440\u043e\u0443\u0442\u0430 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM (Document Object Model \u2014 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430).<\/li>\n<li>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430: \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e)<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0440\u043e\u0443\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0432 CDN (Content Delivery Network \u2014 \u0441\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430). \u042d\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0440\u043e\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u0442 \u0431\u043b\u043e\u0433\u0430 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u043e\u0432\u0430\u0440\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0440\u043e\u0443\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 \u0440\u043e\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438\u043b\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043a\u0443\u043a\u0438 \u0438\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u0430 URL.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u043d\u0435\u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 Next.js \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/th>\n<th>\u0414\u0430\u043d\u043d\u044b\u0435<\/th>\n<th>\u0420\u043e\u0443\u0442<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u041d\u0435\u0442<\/td>\n<td>\u041a\u0435\u0448<\/td>\n<td>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/td>\n<\/tr>\n<tr>\n<td>\u0414\u0430<\/td>\n<td>\u041a\u0435\u0448<\/td>\n<td>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/td>\n<\/tr>\n<tr>\n<td>\u041d\u0435\u0442<\/td>\n<td>\u041d\u0435 \u043a\u0435\u0448<\/td>\n<td>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/td>\n<\/tr>\n<tr>\n<td>\u0414\u0430<\/td>\n<td>\u041d\u0435 \u043a\u0435\u0448<\/td>\n<td>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u043e\u0443\u0442 \u0431\u044b\u043b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c, \u0432\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u0435\u0448\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0432 \u0440\u043e\u0443\u0442\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u0441\u043c. \u043d\u0438\u0436\u0435).<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0443\u044e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 API, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442. \u041c\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c? \u043a\u043e\u0433\u0434\u0430 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c UI \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c.<\/p>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u0443\u043a\u0438, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u0438\u0441\u043a\u0430 URL. \u0422\u0430\u043a\u0438\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>cookies<\/code> \u0438 <code>headers<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u043e\u0443\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c<\/li>\n<li><code>searchParams<\/code>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u043f\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u043e\u0443\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433<\/strong><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sc\/ce\/9a\/scce9a3596zglm3htrpnbq5i9re.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sc\/ce\/9a\/scce9a3596zglm3htrpnbq5i9re.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c UI \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438, \u0438 UI \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u043e \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0434\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/z9\/hq\/tt\/z9hqtthdurg1rzrfgfxo4vij9tq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/z9\/hq\/tt\/z9hqtthdurg1rzrfgfxo4vij9tq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u0440\u043e\u0443\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a \u0438 UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0440\u043e\u0443\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u0437\u044b\u0432\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0442\u043e\u0432\u0430\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438 <code>loading.js<\/code>, \u0430 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2014 <code>Suspense<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"klientskie-komponenty\">\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0412 Next.js \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c: \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439: \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0443\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0432\u044f\u0437\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 UI<\/li>\n<li>\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 API. \u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043c\u0435\u044e\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u043c API, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Geolocation_API\">\u0433\u0435\u043e\u043b\u043e\u043a\u0430\u0446\u0438\u044f<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Window\/localStorage\">localStorage<\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 UI<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Next.js<\/strong><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>use client<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u043f\u0435\u0440\u0435\u0434 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><code>use client<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438 \u0432\u0441\u0435 \u0435\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/counter.tsx 'use client'  import { useState } from 'react'  export default function Counter() {   const [count, setCount] = useState(0)    return (     &lt;div>       &lt;p>\u0412\u044b \u043a\u043b\u0438\u043a\u043d\u0443\u043b\u0438 {count} \u0440\u0430\u0437&lt;\/p>       &lt;button onClick={() => setCount(count + 1)}>\u041d\u0430\u0436\u043c\u0438 \u043d\u0430 \u043c\u0435\u043d\u044f&lt;\/button>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 <code>onClick<\/code> \u0438 \u0445\u0443\u043a\u0430 <code>useState<\/code> \u0432\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (<code>toggle.js<\/code>) \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use client<\/code>. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0433\u0434\u0435 \u044d\u0442\u0438 API \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <code>use client<\/code> \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 React \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0433\u0434\u0435 \u044d\u0442\u0438 API \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nk\/tz\/ep\/nktzepqnymgjju5emnuzjmuz9wi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nk\/tz\/ep\/nktzepqnymgjju5emnuzjmuz9wi.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043b\u0438 \u043f\u043e\u043b\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430) \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u043e\u043b\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API React \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u044c\u044e HTML \u043a\u0430\u043a \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0432\u0438\u0434\u0438\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u043d\u0435 \u0436\u0434\u0435\u0442, \u043f\u043e\u043a\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 JS.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>React \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React (React Server Component Payload, RSC Payload).<\/li>\n<li>Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (Client Component JavaScript Instructions) \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>HTML \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u044c\u044e \u0440\u043e\u0443\u0442\u0430 \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM.<\/li>\n<li>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0431\u0435\u0437 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u0440\u0430\u0437\u0431\u043e\u0440 \u0441\u0431\u043e\u0440\u043a\u0438 JS \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e React \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM.<\/p>\n<p>  <\/p>\n<p><strong>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443<\/strong><\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b <code>use client<\/code>, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 API.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"patterny-kompozicii\">\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/h2>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0435\u0433\u043e \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 \u043a\u0430\u043a\u0438\u0435 \u2014 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u043b\u0443\u0447\u0430\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u0417\u0430\u0434\u0430\u0447\u0430<\/th>\n<th>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/th>\n<th>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n<td>\u2705<\/td>\n<td>\u274c<\/td>\n<\/tr>\n<tr>\n<td>\u041f\u0440\u044f\u043c\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c<\/td>\n<td>\u2705<\/td>\n<td>\u274c<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0434\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438<\/td>\n<td>\u2705<\/td>\n<td>\u274c<\/td>\n<\/tr>\n<tr>\n<td>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439<\/td>\n<td>\u2705<\/td>\n<td>\u274c<\/td>\n<\/tr>\n<tr>\n<td>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/td>\n<td>\u274c<\/td>\n<td>\u2705<\/td>\n<\/tr>\n<tr>\n<td>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/td>\n<td>\u274c<\/td>\n<td>\u2705<\/td>\n<\/tr>\n<tr>\n<td>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API<\/td>\n<td>\u274c<\/td>\n<td>\u2705<\/td>\n<\/tr>\n<tr>\n<td>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0445\u0443\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 API<\/td>\n<td>\u274c<\/td>\n<td>\u2705<\/td>\n<\/tr>\n<tr>\n<td>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/td>\n<td>\u274c<\/td>\n<td>\u2705<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><strong>\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u0420\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435) \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u043e\u0432, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>fetch<\/code> \u0438\u043b\u0438 <code>cache<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b, \u0438 \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042d\u0442\u043e \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u043e \u0442\u0435\u043c, \u0447\u0442\u043e Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0430\u043d\u043d\u044b\u0445. <code>cache<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 <code>fetch<\/code> \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u0438 JS \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445, \u0442\u0430\u043a \u0438 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ lib\/data.ts export async function getData() {   const res = await fetch('https:\/\/external-service.com\/data', {     headers: {       authorization: process.env.API_KEY,     },   })    return res.json() }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u044b \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f <code>API_KEY<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 <code>API_KEY<\/code> \u043d\u0435\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 <code>NEXT_PUBLIC_<\/code>, \u044d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0439. \u0422\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c\u0438 \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435, \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getData<\/code> \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/www.npmjs.com\/package\/server-only\">server-only<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install server-only<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ lib\/data.js import 'server-only'  export async function getData() {   const res = await fetch('https:\/\/external-service.com\/data', {     headers: {       authorization: process.env.API_KEY,     },   })    return res.json() }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0434\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0443 <code>window<\/code>) \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u2014 <a href=\"https:\/\/www.npmjs.com\/package\/client-only\">client-only<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u043c\u0438, \u0435\u0449\u0435 \u043d\u0435 \u0432\u0441\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>use client<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0444\u0438\u0447\u0438, \u043a\u0430\u043a <code>useState<\/code>, <code>useEffect<\/code> \u0438\u043b\u0438 <code>createContext<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 \u0433\u0438\u043f\u043e\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u043a\u0435\u0442 <code>acme-carousel<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Carousel<\/code>. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>useState<\/code> \u0438 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use client<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>Carousel<\/code> \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/gallery.tsx 'use client'  import { useState } from 'react' import { Carousel } from 'acme-carousel'  export default function Gallery() {   let [isOpen, setIsOpen] = useState(false)    return (     &lt;div>       &lt;button onClick={() => setIsOpen(true)}>\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f&lt;\/button>        {\/* \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 `Carousel` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 *\/}       {isOpen &amp;&amp; &lt;Carousel \/>}     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>Carousel<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import { Carousel } from 'acme-carousel'  export default function Page() {   return (     &lt;div>       {\/* \u041e\u0448\u0438\u0431\u043a\u0430: `useState` \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 *\/}       &lt;Carousel \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Next.js \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e <code>Carousel<\/code> \u2014 \u044d\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/carousel.tsx 'use client'  import { Carousel } from 'acme-carousel'  export default Carousel<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e <code>Carousel<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import Carousel from '.\/carousel'  export default function Page() {   return (     &lt;div>       {\/* \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 `Carousel` - \u044d\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 *\/}       &lt;Carousel \/>     &lt;\/div>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e. \u0414\u0440\u0443\u0433\u043e\u0435 \u0434\u0435\u043b\u043e \u2014 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0440\u044f\u0434\u043e\u043c \u0441 \u043a\u043e\u0440\u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u0430\u043a \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0442\u0435\u043c\u0430. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 React \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import { createContext } from 'react'  \/\/ `createContext` \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 export const ThemeContext = createContext({})  export default function RootLayout({ children }) {   return (     &lt;html>       &lt;body>         &lt;ThemeContext.Provider value=\"dark\">{children}&lt;\/ThemeContext.Provider>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/theme-provider.tsx 'use client'  import { createContext } from 'react'  export const ThemeContext = createContext({})  export default function ThemeProvider({   children, }: {   children: React.ReactNode }) {   return &lt;ThemeContext.Provider value=\"dark\">{children}&lt;\/ThemeContext.Provider> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import ThemeProvider from '.\/theme-provider'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html>       &lt;body>         &lt;ThemeProvider>{children}&lt;\/ThemeProvider>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438 JS \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 (\u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0434\u0440.) \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u044c\u044e \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043c\u0430\u043a\u0435\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>SearchBar<\/code>) \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u043a\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx \/\/ `SearchBar` - \u044d\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 import SearchBar from '.\/searchbar' \/\/ `Logo` - \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 import Logo from '.\/logo'  \/\/ `Layout` - \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e export default function Layout({ children }: { children: React.ReactNode }) {   return (     &lt;>       &lt;nav>         &lt;Logo \/>         &lt;SearchBar \/>       &lt;\/nav>       &lt;main>{children}&lt;\/main>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u043f\u043e\u0432 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c (\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f)<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043f\u044b, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0435 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443, \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c <a href=\"https:\/\/react.dev\/reference\/react\/use-server#serializable-parameters-and-return-values\">\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u043c\u0438<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u044e\u0442\u0441\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><strong>\u0427\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0447\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI \u043a\u0430\u043a \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u044c\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b <code>use client<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u044c\u0445 \u043c\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043d\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 &#171;\u0437\u0430\u043f\u0440\u043e\u0441-\u043e\u0442\u0432\u0435\u0442&#187; \u043a\u043e\u0434 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u0437 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441<\/li>\n<li>\u043f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC) \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0417\u0430\u0442\u0435\u043c, \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, React \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0434\u043b\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u0430\u043a <code>props<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u0438\u043c\u043f\u043e\u0440\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/client-component.tsx 'use client'  \/\/ \u0421\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 import ServerComponent from '.\/Server-Component'  export default function ClientComponent({   children, }: {   children: React.ReactNode }) {   const [count, setCount] = useState(0)    return (     &lt;>       &lt;button onClick={() => setCount(count + 1)}>{count}&lt;\/button>        &lt;ServerComponent \/>     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d: \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c\u0443 \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0442\u0430 \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u043f <code>children<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/client-component.tsx 'use client'  import { useState } from 'react'  export default function ClientComponent({   children, }: {   children: React.ReactNode }) {   const [count, setCount] = useState(0)    return (     &lt;>       &lt;button onClick={() => setCount(count + 1)}>{count}&lt;\/button>       {children}     &lt;\/>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><code>ClientComponent<\/code> \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e <code>children<\/code> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c <code>ClientComponent<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u0446\u0438\u0438 <code>children<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>ClientComponent<\/code> \u0438 <code>ServerComponent<\/code>, \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u043c \u043f\u0435\u0440\u0432\u043e\u0433\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx import ClientComponent from '.\/client-component' import ServerComponent from '.\/server-component'  \/\/ \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e export default function Page() {   return (     &lt;ClientComponent>       &lt;ServerComponent \/>     &lt;\/ClientComponent>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <code>ClientComponent<\/code> \u0438 <code>ServerComponent<\/code> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>ServerComponent<\/code> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 <code>ClientComponent<\/code> \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"granichnaya-i-nodejs-sredy-vypolneniya\">\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0438 Node.js \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 Next.js \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (runtime) \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, API \u0438 \u043e\u0431\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043a\u043e\u0434\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0435 \u0441\u0440\u0435\u0434\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u0434 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0440\u0435\u0434\u0430 Node.js (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c API Node.js \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u043c \u0441 \u043d\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u043e\u0432<\/li>\n<li>\u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f (edge) \u0441\u0440\u0435\u0434\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 Web API<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041e\u0442\u043b\u0438\u0447\u0438\u044f \u0441\u0440\u0435\u0434<\/strong><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0441\u0440\u0435\u0434\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<ul>\n<li>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>Node.js \u0441\u0440\u0435\u0434\u0430<\/th>\n<th>\u0411\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f (serverless) \u0441\u0440\u0435\u0434\u0430<\/th>\n<th>\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u0425\u043e\u043b\u043e\u0434\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a<\/td>\n<td>\\\/<\/td>\n<td>\u041e\u0431\u044b\u0447\u043d\u044b\u0439<\/td>\n<td>\u0411\u044b\u0441\u0442\u0440\u044b\u0439<\/td>\n<\/tr>\n<tr>\n<td>\u041f\u043e\u0442\u043e\u043a\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<\/tr>\n<tr>\n<td>\u0412\u0432\u043e\u0434-\u0432\u044b\u0432\u043e\u0434<\/td>\n<td>\u0412\u0435\u0441\u044c<\/td>\n<td>\u0412\u0435\u0441\u044c<\/td>\n<td><code>fetch<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c<\/td>\n<td>\\\/<\/td>\n<td>\u0412\u044b\u0441\u043e\u043a\u0430\u044f<\/td>\n<td>\u0421\u0430\u043c\u0430\u044f \u0432\u044b\u0441\u043e\u043a\u0430\u044f<\/td>\n<\/tr>\n<tr>\n<td>\u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430<\/td>\n<td>\u041e\u0431\u044b\u0447\u043d\u0430\u044f<\/td>\n<td>\u041d\u0438\u0437\u043a\u0430\u044f<\/td>\n<td>\u0421\u0430\u043c\u0430\u044f \u043d\u0438\u0437\u043a\u0430\u044f<\/td>\n<\/tr>\n<tr>\n<td>\u041f\u0430\u043a\u0435\u0442\u0430 NPM<\/td>\n<td>\u0412\u0441\u0435<\/td>\n<td>\u0412\u0441\u0435<\/td>\n<td>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440<\/td>\n<\/tr>\n<tr>\n<td>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u041d\u0435\u0442<\/td>\n<\/tr>\n<tr>\n<td>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<\/tr>\n<tr>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>fetch<\/code><\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<td>\u0414\u0430<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0413\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 API Node.js.<\/p>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e, \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441 \u043d\u0438\u0437\u043a\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445, \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u044b \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u043d\u043e \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0434, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0432 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u0432 Vercel, \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u0442 1 \u0434\u043e 4 \u041c\u0431. \u042d\u0442\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0444\u0430\u0439\u043b\u044b, \u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0443\u043a\u0442\u0443\u0440\u044b \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435 \u0432\u0441\u0435 API Node.js, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b <code>npm<\/code> \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c (<code>Module not found: Can't resolve 'fs'<\/code> \u0438 \u043f\u043e\u0445\u043e\u0436\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438).<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0440\u0435\u0434\u0430 Node.js<\/em><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0441\u0440\u0435\u0434\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c API Node.js. \u0412 \u043d\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u0441\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0435 \u0441 Node.js. \u041d\u043e \u043e\u043d\u0430 \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u0431\u044b\u0441\u0442\u0440\u0430\u044f, \u043a\u0430\u043a \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u043f\u043b\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Next.js \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Node.js \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443, \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u043a Vercel.<\/p>\n<p>  <\/p>\n<p><em>\u0411\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 Node.js<\/em><\/p>\n<p>  <\/p>\n<p>\u0411\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0447\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430. \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 Vercel \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 50 \u041c\u0431, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p>  <\/p>\n<p>\u0411\u0435\u0441\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u0441\u0440\u0435\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u0445\u043e\u043b\u043e\u0434\u043d\u043e\u043c \u0441\u0442\u0430\u0440\u0442\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>runtime<\/code>. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c <code>\"nodejs\"<\/code> \u0438 <code>\"edge\"<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx export const runtime = 'edge' \/\/ \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 'nodejs'<\/code><\/pre>\n<p>  <\/p>\n<p><code>runtime<\/code> \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043c\u0430\u043a\u0435\u0442\u0430, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0441\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0435\u0433\u043e \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u043e\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Node.js, \u0434\u043b\u044f \u043d\u0435\u0435 \u044f\u0432\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c <code>runtime<\/code> \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<h1 id=\"keshirovanie\">\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<p><strong>\u041e\u0431\u0437\u043e\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0432 Next.js, \u0438 \u0438\u0445 \u0446\u0435\u043b\u0438:<\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>\u041c\u0435\u0445\u0430\u043d\u0438\u0437\u043c<\/th>\n<th>\u0427\u0442\u043e<\/th>\n<th>\u0413\u0434\u0435<\/th>\n<th>\u0426\u0435\u043b\u044c<\/th>\n<th>\u0414\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/td>\n<td>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440<\/td>\n<td>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/td>\n<td>\u0416\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/td>\n<\/tr>\n<tr>\n<td>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/td>\n<td>\u0414\u0430\u043d\u043d\u044b\u0435<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440<\/td>\n<td>\u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0434\u0435\u043f\u043b\u043e\u044f\u043c\u0438<\/td>\n<td>\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f)<\/td>\n<\/tr>\n<tr>\n<td>\u041a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/td>\n<td>HTML \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC<\/td>\n<td>\u0421\u0435\u0440\u0432\u0435\u0440<\/td>\n<td>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/td>\n<td>\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e (\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f)<\/td>\n<\/tr>\n<tr>\n<td>\u041a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/td>\n<td>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC<\/td>\n<td>\u041a\u043b\u0438\u0435\u043d\u0442<\/td>\n<td>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/td>\n<td>\u0421\u0435\u0441\u0441\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Next.js \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445. \u041d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: \u043a\u043e\u0433\u0434\u0430 \u0440\u043e\u0443\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/lt\/cc\/sz\/ltccszxvq1jix-kytfsglzg9xtm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/lt\/cc\/sz\/ltccszxvq1jix-kytfsglzg9xtm.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0440\u043e\u0443\u0442, \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u043b\u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041b\u043e\u0433\u0438\u043a\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><strong>\u041c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u0442 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/caching#fetch\">Fetch API<\/a> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 URL \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 <code>fetch<\/code> \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yr\/te\/kf\/yrtekf1hfwb48o38vi2wykqdjik.png\" data-src=\"https:\/\/habrastorage.org\/webt\/yr\/te\/kf\/yrtekf1hfwb48o38vi2wykqdjik.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043c\u0430\u043a\u0435\u0442\u0435, \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043e\u0431\u0449\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u044f\u0441\u044c \u043e \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/example.tsx async function getItem() {   \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f `fetch` \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0430 \u0435\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f   const res = await fetch('https:\/\/...\/item\/1')   return res.json() }  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b, \u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 const item = await getItem() \/\/ MISS (\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442)  \/\/ \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0440\u043e\u0443\u0442\u0430 const item = await getItem() \/\/ HIT (\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f)<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041b\u043e\u0433\u0438\u043a\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/hs\/z6\/6o\/hsz66obbutzlqhk3ymgsna7ge1q.png\" data-src=\"https:\/\/habrastorage.org\/webt\/hs\/z6\/6o\/hsz66obbutzlqhk3ymgsna7ge1q.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0440\u043e\u0443\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 (\u043a\u0435\u0448\u0435)<\/li>\n<li>\u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430, \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0430\u043c\u044f\u0442\u0438<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0442\u043e\u043c \u0436\u0435 \u0446\u0438\u043a\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u0437 \u043a\u0435\u0448\u0430, \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0440\u043e\u0443\u0442\u0430 \u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0446\u0438\u043a\u043b\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043f\u0430\u043c\u044f\u0442\u044c \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0435\u0435 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 <code>fetch<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u0437\u0430\u043f\u0440\u043e\u0441 <code>signal<\/code> \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>AbortController<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const { signal } = new AbortController() fetch(url, { signal })<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/strong><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 (data cache) \u0445\u0440\u0430\u043d\u0438\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0438 \u0434\u0435\u043f\u043b\u043e\u044f\u043c\u0438. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044e <code>fetch<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 <code>fetch<\/code>, \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>cache<\/code> \u0438 <code>next.revalidate<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/su\/y_\/20\/suy_202kc0psrxr3qheekq3zysc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/su\/y_\/20\/suy_202kc0psrxr3qheekq3zysc.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 <code>fetch<\/code> \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u043e\u043d \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/li>\n<li>\u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430, \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/li>\n<li>\u0434\u043b\u044f \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c\u044b\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>{ cache: 'no-store' }<\/code>) \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f<\/li>\n<li>\u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0445, \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u0446\u0438\u043a\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u0438 \u0434\u0435\u043f\u043b\u043e\u044f\u043c\u0438 \u0434\u043e \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e, \u0438 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u2014 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b). \u0414\u043b\u044f \u0433\u0440\u0443\u043f\u043f\u043e\u0432\u043e\u0439 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u0433\u0438 \u0438 \u043f\u0443\u0442\u0438. \u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0435\u0440\u0438\u043e\u0434 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>next.revalidate<\/code> \u0432 <code>fetch<\/code> \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0436\u0438\u0437\u043d\u0438 \u043a\u0435\u0448\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 (\u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u0432 \u0447\u0430\u0441 fetch('https:\/\/...', { next: { revalidate: 3600 } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u0441\u0435\u0445 <code>fetch<\/code> \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fetch<\/code>.<\/p>\n<p>  <\/p>\n<p><em>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/up\/gw\/ow\/upgwow3l8jdd-o-uh_vrmcel928.png\" data-src=\"https:\/\/habrastorage.org\/webt\/up\/gw\/ow\/upgwow3l8jdd-o-uh_vrmcel928.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 <code>revalidate<\/code>, \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 60 \u0441\u0435\u043a\u0443\u043d\u0434), \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u0435\u0448\u0430<\/li>\n<li>\u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 (\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435)<br \/> \n<ul>\n<li>Next.js \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0444\u043e\u043d\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/li>\n<li>\u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f<\/li>\n<li>\u0435\u0441\u043b\u0438 \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u043b\u0430\u0441\u044c, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0440\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043f\u043e \u043f\u0443\u0442\u0438 (<code>revalidatePath<\/code>) \u0438 \u043f\u043e \u0442\u0435\u0433\u0443 \u043a\u0435\u0448\u0430 (<code>revalidateTag<\/code>).<\/p>\n<p>  <\/p>\n<p><em>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/ux\/xp\/n5\/uxxpn5kke1xyzywwuogat8ag4yq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/ux\/xp\/n5\/uxxpn5kke1xyzywwuogat8ag4yq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441 <code>revalidate<\/code>, \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u0437 \u043a\u0435\u0448\u0430<br \/> \n<ul>\n<li>\u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435 \u0434\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445<\/li>\n<\/ul>\n<\/li>\n<li>\u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0435\u0448\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>cache<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>no-store<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">fetch(`https:\/\/...`, { cache: 'no-store' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const dynamic = 'force-dynamic'<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0440\u043e\u0443\u0442\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438. \u042d\u0442\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u043e\u0443\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0435\u0448\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 (full route cache), \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a React \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433, \u0438 \u043a\u0430\u043a Next.js \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>  <\/p>\n<p><em>1. React \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 API React \u0434\u043b\u044f \u043e\u0440\u043a\u0435\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438: \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c <code>Suspense<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<p>  <\/p>\n<ol>\n<li>React \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 RSC.<\/li>\n<li>Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0436\u0434\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043e\u0442\u0432\u0435\u0442\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u0447\u0430\u0441\u0442\u0438 UI \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0442\u043e\u043a\u0430 \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0445 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<p><em>2. Next.js \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430)<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/iv\/bm\/kd\/ivbmkdr7lu0uh2ouzxz8pqmquzm.png\" data-src=\"https:\/\/habrastorage.org\/webt\/iv\/bm\/kd\/ivbmkdr7lu0uh2ouzxz8pqmquzm.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c Next.js \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 RSC \u0438 HTML) \u0440\u043e\u0443\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p><em>3. React \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>HTML \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u044c\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/li>\n<li>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM.<\/li>\n<li>\u0418\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 JS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>4. Next.js \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u0435\u0448)<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 RSC \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0432 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 (router cache) \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043a\u0435\u0448\u0435 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u043e\u0443\u0442\u0430. \u042d\u0442\u043e\u0442 \u043a\u0435\u0448 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043e\u043f\u044b\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0443\u0442\u0435\u043c \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><em>5. \u041f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 Next.js \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 RSC \u0432 \u043a\u0435\u0448\u0435 \u0440\u043e\u0443\u0442\u0435\u0440\u0430. \u0415\u0441\u043b\u0438 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432 \u043a\u0435\u0448\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f, \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0435\u0448.<\/p>\n<p>  <\/p>\n<p><em>\u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043b\u0438 \u0440\u043e\u0443\u0442 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u043d \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439. \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u043e\u0443\u0442\u044b \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/9t\/z7\/ap\/9tz7apwa6e4ec4dpovoc06je2do.png\" data-src=\"https:\/\/habrastorage.org\/webt\/9t\/z7\/ap\/9tz7apwa6e4ec4dpovoc06je2do.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <\/p>\n<p><em>\u0418\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430, \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430<\/li>\n<li>\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0434\u0435\u043f\u043b\u043e\u0439 \u2014 \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0434\u0435\u043f\u043b\u043e\u044f\u043c\u0438, \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u043e\u0432\u044b\u0445 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f\u0445<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0443\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0438 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/li>\n<li>\u043f\u0443\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>dynamic = 'force-dynamic'<\/code> \u0438\u043b\u0438 <code>revalidate = 0<\/code> \u2014 \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0438 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u041a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u0435\u0448<\/li>\n<li>\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0435\u0441\u043b\u0438 \u0440\u043e\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 <code>fetch<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e\u0442 <code>fetch<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u0414\u0440\u0443\u0433\u0438\u0435 <code>fetch<\/code> \u0431\u0443\u0434\u0443\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u041a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u0435\u0448 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430, \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041e\u043d \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0435\u0448\u0435\u043c \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p><em>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/em><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kp\/yd\/0d\/kpyd0dfwm3g8ejpo5tukmenyrzy.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kp\/yd\/0d\/kpyd0dfwm3g8ejpo5tukmenyrzy.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u043e\u0443\u0442\u0430\u043c\u0438, Next.js \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u043d\u044b\u0435 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u0441\u0435\u0442\u0438\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u043e\u043b\u0435\u0439 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0438 (\u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u043e\u0433\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Link<\/code> \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430).<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043e\u043f\u044b\u0442 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f &#171;\u0432\u043f\u0435\u0440\u0435\u0434-\u043d\u0430\u0437\u0430\u0434&#187; \u0437\u0430 \u0441\u0447\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u043d\u044b\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u0438 \u0431\u044b\u0441\u0442\u0440\u0430\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f \u043a \u043d\u043e\u0432\u044b\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443<\/li>\n<li>\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043d\u0435 \u0432\u043b\u0435\u043a\u0443\u0442 \u043f\u043e\u043b\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2014 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 React \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0422\u043e, \u043a\u0430\u043a \u0434\u043e\u043b\u0433\u043e \u043e\u043d \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0444\u0430\u043a\u0442\u043e\u0440\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0441\u0435\u0441\u0441\u0438\u044f \u2014 \u043a\u0435\u0448 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u043c\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043d \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f<\/li>\n<li>\u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u2014 \u043a\u0435\u0448 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u042d\u0442\u043e\u0442 \u043f\u0435\u0440\u0438\u043e\u0434 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0443\u0442 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c:<br \/> \n<ul>\n<li>\u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u043e\u0443\u0442\u043e\u0432 \u043e\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 30 \u0441\u0435\u043a\u0443\u043d\u0434<\/li>\n<li>\u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u2014 5 \u043c\u0438\u043d\u0443\u0442<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0425\u043e\u0442\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043b\u0435\u0447\u0435\u0442 \u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u0432\u0441\u0435\u0445 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u043e\u0443\u0442\u0430, \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0435\u043c\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 <code>prefetch={true}<\/code> \u0438\u043b\u0438 \u0432\u044b\u0437\u043e\u0432 <code>router.prefetch<\/code> \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u0435\u0433\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 5 \u043c\u0438\u043d\u0443\u0442.<\/p>\n<p>  <\/p>\n<p><em>\u0418\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438:<br \/> \n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043f\u043e \u043f\u0443\u0442\u0438 (<code>revalidatePath<\/code>) \u0438 \u043f\u043e \u0442\u0435\u0433\u0443 \u043a\u0435\u0448\u0430 (<code>revalidateTag<\/code>)<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>cookies.set<\/code> \u0438\u043b\u0438 <code>cookies.delete<\/code> \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0442 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u043a\u0443\u043a\u0438 (\u044d\u0442\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438)<\/li>\n<\/ul>\n<\/li>\n<li>\u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 <code>router.refresh<\/code> \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 <code>router.refresh<\/code>, <code>revalidatePath<\/code> \u0438\u043b\u0438 <code>revalidateTag<\/code>. \u042d\u0442\u043e \u043e\u0447\u0438\u0441\u0442\u0438\u0442 \u043a\u0435\u0448 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 <code>prefetch={false}<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>Link<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 30 \u0441\u0435\u043a\u0443\u043d\u0434. \u041f\u043e\u0441\u0435\u0449\u0435\u043d\u043d\u044b\u0435 \u0440\u043e\u0443\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0430\u0441\u0442\u0435\u0439 \u043a\u0435\u0448\u0430 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u0435\u0448\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p>  <\/p>\n<p><em>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043b\u0435\u0447\u0435\u0442 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043a\u0435\u0448\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445<\/li>\n<li>\u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0440\u043e\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u0430\u043a \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435, \u0442\u0430\u043a \u0438 \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u043e \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/em><\/p>\n<p>  <\/p>\n<ul>\n<li>\u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0440\u043e\u0443\u0442\u0430 \u043d\u0435 \u0432\u043b\u0435\u0447\u0435\u0442 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0434\u043e \u0436\u0435\u0441\u0442\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438<\/li>\n<li>\u0434\u043b\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>revalidatePath<\/code> \u0438 <code>revalidateTag<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>API<\/strong><\/p>\n<p>  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<thead>\n<tr>\n<th>API<\/th>\n<th>\u041a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430<\/th>\n<th>\u041a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430<\/th>\n<th>\u041a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445<\/th>\n<th>\u041a\u0435\u0448 React<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>&lt;Link prefetch><\/code><\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>router.prefetch<\/code><\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>router.refresh<\/code><\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>fetch<\/code><\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<\/tr>\n<tr>\n<td><code>fetch<\/code> <code>options.cache<\/code><\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>fetch<\/code> <code>options.next.revalidate<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>fetch<\/code> <code>options.next.tags<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>revalidateTag<\/code><\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f)<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>revalidatePath<\/code><\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f)<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>const revalidate<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>const dynamic<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>cookies<\/code><\/td>\n<td>\u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f (\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f)<\/td>\n<td>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>headers<\/code>, <code>searchParams<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>generateStaticParams<\/code><\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<\/tr>\n<tr>\n<td><code>React.cache<\/code><\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>&#8212;<\/td>\n<td>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  <\/p>\n<p><em><code>Link<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>Link<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u043e\u0443\u0442\u044b \u0438\u0437 \u043a\u0435\u0448\u0430 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0432 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u043f <code>prefetch<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>false<\/code>. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0441\u0435\u0433\u043c\u0435\u043d\u0442 \u0440\u043e\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043f\u0440\u0438 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0440\u043e\u0443\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>  <\/p>\n<p><em><code>router.prefetch<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>prefetch<\/code> \u0445\u0443\u043a\u0430 <code>useRouter<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0440\u043e\u0443\u0442\u0430. \u042d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 RSC \u0432 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p><em><code>router.refresh<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>refresh<\/code> \u0445\u0443\u043a\u0430 <code>useRouter<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u043e\u0443\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430. <code>refresh<\/code> \u043d\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f React \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<p><em><code>fetch<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 <code>fetch<\/code>, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n<p><em><code>fetch<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 <code>cache<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e <code>fetch<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0443\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>cache<\/code> \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>no-store<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">fetch(`https:\/\/...`, { cache: 'no-store' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0434\u0430\u043d\u043d\u044b\u0445, \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e\u0442 <code>fetch<\/code>.<\/p>\n<p>  <\/p>\n<p><em><code>fetch<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 <code>next.revalidate<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>next.revalidate<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 (\u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445) \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e <code>fetch<\/code>. \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u0435\u0448\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430. \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u0432\u0435\u0436\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0420\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u0440\u0430\u0437 \u0432 \u0447\u0430\u0441 fetch(`https:\/\/...`, { next: { revalidate: 3600 } })<\/code><\/pre>\n<p>  <\/p>\n<p><em><code>fetch<\/code> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 <code>next.tags<\/code> \u0438 <code>revalidateTag<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u0433\u0438 \u043a\u0435\u0448\u0430.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <code>fetch<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043e\u0434\u043d\u0438\u043c \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438.<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0437 \u043a\u0435\u0448\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>revalidateTag<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u044d\u0442\u0438 \u0442\u0435\u0433\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0442\u0435\u0433\u043e\u0432 \u043a\u0435\u0448\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">fetch(`https:\/\/...`, { next: { tags: ['a', 'b', 'c'] } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u043a\u0435\u0448\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">revalidateTag('a')<\/code><\/pre>\n<p>  <\/p>\n<p><code>revalidateTag<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430 \u2014 \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0435\u0431-\u0445\u0443\u043a). \u042d\u0442\u043e \u043d\u0435 \u0432\u043b\u0435\u0447\u0435\u0442 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443.<\/li>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u2014 \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b). \u042d\u0442\u043e \u0432\u043b\u0435\u0447\u0435\u0442 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em><code>revalidatePath<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>revalidatePath<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u044b \u0440\u043e\u0443\u0442\u0430 \u043f\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u0437\u0430 \u043e\u0434\u043d\u0443 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e. \u0412\u044b\u0437\u043e\u0432 <code>revalidatePath<\/code> \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">revalidatePath('\/')<\/code><\/pre>\n<p>  <\/p>\n<p><code>revalidatePath<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0432\u0443\u0445 \u043c\u0435\u0441\u0442\u0430\u0445:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430 \u2014 \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0435\u0431-\u0445\u0443\u043a). \u042d\u0442\u043e \u043d\u0435 \u0432\u043b\u0435\u0447\u0435\u0442 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0430 \u0440\u043e\u0443\u0442\u0435\u0440\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u043e\u0443\u0442\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443.<\/li>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u2014 \u0434\u043b\u044f \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b).<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u0440\u043e\u0434\u0435 <code>cookies<\/code> \u0438 <code>headers<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u043f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 <code>searchParams<\/code> \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0418\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430, \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0440\u043e\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><em><code>cookies<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>cookies.set<\/code> \u0438\u043b\u0438 <code>cookies.delete<\/code> \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u043a\u0435\u0448 \u0440\u043e\u0443\u0442\u0435\u0440\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u0443\u0442\u0430\u043c\u0438 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u043a\u0443\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430<\/em><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u0432 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>fetch<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044e\u0442 \u043a\u0435\u0448 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>const dynamic = 'force-dynamic'<\/code><\/li>\n<li><code>const revalidate = 0<\/code><\/li>\n<\/ul>\n<p>  <\/p>\n<p><em><code>generateStaticParams<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>app\/blog\/[slug]\/page.js<\/code>) \u043f\u0443\u0442\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <code>generateStaticParams<\/code>, \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u0435\u0448 \u0432\u0441\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438. \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 Next.js \u0442\u0430\u043a\u0436\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u043f\u0443\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u043f\u0440\u0438 \u0438\u0445 \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u0438 \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<p>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0440\u043e\u0443\u0442\u0430 <code>export const dynamicParams = false<\/code>. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0442\u0438, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 <code>generateStaticParams<\/code>.<\/p>\n<p>  <\/p>\n<p><em><code>React.cache<\/code><\/em><\/p>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>cache<\/code> \u0438\u0437 React \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u0440\u0438 \u0435\u0435 \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u044b <code>fetch<\/code> \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u0438\u0445 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432 <code>cache<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e <code>cache<\/code> \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0443\u0447\u043d\u043e\u0439 \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 <code>fetch<\/code> \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d. \u0422\u0430\u043a\u0438\u043c\u0438 \u0441\u043b\u0443\u0447\u0430\u044f\u043c\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0411\u0414, CMS \u0438\u043b\u0438 GraphQL.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ utils\/get-item.ts import { cache } from 'react' import db from '@\/lib\/db'  export const getItem = cache(async (id: string) => {   const item = await db.item.findUnique({ id })    return item })<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"stilizaciya\">\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432\u043a\u043b\u044e\u0447\u0430\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 CSS \u2014 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u043e \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c CSS, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c \u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043f\u0440\u0438 \u0440\u043e\u0441\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/li>\n<li>\u043c\u043e\u0434\u0443\u043b\u0438 CSS \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b CSS \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0435\u0439<\/li>\n<li><a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS<\/a> \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a CSS, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u0445-\u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0445<\/li>\n<li><a href=\"https:\/\/sass-lang.com\/\">Sass<\/a> \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 CSS, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0449\u0438\u0439 CSS \u0444\u0438\u0447\u0430\u043c\u0438, \u0432\u0440\u043e\u0434\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432<\/li>\n<li>CSS \u0432 JS \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c CSS \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b JS, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"moduli-css\">\u041c\u043e\u0434\u0443\u043b\u0438 CSS<\/h2>\n<p>  <\/p>\n<p>Next.js \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS \u2014 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.module.css<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u0438 CSS \u2014 \u044d\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430\u0445, \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u044f\u0441\u044c \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u044f\u0445. \u0422\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 CSS \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u0438 CSS \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u0439 \u0444\u0430\u0439\u043b, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/dashboard\/layout.tsx import styles from '.\/styles.module.css'  export default function DashboardLayout({   children, }: {   children: React.ReactNode }) {   return &lt;section className={styles.dashboard}>{children}&lt;\/section> }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">\/* app\/dashboard\/styles.module.css *\/ .dashboard {   padding: 24px; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u0438 CSS \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.module.css<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>link<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.css<\/code>. \u042d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 &#171;\u0433\u043e\u0440\u044f\u0447\u0438\u0435&#187; \u043f\u0443\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e CSS.<\/p>\n<p>  <\/p>\n<p><strong>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u0430\u043a\u0435\u0442, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 <code>app\/global.css<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">body {   padding: 20px 20px 60px;   max-width: 680px;   margin: 0 auto; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e \u0432\u0441\u0435\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<code>app\/layout.js<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u042d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u043e \u0432\u0441\u0435\u043c \u0440\u043e\u0443\u0442\u0430\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f import '.\/global.css'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\">       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439<\/strong><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import 'bootstrap\/dist\/css\/bootstrap.css'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\">       &lt;body className=\"container\">{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/strong><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u043e\u043f\u044b\u0442\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043f\u0440\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next dev<\/code> \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 (\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 CSS) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043f\u043e\u0441\u043b\u0435 \u0438\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f<\/li>\n<li>\u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>next build<\/code> \u0441\u0442\u0438\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 <code>.css<\/code> \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439<\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"tailwind-css\">Tailwind CSS<\/h2>\n<p>  <\/p>\n<p>Tailwind CSS \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a CSS, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u0445-\u0443\u0442\u0438\u043b\u0438\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 Next.js.<\/p>\n<p>  <\/p>\n<p><em>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm i -D tailwindcss postcss autoprefixer npx tailwindcss init -p<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ tailwind.config.js \/** @type {import('tailwindcss').Config} *\/ module.exports = {   content: [     '.\/app\/**\/*.{js,ts,jsx,tsx,mdx}',     '.\/pages\/**\/*.{js,ts,jsx,tsx,mdx}',     '.\/components\/**\/*.{js,ts,jsx,tsx,mdx}',      \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `src`     '.\/src\/**\/*.{js,ts,jsx,tsx,mdx}',   ],   theme: {     extend: {},   },   plugins: [], }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0438\u043b\u0435\u0439<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* app\/globals.css *\/ @tailwind base; @tailwind components; @tailwind utilities;<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import type { Metadata } from 'next'  \/\/ \u042d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0440\u043e\u0443\u0442\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f import '.\/globals.css'  export const metadata: Metadata = {   title: 'Create Next App',   description: 'Generated by create next app', }  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html lang=\"en\">       &lt;body>{children}&lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/em><\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.tsx export default function Page() {   return &lt;h1 className=\"text-3xl font-bold underline\">\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 Turbopack<\/em><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Next.js 13.1, Tailwind CSS \u0438 PostCSS \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0441 Turbopack.<\/p>\n<p>  <\/p>\n<h2 id=\"css-v-js\">CSS \u0432 JS<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 CSS \u0432 JS, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f JS \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <code>app<\/code> (\u0432 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435):<\/p>\n<p>  <\/p>\n<ul>\n<li>chakra-ui<\/li>\n<li>kuma-ui<\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/users\/mui\/\" class=\"user_link\">mui<\/a>\/material<\/li>\n<li>pandacss<\/li>\n<li>styled-jsx<\/li>\n<li>styled-components<\/li>\n<li>stylex<\/li>\n<li>tamagui<\/li>\n<li>tss-react<\/li>\n<li>vanilla-extract<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 CSS \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b CSS, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a PostCSS \u0438\u043b\u0438 Tailwind CSS.<\/p>\n<p>  <\/p>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CSS \u0432 JS \u0432 <code>app<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 CSS \u0432 JS \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 3 \u044d\u0442\u0430\u043f\u043e\u0432:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0435\u0435\u0441\u0442\u0440\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0432\u0441\u0435\u0433\u043e CSS \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0445\u0443\u043a\u0430 <code>useServerInsertedHTML<\/code> \u0434\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/li>\n<\/ol>\n<p>  <\/p>\n<p><em><a href=\"https:\/\/github.com\/vercel\/styled-jsx\">styled-jsx<\/a><\/em><\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0435\u0441\u0442\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/registry.tsx 'use client'  import React, { useState } from 'react' import { useServerInsertedHTML } from 'next\/navigation' import { StyleRegistry, createStyleRegistry } from 'styled-jsx'  export default function StyledJsxRegistry({   children, }: {   children: React.ReactNode }) {   \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0441 \u043b\u0435\u043d\u0438\u0432\u044b\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c   \/\/ https:\/\/reactjs.org\/docs\/hooks-reference.html#lazy-initial-state   const [jsxStyleRegistry] = useState(() => createStyleRegistry())    useServerInsertedHTML(() => {     const styles = jsxStyleRegistry.styles()     jsxStyleRegistry.flush()     return &lt;>{styles}&lt;\/>   })    return &lt;StyleRegistry registry={jsxStyleRegistry}>{children}&lt;\/StyleRegistry> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import StyledJsxRegistry from '.\/registry'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html>       &lt;body>         &lt;StyledJsxRegistry>{children}&lt;\/StyledJsxRegistry>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p><em><a href=\"https:\/\/www.styled-components.com\/\">styled-components<\/a><\/em><\/p>\n<p>  <\/p>\n<p>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c <code>styled-components<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   compiler: {     styledComponents: true,   }, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c API <code>styled-components<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0435\u0441\u0442\u0440\u0430 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u044d\u0442\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439. \u0417\u0430\u0442\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0445\u0443\u043a <code>useServerInsertedHTML<\/code> \u0434\u043b\u044f \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>head<\/code> \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ lib\/registry.tsx 'use client'  import React, { useState } from 'react' import { useServerInsertedHTML } from 'next\/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-components'  export default function StyledComponentsRegistry({   children, }: {   children: React.ReactNode }) {   const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())    useServerInsertedHTML(() => {     const styles = styledComponentsStyleSheet.getStyleElement()     styledComponentsStyleSheet.instance.clearTag()     return &lt;>{styles}&lt;\/>   })    if (typeof window !== 'undefined') return &lt;>{children}&lt;\/>    return (     &lt;StyleSheetManager sheet={styledComponentsStyleSheet.instance}>       {children}     &lt;\/StyleSheetManager>   ) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c <code>children<\/code> \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u0432 \u0440\u0435\u0435\u0441\u0442\u0440 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/layout.tsx import StyledComponentsRegistry from '.\/lib\/registry'  export default function RootLayout({   children, }: {   children: React.ReactNode }) {   return (     &lt;html>       &lt;body>         &lt;StyledComponentsRegistry>{children}&lt;\/StyledComponentsRegistry>       &lt;\/body>     &lt;\/html>   ) }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"sass\">Sass<\/h2>\n<p>  <\/p>\n<p>Next.js \u0438\u043c\u0435\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Sass \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u044b \u0441 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c <code>.scss<\/code> \u0438 <code>.sass<\/code>, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 CSS (<code>.module.scss<\/code> \u0438 <code>.module.sass<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c <code>sass<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm i -D sass<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Sass<\/em><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 Sass \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 <code>sassOptions<\/code> \u0432 \u0444\u0430\u0439\u043b\u0435 <code>next.config.js<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const path = require('path')  module.exports = {   sassOptions: {     includePaths: [path.join(__dirname, 'styles')],   }, }<\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Sass<\/em><\/p>\n<p>  <\/p>\n<p>Next.js \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Sass, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>primaryColor<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* app\/variables.module.scss *\/ $primary-color: #64ff00;  :export {   primaryColor: $primary-color; }<\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ app\/page.js import variables from '.\/variables.module.scss'  export default function Page() {   return &lt;h1 style={{ color: variables.primaryColor }}>\u041f\u0440\u0438\u0432\u0435\u0442, Next.js!&lt;\/h1> }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0446 \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430.<\/p>\n<p>  <\/p>\n<p>Happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<blockquote><p><a href=\"https:\/\/t.me\/timewebru\"><b>\u041d\u043e\u0432\u043e\u0441\u0442\u0438, \u043e\u0431\u0437\u043e\u0440\u044b \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0441\u044b \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b Timeweb.Cloud \u2014 \u0432 \u043d\u0430\u0448\u0435\u043c Telegram-\u043a\u0430\u043d\u0430\u043b\u0435<\/b><\/a> <b>\u21a9<\/b><\/p><\/blockquote>\n<p><a href=\"https:\/\/timeweb.cloud\/?i=106909\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/b5\/pj\/of\/b5pjofdoxth14ro-rjsrn7sbmiy.png\" data-src=\"https:\/\/habrastorage.org\/webt\/b5\/pj\/of\/b5pjofdoxth14ro-rjsrn7sbmiy.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/808259\/\"> https:\/\/habr.com\/ru\/articles\/808259\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\" data-src=\"https:\/\/habrastorage.org\/webt\/n7\/fw\/-u\/n7fw-ux7acj8__omi6o6piuxji4.png\"\/>  <\/p>\n<p>  Hello world!<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u0432\u0442\u043e\u0440\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>.<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/804663\/\">\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/habr.com\/ru\/companies\/timeweb\/articles\/810055\/\">\u0422\u0440\u0435\u0442\u044c\u044f \u0447\u0430\u0441\u0442\u044c<\/a><\/li>\n<li><a href=\"https:\/\/my-js.org\/docs\/guide\/nextjs\/\">\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u041d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, Next.js \u2014 \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u0435\u0442\u0435 JavaScript \u0438 <a href=\"https:\/\/react.dev\/\">React<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 <a href=\"https:\/\/nodejs.org\/\">Node.js<\/a>.<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f Next.js \u0432\u0435\u0440\u0441\u0438\u0438 14.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u044f \u043e\u043f\u0438\u0440\u0430\u043b\u0441\u044f \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u043e \u0432 &#171;\u043e\u0442\u0441\u0435\u0431\u044f\u0442\u0438\u043d\u0435&#187; \u043c\u043e\u0433 \u0438 \u043f\u0440\u0438\u0432\u0440\u0430\u0442\u044c (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0447\u0435\u043f\u044f\u0442\u0430\u0442\u044c\u0441\u044f) ? \u041f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043b\u0438\u0447\u043a\u0443 ?<\/p>\n<p>  <\/p>\n<p>\u041f\u0430\u0440\u043e\u0447\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/vercel\/next.js\/tree\/canary\/examples\">\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Next.js<\/a><\/li>\n<li><a href=\"https:\/\/www.codewithantonio.com\/\">\u041a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u044b \u043f\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Next.js<\/a><\/li>\n<\/ul>\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-373856","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/373856","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=373856"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/373856\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=373856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=373856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=373856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}