React \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06cc \u06af\u0627\u0626\u06cc\u0688<\/title><\/p>\n<p> <meta name=\"HandheldFriendly\" content=\"True\"\/><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\"\/>\n <link rel=\"preload\" as=\"style\" onload=\"this.onload=null;this.rel=\" stylesheet=\"\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Roboto+Mono:wght@400;700&display=swap\"\/>\n<link rel=\"preload\" as=\"style\" onload=\"this.onload=null;this.rel=\" stylesheet=\"\" href=\"https:\/\/cdn.freecodecamp.org\/news-assets\/prism\/1.29.0\/themes\/prism.min.css\"\/>\n<noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.freecodecamp.org\/news-assets\/prism\/1.29.0\/themes\/prism.min.css\"\/>\n<\/noscript>\n<link rel=\"preload\" as=\"style\" onload=\"this.onload=null;this.rel=\" stylesheet=\"\" href=\"https:\/\/cdn.freecodecamp.org\/news-assets\/prism\/1.29.0\/plugins\/unescaped-markup\/prism-unescaped-markup.min.css\"\/>\n<noscript>\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.freecodecamp.org\/news-assets\/prism\/1.29.0\/plugins\/unescaped-markup\/prism-unescaped-markup.min.css\"\/>\n<\/noscript><\/p>\n<link rel=\"preload\" as=\"style\" onload=\"this.onload=null;this.rel=\" stylesheet=\"\" href=\"https:\/\/www.freecodecamp.org\/news\/assets\/css\/global-a1e6959968.css\"\/>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/www.freecodecamp.org\/news\/assets\/css\/variables-b2e544cd65.css\"\/>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/www.freecodecamp.org\/news\/assets\/css\/screen-d1c41ea162.css\"\/>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/www.freecodecamp.org\/news\/assets\/css\/search-bar-cd71311c1d.css\"\/>\n<link rel=\"icon\" href=\"https:\/\/cdn.freecodecamp.org\/universal\/favicons\/favicon.ico\" type=\"image\/png\"\/>\n<link rel=\"canonical\" href=\"https:\/\/www.freecodecamp.org\/news\/a-developers-guide-to-lazy-loading-in-react-and-nextjs\/\"\/>\n<p> <meta name=\"referrer\" content=\"no-referrer-when-downgrade\"\/><\/p>\n<p> <meta name=\"description\" content=\"Large JavaScript bundles can slow down your application. When too much code loads at once, users wait longer for the first paint and pages feel less responsive. Search engines may also rank slower sit\"\/><\/p>\n<p> <meta property=\"og:site_name\" content=\"freeCodeCamp.org\"\/><br \/>\n <meta property=\"og:type\" content=\"article\"\/><br \/>\n <meta property=\"og:title\" content=\"A Developer\u2019s Guide to Lazy Loading in React and Next.js\"\/><\/p>\n<p> <meta property=\"og:description\" content=\"Large JavaScript bundles can slow down your application. When too much code loads at once, users wait longer for the first paint and pages feel less responsive. Search engines may also rank slower sit\"\/><\/p>\n<p> <meta property=\"og:url\" content=\"https:\/\/www.freecodecamp.org\/news\/a-developers-guide-to-lazy-loading-in-react-and-nextjs\/\"\/><br \/>\n <meta property=\"og:image\" content=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/React-\u0627\u0648\u0631-Nextjs-\u0645\u06cc\u06ba-\u0633\u0633\u062a-\u0644\u0648\u0688\u0646\u06af-\u06a9\u06d2-\u0644\u06cc\u06d2-\u0688\u0648\u06cc\u0644\u067e\u0631-\u06a9\u06cc.png\"\/><br \/>\n <meta property=\"article:published_time\" content=\"2026-04-14T20:31:59.608Z\"\/><br \/>\n <meta property=\"article:modified_time\" content=\"2026-04-14T20:31:59.608Z\"\/><\/p>\n<p> <meta property=\"article:tag\" content=\"React\"\/><\/p>\n<p> <meta property=\"article:tag\" content=\"Next.js\"\/><\/p>\n<p> <meta property=\"article:tag\" content=\"JavaScript\"\/><\/p>\n<p> <meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/freecodecamp\"\/><\/p>\n<p> <meta name=\"twitter:card\" content=\"summary_large_image\"\/><br \/>\n <meta name=\"twitter:title\" content=\"A Developer\u2019s Guide to Lazy Loading in React and Next.js\"\/><\/p>\n<p> <meta name=\"twitter:description\" content=\"Large JavaScript bundles can slow down your application. When too much code loads at once, users wait longer for the first paint and pages feel less responsive. Search engines may also rank slower sit\"\/><\/p>\n<p> <meta name=\"twitter:url\" content=\"https:\/\/www.freecodecamp.org\/news\/a-developers-guide-to-lazy-loading-in-react-and-nextjs\/\"\/><br \/>\n <meta name=\"twitter:image\" content=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/React-\u0627\u0648\u0631-Nextjs-\u0645\u06cc\u06ba-\u0633\u0633\u062a-\u0644\u0648\u0688\u0646\u06af-\u06a9\u06d2-\u0644\u06cc\u06d2-\u0688\u0648\u06cc\u0644\u067e\u0631-\u06a9\u06cc.png\"\/><br \/>\n <meta name=\"twitter:label1\" content=\"Written by\"\/><br \/>\n <meta name=\"twitter:data1\" content=\"David Aniebo\"\/><br \/>\n <meta name=\"twitter:label2\" content=\"Filed under\"\/><br \/>\n <meta name=\"twitter:data2\" content=\"React, Next.js, JavaScript\"\/><br \/>\n <meta name=\"twitter:site\" content=\"@freecodecamp\"\/><\/p>\n<p> <meta name=\"twitter:creator\" content=\"@webmekanic_\"\/><\/p>\n<p> <meta property=\"og:image:width\" content=\"1920\"\/><br \/>\n <meta property=\"og:image:height\" content=\"1080\"\/><\/p>\n<p> <meta name=\"generator\" content=\"Eleventy\"\/>\n <link rel=\"alternate\" type=\"application\/rss+xml\" title=\"freeCodeCamp.org\" href=\"https:\/\/www.freecodecamp.org\/news\/rss\/\"\/>\n<p> <meta name=\"x-fcc-source\" data-test-label=\"x-fcc-source\" content=\"Hashnode\"\/><\/p>\n<p> <\/head><\/p>\n<p> <body class=\"home-template\" id=\"wp_automatic_ReadabilityBody\"><\/p>\n<p> <noscript><iframe loading=\"lazy\" src=\"https:\/\/www.googletagmanager.com\/ns.html?id=GTM-5D6RKKP\" height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"><\/iframe><\/noscript><\/p>\n<div class=\"site-wrapper\">\n<nav class=\"site-nav nav-padding universal-nav\">\n<div class=\"site-nav-middle\"><\/div>\n<\/nav>\n<p> <main id=\"site-main\" class=\"post-template site-main outer\"><\/p>\n<div class=\"inner ad-layout\">\n<article class=\"post-full post\">\n<figure class=\"post-full-image\">\n<picture><source media=\"(max-width: 700px)\" ><source media=\"(min-width: 701px)\" ><img loading=\"lazy\" decoding=\"async\" onerror=\"this.style.display='none'\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/04\/React-\u0627\u0648\u0631-Nextjs-\u0645\u06cc\u06ba-\u0633\u0633\u062a-\u0644\u0648\u0688\u0646\u06af-\u06a9\u06d2-\u0644\u06cc\u06d2-\u0688\u0648\u06cc\u0644\u067e\u0631-\u06a9\u06cc.png\" alt=\"React \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06cc \u06af\u0627\u0626\u06cc\u0688\" width=\"1920\" height=\"1080\" data-test-label=\"feature-image\" title=\"\"><br \/>\n <\/source><\/source><\/picture>\n<\/figure>\n<section class=\"post-full-content\">\n<div class=\"post-and-sidebar\">\n<section class=\"post-content \" data-test-label=\"post-content\">\n<p>\u0628\u0691\u06d2 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0628\u0646\u0688\u0644 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0633\u0633\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0648\u0688 \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u0646\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0631\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0622\u067e \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u06a9\u0645 \u0631\u062f\u0639\u0645\u0644 \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0633\u0631\u0686 \u0627\u0646\u062c\u0646 \u0633\u0633\u062a \u0633\u0627\u0626\u0679\u0648\u06ba \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0646\u062a\u0627\u0626\u062c \u0645\u06cc\u06ba \u06a9\u0645 \u062f\u0631\u062c\u06c1 \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0622\u067e \u06a9\u06d2 \u06a9\u0648\u0688 \u06a9\u0648 \u0686\u06be\u0648\u0679\u06d2 \u062d\u0635\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06a9\u06d2 \u0627\u0648\u0631 \u0636\u0631\u0648\u0631\u062a \u067e\u0691\u0646\u06d2 \u067e\u0631 \u0635\u0631\u0641 \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06af\u0627\u0626\u06cc\u0688 \u0622\u067e \u06a9\u0648 React \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0633\u06d2 \u06af\u0632\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u062e\u0631 \u06a9\u0627\u0631\u060c \u0622\u067e \u06a9\u0648 \u067e\u062a\u06c1 \u0686\u0644 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 \u0627\u0633\u06d2 \u06a9\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 <code>React.lazy<\/code>\u060c <code>next\/dynamic<\/code>\u0627\u0648\u0631 <code>Suspense<\/code>\u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0645\u062b\u0627\u0644 \u06c1\u0648\u06af\u06cc \u062c\u0633\u06d2 \u0622\u067e \u06a9\u0627\u067e\u06cc \u06a9\u0631 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679\u0633 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-what-is-lazy-loading\">\u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>\u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0627\u06cc\u06a9 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u06cc \u062a\u06a9\u0646\u06cc\u06a9 \u06c1\u06d2 \u062c\u0648 \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0648\u0642\u062a \u062a\u06a9 \u0644\u0648\u0688\u0646\u06af \u06a9\u0648\u0688 \u06a9\u0648 \u0645\u0644\u062a\u0648\u06cc \u06a9\u0631 \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4 \u067e\u0648\u0631\u06cc \u0627\u06cc\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u0633\u06d2 \u0686\u06be\u0648\u0679\u06d2 \u0679\u06a9\u0691\u0648\u06ba \u0645\u06cc\u06ba \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u0628\u0631\u0627\u0624\u0632\u0631 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0635\u0627\u0631\u0641 \u0627\u0633 \u0631\u0627\u0633\u062a\u06d2 \u067e\u0631 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06cc\u0627 \u0627\u0633 \u062e\u0635\u0648\u0635\u06cc\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0639\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0641\u0648\u0627\u0626\u062f \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u062a\u06cc\u0632 \u062a\u0631 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0628\u0648\u062c\u06be<\/strong>: \u067e\u06c1\u0644\u0627 \u0628\u0646\u0688\u0644 \u062c\u062a\u0646\u0627 \u0686\u06be\u0648\u0679\u0627 \u06c1\u0648\u06af\u0627\u060c \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0627 \u0648\u0642\u062a \u0627\u062a\u0646\u0627 \u06c1\u06cc \u062a\u06cc\u0632 \u06c1\u0648\u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u06c1\u062a\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0648\u06cc\u0628 \u0648\u0627\u0626\u0679\u0644\u0632<\/strong>: \u0645\u0648\u0627\u062f \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u067e\u06cc\u0646\u0679 \u0627\u0648\u0631 \u06a9\u0644 \u0628\u0644\u0627\u06a9\u0646\u06af \u0679\u0627\u0626\u0645 \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0645 \u0628\u06cc\u0646\u0688\u0648\u0688\u062a\u06be<\/strong>: \u0635\u0627\u0631\u0641\u06cc\u0646 \u0635\u0631\u0641 \u0648\u06c1\u06cc \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0648\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0631\u062f \u0639\u0645\u0644 \u0645\u06cc\u06ba\u060c \u06cc\u06c1 \u0645\u062a\u062d\u0631\u06a9 \u0628\u0627\u0632\u06cc\u0627\u0641\u062a \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 <code>React.lazy()<\/code> \u06cc\u0627 Next.js <code>next\/dynamic<\/code>.<\/p>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0627\u0626\u0637<\/h2>\n<p>\u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc:<\/p>\n<ul>\n<li>\n<p>\u0631\u062f \u0639\u0645\u0644 \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645 (\u0627\u062c\u0632\u0627\u0621\u060c \u06c1\u06a9\u0633\u060c \u062d\u0627\u0644\u062a)<\/p>\n<\/li>\n<li>\n<p>Node.js \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u0648\u0627 (\u0648\u0631\u0698\u0646 18 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062f\u06c1)<\/p>\n<\/li>\n<li>\n<p>React \u0627\u06cc\u067e (\u0627\u06cc\u06a9 React \u0627\u06cc\u067e \u06cc\u0627 Vite \u0628\u0646\u0627\u0626\u06cc\u06ba) \u06cc\u0627 Next.js \u0627\u06cc\u067e (Next.js \u0645\u062b\u0627\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2)<\/p>\n<\/li>\n<\/ul>\n<p>React \u06a9\u06cc \u0645\u062b\u0627\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e Create React \u0627\u06cc\u067e \u06cc\u0627 Vite \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 Next.js \u0645\u062b\u0627\u0644\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c App Router (Next.js 13 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1) \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-how-to-use-reactlazy-for-code-splitting\">\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 <code>React.lazy<\/code> \u06a9\u0648\u0688 \u06a9\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2<\/h2>\n<p><code>React.lazy()<\/code> \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631\u0622\u0645\u062f\u0627\u062a \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u06cc\u0627 \u062c\u0627\u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 React \u062c\u0632\u0648 \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0644\u0648\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0627\u0633\u06d2 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><code>React.lazy()<\/code> \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u06d2 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06cc \u062a\u0648\u0642\u0639 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba \u062c\u0648 \u0645\u062a\u062d\u0631\u06a9 \u0648\u0627\u067e\u0633 \u0622\u0626\u06d2\u06d4 <code>import()<\/code>. \u062f\u0631\u0622\u0645\u062f \u0634\u062f\u06c1 \u0645\u0627\u0688\u06cc\u0648\u0644\u0632 \u06a9\u0648 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0627\u06cc\u06a9\u0633\u067e\u0648\u0631\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0645\u062b\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-jsx\">import { lazy } from 'react';\n\nconst HeavyChart = lazy(() => import('.\/HeavyChart'));\nconst AdminDashboard = lazy(() => import('.\/AdminDashboard'));\n\nfunction App() {\n return (\n \n );\n}\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u06cc\u06a9 \u0646\u0627\u0645\u0632\u062f \u0628\u0631\u0622\u0645\u062f \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0628\u0631\u0622\u0645\u062f \u0645\u06cc\u06ba \u0646\u0642\u0634\u06c1 \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-jsx\">const ComponentWithNamedExport = lazy(() =>\n import('.\/MyComponent').then((module) => ({\n default: module.NamedComponent,\n }))\n);\n<\/code><\/pre>\n<p>\u0622\u067e \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0688\u06cc\u0628\u06af\u0646\u06af \u06a9\u0648 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u06a9\u0691\u0648\u06ba \u06a9\u06d2 \u0646\u0627\u0645 \u0628\u06be\u06cc \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-jsx\">const HeavyChart = lazy(() =>\n import(\/* webpackChunkName: \"heavy-chart\" *\/ '.\/HeavyChart')\n);\n<\/code><\/pre>\n<p><code>React.lazy()<\/code> \u0627\u06a9\u06cc\u0644\u0627 \u06a9\u0627\u0641\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0633\u0633\u062a \u062c\u0632\u0648 \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0644\u067e\u06cc\u0679\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2: <code>Suspense<\/code> \u062a\u0648 React \u062c\u0627\u0646\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0644\u0648\u0688 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u06a9\u06cc\u0627 \u062f\u06a9\u06be\u0627\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-how-to-use-suspense-with-reactlazy\">\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 <code>Suspense<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>React.lazy<\/code><\/h2>\n<p><code>Suspense<\/code> \u0627\u06cc\u06a9 \u0631\u062f \u0639\u0645\u0644 \u06a9\u0627 \u062c\u0632\u0648 \u062c\u0648 \u0641\u0627\u0644 \u0628\u06cc\u06a9 UI \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0627\u0633 \u06a9\u06d2 \u0686\u0627\u0626\u0644\u0688 \u0639\u0646\u0627\u0635\u0631 \u0644\u0648\u0688 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u0644 \u06a9\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 <code>React.lazy()<\/code> \u0645\u062a\u062d\u0631\u06a9 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0631\u0622\u0645\u062f \u0634\u062f\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0644\u0648\u0688\u0646\u06af \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 \u0633\u0633\u062a \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0644\u067e\u06cc\u0679\u06cc\u06ba: <code>Suspense<\/code> \u0627\u0648\u0631 <code>fallback<\/code> \u0633\u06c1\u0627\u0631\u06d2:<\/p>\n<pre><code class=\"language-jsx\">import { lazy, Suspense } from 'react';\n\nconst HeavyChart = lazy(() => import('.\/HeavyChart'));\nconst AdminDashboard = lazy(() => import('.\/AdminDashboard'));\n\nfunction App() {\n return (\n <p>\n \n <suspense fallback=\"{<div\">Loading chart...<\/suspense><\/p>}>\n <heavychart\/>\n \n <suspense fallback=\"{<div\">Loading dashboard...<\/suspense><\/code><\/pre>\n<\/section>\n<\/div>\n<p>}><br \/>\n <admindashboard\/><\/p>\n<\/section>\n<\/article>\n<\/div>\n<p> ); }<\/p>\n<p>\u0622\u067e \u0627\u06cc\u06a9 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba <code>Suspense<\/code> \u0645\u062a\u0639\u062f\u062f \u0633\u0633\u062a \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u062d\u062f\u0648\u062f:<\/p>\n<pre><code class=\"language-jsx\"><suspense fallback=\"{<div\">Loading...<\/suspense><\/code><\/pre>\n<p><\/main><\/div>\n<p>}><br \/>\n <heavychart\/><br \/>\n <admindashboard\/><\/p>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u0628\u06c1\u062a\u0631 \u0641\u0627\u0644 \u0628\u06cc\u06a9 \u0633\u0645\u062c\u06be\u06cc \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-jsx\">function LoadingSpinner() {\n return (\n \n );\n}\n\n<suspense fallback=\"{<LoadingSpinner\"\/>}>\n <heavychart\/>\n\n<\/code><\/pre>\n<h2 id=\"heading-how-to-handle-errors-with-error-boundaries\">\u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f\u0648\u062f \u06a9\u06d2 \u0633\u0627\u062a\u06be \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p><code>React.lazy()<\/code> \u0627\u0648\u0631 <code>Suspense<\/code> \u0644\u0648\u0688\u0646\u06af \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u0646\u06c1 \u0633\u0646\u0628\u06be\u0627\u0644\u06cc\u06ba (\u062c\u06cc\u0633\u06d2 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba \u06cc\u0627 \u06af\u0645\u0634\u062f\u06c1 \u062d\u0635\u06d2)\u06d4 \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n<p>\u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f \u0627\u06cc\u06a9 \u06a9\u0644\u0627\u0633 \u062c\u0632\u0648 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>componentDidCatch<\/code> \u06cc\u0627 <code>static getDerivedStateFromError<\/code> \u06cc\u06c1 \u0630\u06cc\u0644\u06cc \u062f\u0631\u062e\u062a \u0645\u06cc\u06ba \u063a\u0644\u0637\u06cc\u0627\u06ba \u067e\u06a9\u0691\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0641\u0627\u0644 \u0628\u06cc\u06a9 UI \u067e\u06cc\u0634 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f \u06c1\u06d2:<\/p>\n<pre><code class=\"language-jsx\">import { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.error('Error caught by boundary:', error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n return this.props.fallback || <p>Something went wrong.<\/p>;\n }\n return this.props.children;\n }\n}\n<\/code><\/pre>\n<p>\u0622\u067e \u06a9\u06cc \u067e\u06cc\u06a9\u06cc\u062c\u0646\u06af <code>Suspense<\/code> \u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062d\u062f:<\/p>\n<pre><code class=\"language-jsx\">import { lazy, Suspense } from 'react';\nimport ErrorBoundary from '.\/ErrorBoundary';\n\nconst HeavyChart = lazy(() => import('.\/HeavyChart'));\n\nfunction App() {\n return (\n <errorboundary fallback=\"{<div\">Failed to load chart. Please try again.}>\n <suspense fallback=\"{<div\">Loading chart...}>\n <heavychart\/>\n <\/suspense>\n <\/errorboundary>\n );\n}\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u062d\u0635\u06c1 \u0644\u0648\u0688 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648\u060c \u0627\u06cc\u06a9 \u0627\u06cc\u0631\u0631 \u0628\u0627\u0624\u0646\u0688\u0631\u06cc \u0627\u0633\u06d2 \u067e\u06a9\u0691 \u0644\u06cc\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u062e\u0627\u0644\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06cc\u0627 \u063a\u06cc\u0631 \u06c1\u06cc\u0646\u0688\u0644 \u063a\u0644\u0637\u06cc \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0641\u0627\u0644 \u0628\u06cc\u06a9 \u062f\u06a9\u06be\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-how-to-use-nextdynamic-in-nextjs\">\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 <code>next\/dynamic<\/code> Next.js \u0645\u06cc\u06ba<\/h2>\n<p>Next.js \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0642\u0648\u06cc\u062a \u06cc\u0627\u0641\u062a\u06c1 <code>next\/dynamic<\/code>\u06cc\u06c1 \u0631\u06cc\u067e\u0646\u06af \u06c1\u06d2\u06d4 <code>React.lazy()<\/code> \u0627\u0648\u0631 <code>Suspense<\/code> Next.js \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (\u0628\u0634\u0645\u0648\u0644 \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af)\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644:<\/p>\n<pre><code class=\"language-jsx\">'use client';\n\nimport dynamic from 'next\/dynamic';\n\nconst ComponentA = dynamic(() => import('..\/components\/A'));\nconst ComponentB = dynamic(() => import('..\/components\/B'));\n\nexport default function Page() {\n return (\n \n );\n}\n<\/code><\/pre>\n<h3 id=\"heading-custom-loading-ui\">\u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0644\u0648\u0688\u0646\u06af UI<\/h3>\n<p>\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>loading<\/code> \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u067e\u0644\u06cc\u0633 \u06c1\u0648\u0644\u0688\u0631\u0632 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a:<\/p>\n<pre><code class=\"language-jsx\">const HeavyChart = dynamic(() => import('..\/components\/HeavyChart'), {\n loading: () => <p>Loading chart...<\/p>,\n});\n<\/code><\/pre>\n<h3 id=\"heading-disable-server-side-rendering\">\u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u0648 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0648 \u0635\u0631\u0641 \u06a9\u0644\u0627\u0626\u0646\u0679 \u067e\u0631 \u0686\u0644\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u060c \u062c\u06cc\u0633\u06d2 <code>window<\/code> \u06cc\u0627 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062e\u0635\u0648\u0635 API)\u060c \u062a\u0631\u062a\u06cc\u0628\u0627\u062a <code>ssr: false<\/code>:<\/p>\n<pre><code class=\"language-jsx\">const ClientOnlyMap = dynamic(() => import('..\/components\/Map'), {\n ssr: false,\n loading: () => <p>Loading map...<\/p>,\n});\n<\/code><\/pre>\n<p>\u0645\u06cc\u0645\u0648: <code>ssr: false<\/code> \u06cc\u06c1 \u0635\u0631\u0641 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 <code>'use client'<\/code> \u0641\u0627\u0626\u0644<\/p>\n<h3 id=\"heading-load-on-demand\">\u0645\u0627\u0646\u06af \u067e\u0631 \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u06a9\u0633\u06cc \u062c\u0632\u0648 \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u0634\u0631\u0627\u0626\u0637 \u067e\u0648\u0631\u06cc \u06c1\u0648\u06ba\u06d4<\/p>\n<pre><code class=\"language-jsx\">'use client';\n\nimport { useState } from 'react';\nimport dynamic from 'next\/dynamic';\n\nconst Modal = dynamic(() => import('..\/components\/Modal'), {\n loading: () => <p>Opening modal...<\/p>,\n});\n\nexport default function Page() {\n const [showModal, setShowModal] = useState(false);\n\n return (\n <p>\n <button onclick=\"{()\"> setShowModal(true)}>Open Modal<\/button>\n {showModal && <modal onclose=\"{()\"> setShowModal(false)} \/>}\n <\/modal><\/p>\n );\n}\n<\/code><\/pre>\n<h3 id=\"heading-named-exports\">\u0628\u0631\u0622\u0645\u062f \u06a9\u0627 \u0646\u0627\u0645 \u062f\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/h3>\n<p>\u0646\u0627\u0645\u0632\u062f \u0628\u0631\u0622\u0645\u062f\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631\u0622\u0645\u062f\u0627\u062a \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-jsx\">const Hello = dynamic(() =>\n import('..\/components\/hello').then((mod) => mod.Hello)\n);\n<\/code><\/pre>\n<h3 id=\"heading-using-suspense-with-nextdynamic\">\u0627\u06af\u0644\u0627\/\u0645\u062a\u062d\u0631\u06a9 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0633\u067e\u0646\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644<\/h3>\n<p>React 18+ \u0645\u06cc\u06ba \u0622\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>suspense: true<\/code> \u0627\u067e\u0646\u06d2 \u0648\u0627\u0644\u062f\u06cc\u0646 \u067e\u0631 \u0628\u06be\u0631\u0648\u0633\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 <code>Suspense<\/code> \u0633\u0631\u062d\u062f \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>loading<\/code> \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a:<\/p>\n<pre><code class=\"language-jsx\">const HeavyChart = dynamic(() => import('..\/components\/HeavyChart'), {\n suspense: true,\n});\n\n\/\/ In your component:\n<suspense fallback=\"{<div\">Loading...}>\n <heavychart\/>\n<\/suspense>\n<\/code><\/pre>\n<p>\u0627\u06c1\u0645: \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a <code>suspense: true<\/code>\u0622\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2 <code>ssr: false<\/code> \u06cc\u0627 <code>loading<\/code> \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>Suspense<\/code> \u06a9\u06cc\u0627 \u0628\u0627\u062a \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-reactlazy-vs-nextdynamic-when-to-use-each\"><code>React.lazy<\/code> \u0628\u0691\u0627 <code>next\/dynamic<\/code>: \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0648 \u06a9\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/h2>\n<table>\n<thead>\n<tr>\n<th>\u062e\u0635\u0648\u0635\u06cc\u062a<\/th>\n<th>React.lazy + \u0633\u0633\u067e\u0646\u0633<\/th>\n<th>\u0627\u06af\u0644\u0627\/\u0645\u062a\u062d\u0631\u06a9<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\u06a9\u0646\u06a9\u0627\u0644<\/strong><\/td>\n<td>\u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e (\u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e\u0633 \u0628\u0646\u0627\u0646\u0627\u060c \u0648\u0627\u0626\u0679 \u0648\u063a\u06cc\u0631\u06c1)<\/td>\n<td>\u0635\u0631\u0641 Next.js<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af<\/strong><\/td>\n<td>\u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1 \u0646\u06c1\u06cc\u06ba\u06d4<\/td>\n<td>\u0628\u0637\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679 \u062a\u0639\u0627\u0648\u0646 \u06cc\u0627\u0641\u062a\u06c1<\/td>\n<\/tr>\n<tr>\n<td><strong>SSR \u06a9\u0648 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong><\/td>\n<td>\u0642\u0627\u0628\u0644 \u0627\u0637\u0644\u0627\u0642 \u0646\u06c1\u06cc\u06ba\u06d4<\/td>\n<td><code>ssr: false<\/code> \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a<\/td>\n<\/tr>\n<tr>\n<td><strong>UI \u0644\u0648\u0688 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/strong><\/td>\n<td><code>Suspense<\/code> \u0645\u062a\u0628\u0627\u062f\u0644 \u0633\u06c1\u0627\u0631\u06d2<\/td>\n<td>\u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0633\u062c\u0627\u0648\u0679 <code>loading<\/code> \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a<\/td>\n<\/tr>\n<tr>\n<td><strong>\u06c1\u06cc\u0646\u0688\u0644\u0646\u06af \u0645\u06cc\u06ba \u062e\u0631\u0627\u0628\u06cc<\/strong><\/td>\n<td>\u062e\u0631\u0627\u0628\u06cc \u06a9\u06cc \u062d\u062f \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/td>\n<td>\u062e\u0631\u0627\u0628\u06cc \u06a9\u06cc \u062d\u062f \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0628\u0631\u0622\u0645\u062f \u06a9\u0627 \u0646\u0627\u0645 \u062f\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/strong><\/td>\n<td>\u063a\u06cc\u0631 \u0641\u0639\u0627\u0644\u06cc <code>.then()<\/code> \u0646\u0642\u0634\u06c1 \u0633\u0627\u0632\u06cc<\/td>\n<td>\u0627\u06cc\u06a9 \u06c1\u06cc <code>.then()<\/code> \u067e\u06cc\u0679\u0631\u0646<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0633\u0633\u067e\u0646\u0633 \u0645\u0648\u0688<\/strong><\/td>\n<td>\u06c1\u0645\u06cc\u0634\u06c1 \u0633\u0633\u067e\u0646\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/td>\n<td>\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc <code>suspense: true<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 id=\"heading-when-to-use-reactlazy\">\u06a9\u0628 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 <code>React.lazy<\/code><\/h3>\n<ul>\n<li>\n<p>\u0622\u067e \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba <strong>\u062e\u0627\u0644\u0635 \u0631\u062f \u0639\u0645\u0644 \u0627\u06cc\u067e<\/strong> (Next.js \u0646\u06c1\u06cc\u06ba)<\/p>\n<\/li>\n<li>\n<p>\u062a\u062e\u0644\u06cc\u0642 \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u06cc\u067e\u060c \u0648\u0627\u0626\u0679 \u06cc\u0627 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0648\u06cc\u0628 \u067e\u06cc\u06a9 \u0633\u06cc\u0679 \u0627\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0622\u067e \u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1\u060c \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9-\u0627\u06cc\u06af\u0646\u0648\u0633\u0679\u06a9 \u0627\u067e\u0631\u0648\u0686 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"heading-when-to-use-nextdynamic\">\u062c\u0628 <code>Use next\/dynamic<\/code><\/h3>\n<ul>\n<li>\n<p>\u0622\u067e \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba <strong>Next.js \u0627\u06cc\u067e<\/strong><\/p>\n<\/li>\n<li>\n<p>\u06a9\u0686\u06be \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 SSR \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u062f\u0648\u0633\u0631\u06d2 SSR \u06a9\u0648 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u06ba \u0627\u0633\u06d2 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0628\u0644\u0679 \u0627\u0646 \u0644\u0648\u0688\u0646\u06af \u067e\u0644\u06cc\u0633 \u06c1\u0648\u0644\u0688\u0631 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba\u06d4 <code>Suspense<\/code><\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u06ba Next.js \u06a9\u06cc \u0645\u062e\u0635\u0648\u0635 \u0627\u0635\u0644\u0627\u062d \u0627\u0648\u0631 \u0688\u06cc\u0641\u0627\u0644\u0679\u0633 \u0686\u0627\u06c1\u062a\u0627 \u06c1\u0648\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-real-world-examples\">\u062d\u0642\u06cc\u0642\u06cc \u06a9\u06cc\u0633<\/h2>\n<h3 id=\"heading-example-1-route-based-code-splitting-in-react\">\u0645\u062b\u0627\u0644 1: React \u0645\u06cc\u06ba \u067e\u0627\u062a\u06be \u067e\u0631 \u0645\u0628\u0646\u06cc \u06a9\u0648\u0688 \u06a9\u06cc \u062a\u0642\u0633\u06cc\u0645<\/h3>\n<p>\u0627\u067e\u0646\u06cc \u0627\u06cc\u067e \u06a9\u0648 \u0631\u0627\u0633\u062a\u06d2 \u06a9\u06d2 \u0644\u062d\u0627\u0638 \u0633\u06d2 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u06c1\u0631 \u0635\u0641\u062d\u06c1 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0644\u0648\u0688 \u06c1\u0648 \u062c\u0628 \u0635\u0627\u0631\u0641 \u0627\u0633 \u067e\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0679 \u06a9\u0631\u06d2\u06d4<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.jsx\nimport { lazy, Suspense } from 'react';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport ErrorBoundary from '.\/ErrorBoundary';\n\nconst Home = lazy(() => import('.\/pages\/Home'));\nconst Dashboard = lazy(() => import('.\/pages\/Dashboard'));\nconst Settings = lazy(() => import('.\/pages\/Settings'));\n\nfunction App() {\n return (\n <browserrouter>\n <errorboundary fallback=\"{<div\">Failed to load page.}>\n <suspense fallback=\"{<div\">Loading page...}>\n <routes>\n <route path=\"\/\" element=\"{<Home\"\/>} \/>\n <route path=\"\/dashboard\" element=\"{<Dashboard\"\/>} \/>\n <route path=\"\/settings\" element=\"{<Settings\"\/>} \/>\n <\/routes>\n <\/suspense>\n <\/errorboundary>\n <\/browserrouter>\n );\n}\n<\/code><\/pre>\n<h3 id=\"heading-example-2-lazy-loading-a-heavy-chart-library-in-nextjs\">\u0645\u062b\u0627\u0644 2: Next.js \u0645\u06cc\u06ba \u0628\u06be\u0627\u0631\u06cc \u0686\u0627\u0631\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u06cc \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af<\/h3>\n<p>\u0686\u0627\u0631\u0679 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u0648 \u0644\u0648\u0688 \u06a9\u0631\u0646\u0627 \u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u0645\u0648\u062e\u0631 \u06a9\u0631\u06cc\u06ba \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u0635\u0627\u0631\u0641 \u062a\u062c\u0632\u06cc\u06c1 \u0633\u06cc\u06a9\u0634\u0646 \u0646\u06c1 \u06a9\u06be\u0648\u0644\u06d2\u06d4<\/p>\n<pre><code class=\"language-jsx\">\/\/ app\/analytics\/page.jsx\n'use client';\n\nimport { useState } from 'react';\nimport dynamic from 'next\/dynamic';\n\nconst Chart = dynamic(() => import('..\/components\/Chart'), {\n ssr: false,\n loading: () => (\n \n ),\n});\n\nexport default function AnalyticsPage() {\n const [showChart, setShowChart] = useState(false);\n\n return (\n <p>\n \n <button onclick=\"{()\"> setShowChart(true)}>Load Chart<\/button>\n {showChart && <chart\/>}\n <\/p>\n );\n}\n<\/code><\/pre>\n<h3 id=\"heading-example-3-lazy-loading-a-modal\">\u0645\u062b\u0627\u0644 3: \u0645\u0648\u0688\u0644 \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af<\/h3>\n<p>\u0645\u0648\u0688\u0644 \u062c\u0632\u0648 \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba \u062c\u0628 \u0635\u0627\u0631\u0641 \u0627\u0633\u06d2 \u06a9\u06be\u0648\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u06a9 \u06a9\u0631\u06d2\u06d4<\/p>\n<pre><code class=\"language-jsx\">\/\/ React (with React.lazy)\nimport { lazy, Suspense, useState } from 'react';\n\nconst Modal = lazy(() => import('.\/Modal'));\n\nfunction ProductPage() {\n const [showModal, setShowModal] = useState(false);\n\n return (\n <p>\n <button onclick=\"{()\"> setShowModal(true)}>Add to Cart<\/button>\n {showModal && (\n <suspense fallback=\"{null}\">\n <modal onclose=\"{()\"> setShowModal(false)} \/>\n <\/modal><\/suspense>\n )}\n <\/p>\n );\n}\n<\/code><\/pre>\n<pre><code class=\"language-jsx\">\/\/ Next.js (with next\/dynamic)\n'use client';\n\nimport { useState } from 'react';\nimport dynamic from 'next\/dynamic';\n\nconst Modal = dynamic(() => import('.\/Modal'), {\n loading: () => null,\n});\n\nexport default function ProductPage() {\n const [showModal, setShowModal] = useState(false);\n\n return (\n <p>\n <button onclick=\"{()\"> setShowModal(true)}>Add to Cart<\/button>\n {showModal && <modal onclose=\"{()\"> setShowModal(false)} \/>}\n <\/modal><\/p>\n );\n}\n<\/code><\/pre>\n<h3 id=\"heading-example-4-lazy-loading-external-libraries\">\u0645\u062b\u0627\u0644 4: \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0628\u06cc\u0631\u0648\u0646\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba<\/h3>\n<p>\u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba \u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0627\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 (\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u062c\u0628 \u0648\u06c1 \u0633\u0631\u0686 \u0628\u0627\u06a9\u0633 \u0645\u06cc\u06ba \u0679\u0627\u0626\u067e \u06a9\u0631\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba)\u06d4<\/p>\n<pre><code class=\"language-jsx\">'use client';\n\nimport { useState } from 'react';\n\nconst names = ['Alice', 'Bob', 'Charlie', 'Diana'];\n\nexport default function SearchPage() {\n const [results, setResults] = useState([]);\n const [query, setQuery] = useState('');\n\n const handleSearch = async (value) => {\n setQuery(value);\n if (!value) {\n setResults([]);\n return;\n }\n \/\/ Load fuse.js only when user searches\n const Fuse = (await import('fuse.js')).default;\n const fuse = new Fuse(names);\n setResults(fuse.search(value));\n };\n\n return (\n \n );\n}\n<\/code><\/pre>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0628\u0646\u0688\u0644 \u06a9\u0648 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u06a9\u06d2 \u0627\u0648\u0631 \u0635\u0631\u0641 \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0648\u0642\u062a \u06a9\u0648\u0688 \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u06a9\u0627\u0631\u06a9\u0631\u062f\u06af\u06cc \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1\u0627\u06ba \u06c1\u0645 \u0646\u06d2 \u06a9\u06cc\u0627 \u0633\u06cc\u06a9\u06be\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p><strong>react.lazy()<\/strong> – \u06a9\u0648\u0688 \u06a9\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 React \u0627\u06cc\u067e\u0633 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u062c\u06be\u06d2 \u0627\u06cc\u06a9 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0631\u0622\u0645\u062f \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>import()<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>\u0633\u0633\u067e\u0646\u0633<\/strong> – \u0633\u0633\u062a \u062c\u0632\u0648 \u06a9\u0648 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0644\u067e\u06cc\u0679\u06cc\u06ba: <code>Suspense<\/code> \u0627\u0648\u0631 <code>fallback<\/code> \u06cc\u06c1 \u0644\u0648\u0688 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f<\/strong> – \u062d\u0635\u06c1 \u0644\u0648\u0688 \u06a9\u06cc \u0646\u0627\u06a9\u0627\u0645\u06cc\u0648\u06ba \u06a9\u0648 \u067e\u06a9\u0691\u0646\u06d2 \u0627\u0648\u0631 \u062f\u0648\u0633\u062a\u0627\u0646\u06c1 \u063a\u0644\u0637\u06cc UI \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06af\u0644\u0627\/\u0645\u062a\u062d\u0631\u06a9<\/strong> – \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0641\u0648\u0627\u0626\u062f \u06a9\u06d2 \u0639\u0644\u0627\u0648\u06c1 SSR \u06a9\u0646\u0679\u0631\u0648\u0644 \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0628\u0644\u0679 \u0627\u0646 \u0644\u0648\u0688\u0646\u06af \u0622\u067e\u0634\u0646\u0632 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba <code>React.lazy<\/code> \u0635\u0631\u0641 \u0631\u062f\u0639\u0645\u0644 \u06a9\u06d2 \u0645\u0646\u0635\u0648\u0628\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 <code>next\/dynamic<\/code> Next.js \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4 \u0627\u0646 \u06a9\u0648 \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u06cc\u06ba <code>Suspense<\/code> \u0645\u0636\u0628\u0648\u0637 \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u0633\u06cc\u0679 \u0627\u067e \u06a9\u06d2 \u0644\u06cc\u06d2 \u062e\u0631\u0627\u0628\u06cc \u06a9\u06cc \u062d\u062f\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 \u0633\u0628 \u0633\u06d2 \u0628\u06be\u0627\u0631\u06cc \u0627\u062c\u0632\u0627\u0621 (\u0686\u0627\u0631\u0679\u0633\u060c \u0645\u0627\u0688\u0644\u0632\u060c \u0627\u06cc\u0688\u0645\u0646 \u067e\u06cc\u0646\u0644\u0632) \u06a9\u06cc \u0634\u0646\u0627\u062e\u062a \u06a9\u0631\u06a9\u06d2 \u0627\u0648\u0631 \u0627\u0646\u06c1\u06cc\u06ba \u0633\u0633\u062a\u06cc \u0633\u06d2 \u0644\u0648\u0688 \u06a9\u0631\u06a9\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u062b\u0631 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0648\u0631 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u0628\u0646\u0688\u0644 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0648\u06cc\u0628 \u0648\u0627\u0626\u0679\u0644\u0632 \u06a9\u06cc \u067e\u06cc\u0645\u0627\u0626\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<hr\/>\n<hr\/>\n<p data-test-label=\"social-row-cta\" class=\"social-row\">\n<p> \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0628 \u062a\u06a9 \u067e\u0691\u06be\u0627 \u06c1\u06d2 \u062a\u0648 \u0645\u0635\u0646\u0641 \u0645\u06cc\u06ba \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1\u06d4 <button id=\"tweet-btn\" class=\"cta-button\" data-test-label=\"tweet-button\">\u0634\u06a9\u0631\u06cc\u06c1<\/button>\n<\/p>\n<div class=\"learn-cta-row\" data-test-label=\"learn-cta-row\">\n<p> \u0645\u0641\u062a \u0645\u06cc\u06ba \u06a9\u0648\u0688 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\u06d4 freeCodeCamp \u06a9\u06d2 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0646\u0635\u0627\u0628 \u0646\u06d2 40,000 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0644\u0648\u06af\u0648\u06ba \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0648\u0644\u067e\u0631 \u0645\u0644\u0627\u0632\u0645\u062a\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u06cc \u06c1\u06d2\u06d4 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627\n <\/p>\n<\/div>\n<p><\/body>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React \u0627\u0648\u0631 Next.js \u0645\u06cc\u06ba \u0633\u0633\u062a \u0644\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u06cc \u06af\u0627\u0626\u06cc\u0688 \u0628\u0691\u06d2 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0628\u0646\u0688\u0644 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0648 \u0633\u0633\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0648\u0688 \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u067e\u06c1\u0644\u06d2 \u067e\u06cc\u0646\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0631\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0622\u067e \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u06a9\u0645 \u0631\u062f\u0639\u0645\u0644 \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0633\u0631\u0686 […]<\/p>\n","protected":false},"author":7,"featured_media":22505,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-22504","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/22504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/comments?post=22504"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/22504\/revisions"}],"predecessor-version":[{"id":22506,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/22504\/revisions\/22506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media\/22505"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media?parent=22504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/categories?post=22504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/tags?post=22504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n
\n
\n <\/p>\n