{"id":97,"date":"2026-07-30T17:46:21","date_gmt":"2026-07-30T14:16:21","guid":{"rendered":"https:\/\/hmoazzen.ir\/blog\/react-server-components-nextjs-optimization\/"},"modified":"2026-07-30T17:46:44","modified_gmt":"2026-07-30T14:16:44","slug":"react-server-components-nextjs-optimization","status":"publish","type":"post","link":"https:\/\/hmoazzen.ir\/blog\/react-server-components-nextjs-optimization\/","title":{"rendered":"\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React: \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u062f\u0631 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0648\u0628 \u0628\u0627 Next.js"},"content":{"rendered":"

\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u067e\u0631\u0634\u062a\u0627\u0628 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0627\u0645\u0631\u0648\u0632\u060c \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0648 \u0633\u0631\u0639\u062a \u062d\u0631\u0641 \u0627\u0648\u0644 \u0631\u0627 \u0645\u06cc\u200c\u0632\u0646\u0646\u062f. \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u0646\u062f \u06a9\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0648 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627 \u0641\u0648\u0631\u0627\u064b \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u0648\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0631\u0648\u0627\u0646 \u0648 \u0628\u062f\u0648\u0646 \u062a\u0623\u062e\u06cc\u0631 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u06cc\u0627\u0646\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> (React Server Components \u06cc\u0627 RSC) \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u062a\u062d\u0648\u0644\u0627\u062a \u0645\u0639\u0645\u0627\u0631\u06cc React \u0627\u0632 \u0632\u0645\u0627\u0646 \u0645\u0639\u0631\u0641\u06cc Hooks\u060c \u067e\u0627\u0633\u062e\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0646\u06cc\u0627\u0632\u0647\u0627 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0646\u0642\u0644\u0627\u0628\u06cc\u060c \u0631\u0648\u0634 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0631\u0627 \u0628\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0628\u062e\u0634\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 React \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0646\u062d\u0635\u0627\u0631\u06cc \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0647\u062f\u0641 \u0627\u0635\u0644\u06cc RSC \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u06a9\u062f\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0686\u0634\u0645\u06af\u06cc\u0631 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0648 \u0628\u0647\u0628\u0648\u062f \u06a9\u0644\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u0633\u062a. \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 \u0639\u0645\u06cc\u0642 \u062f\u0631 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 Next.js\u060c \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 App Router\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u062a\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631\u060c \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0627\u0644\u0627 \u0648 \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0633\u0627\u0632\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0628\u0647 \u0628\u0631\u0631\u0633\u06cc \u0639\u0645\u06cc\u0642 RSC\u060c \u0646\u062d\u0648\u0647 \u0627\u062f\u063a\u0627\u0645 \u0622\u0646 \u0628\u0627 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 Next.js\u060c \u0645\u0632\u0627\u06cc\u0627\u06cc \u0622\u0646 \u062f\u0631 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648\u0628<\/strong> \u0648 \u06a9\u0627\u0647\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a<\/strong>\u060c \u0646\u0642\u0634 \u0622\u0646 \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc Full-stack UX<\/strong>\u060c \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc\u060c \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u0648 \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React (RSC) \u0686\u06cc\u0633\u062a\u0646\u062f \u0648 \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u061f<\/h2>\n
\"\u0646\u0645\u0648\u062f\u0627\u0631
\u0646\u0645\u0648\u062f\u0627\u0631 \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0627 RSC<\/figcaption><\/figure>\n

RSC\u0647\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0645\u0646\u062d\u0635\u0631\u0627\u064b \u062f\u0631 \u0645\u062d\u06cc\u0637 \u0633\u0631\u0648\u0631 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0628\u0631\u062e\u0644\u0627\u0641 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0646\u062a\u06cc React \u06a9\u0647 \u0647\u0645 \u062f\u0631 \u0633\u0631\u0648\u0631 (\u0628\u0631\u0627\u06cc SSR) \u0648 \u0647\u0645 \u062f\u0631 \u06a9\u0644\u0627\u06cc\u0646\u062a (\u0628\u0631\u0627\u06cc Hydration \u0648 \u062a\u0639\u0627\u0645\u0644) \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c RSC\u0647\u0627 \u0647\u0631\u06af\u0632 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a “hydrate” \u06cc\u0627 \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc\u200c\u06af\u0631\u062f\u0646\u062f. \u062e\u0631\u0648\u062c\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0622\u0646\u200c\u0647\u0627\u060c \u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u0628\u0644\u06a9\u0647 \u0628\u0647 \u0641\u0631\u0645\u062a \u062e\u0627\u0635\u06cc \u0628\u0647 \u0646\u0627\u0645 React Server Component Payload (RSC Payload) \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0628\u0647 React \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0645\u0633\u0626\u0648\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u060c \u0645\u0646\u0637\u0642 \u06a9\u0646\u062a\u0631\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc\u060c \u0648 \u062a\u062c\u0645\u06cc\u0639 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0639\u0645\u062f\u062a\u0627\u064b \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u062f\u060c \u0628\u0647 \u0633\u0631\u0648\u0631 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u062f. \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc\u0646 \u062c\u0627\u0628\u0647\u200c\u062c\u0627\u06cc\u06cc \u0645\u0633\u0626\u0648\u0644\u06cc\u062a\u060c \u0627\u0631\u0633\u0627\u0644 \u06a9\u0645\u062a\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 \u062f\u0631 \u0646\u062a\u06cc\u062c\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0633\u062a.<\/p>\n

\u0646\u0642\u0634 RSC \u062f\u0631 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 Next.js \u0648 App Router<\/h2>\n
\"\u0646\u0645\u0627\u06cc\u06cc
\u0646\u0645\u0627\u06cc\u06cc \u0627\u0632 \u06cc\u06a9\u067e\u0627\u0631\u0686\u06af\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648 \u0628\u06a9\u200c\u0627\u0646\u062f \u062f\u0631 \u0645\u0639\u0645\u0627\u0631\u06cc Full-stack UX \u0628\u0627 RSC<\/figcaption><\/figure>\n

\u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9 Next.js\u060c \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u0628\u0627 \u0645\u0639\u0631\u0641\u06cc App Router \u062f\u0631 \u0646\u0633\u062e\u0647\u200c\u0647\u0627\u06cc 13 \u0628\u0647 \u0628\u0639\u062f\u060c \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648 \u0628\u0647\u0631\u0647\u200c\u0628\u0631\u062f\u0627\u0631\u06cc \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0631\u0627 \u0628\u0647 \u0647\u0633\u062a\u0647 \u062e\u0648\u062f \u0622\u0648\u0631\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 App Router\u060c \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f “Server-First” \u0627\u062a\u062e\u0627\u0630 \u0634\u062f\u0647 \u0627\u0633\u062a\u061b \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u062a\u0645\u0627\u0645\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0627\u0631\u0627\u062f\u0627\u06cc\u0645 \u0628\u0632\u0631\u06af \u0646\u0633\u0628\u062a \u0628\u0647 Pages Router \u0642\u0628\u0644\u06cc \u0627\u0633\u062a.<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u0627\u0645\u0644\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0645\u062d\u0644\u06cc \u06cc\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 API\u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631 (\u0645\u0627\u0646\u0646\u062f window<\/code> \u06cc\u0627 localStorage<\/code>) \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u0635\u0631\u0627\u062d\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631 \"use client\"<\/code> \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0645\u0634\u062e\u0635 \u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0628\u0647 \u0628\u0627\u0646\u062f\u0644\u0631 (Bundler) \u0627\u0637\u0644\u0627\u0639 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0645\u0627\u0698\u0648\u0644 \u0648 \u062a\u0645\u0627\u0645 \u0645\u0627\u0698\u0648\u0644\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u0628\u0627\u0646\u062f\u0644 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u0646\u062f.<\/p>\n

Next.js \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 API\u0647\u0627\u06cc React\u060c \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0633\u06af\u0645\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u0633\u06cc\u0631 (\u0645\u0627\u0646\u0646\u062f layouts<\/code> \u0648 pages<\/code>) \u0648 Suspense Boundaries \u062a\u0642\u0633\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062e\u0631\u0648\u062c\u06cc RSC\u0647\u0627 \u0628\u0647 Payload \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0648 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f \u062a\u0627 \u062a\u0648\u0633\u0637 React \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc DOM \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06af\u0631\u062f\u062f.<\/p>\n

\u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648\u0628 \u0648 \u06a9\u0627\u0647\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0627 RSC<\/h2>\n

\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0647\u0645\u200c\u062a\u0631\u06cc\u0646 \u0648 \u0645\u0644\u0645\u0648\u0633\u200c\u062a\u0631\u06cc\u0646 \u0645\u0632\u0627\u06cc\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong>\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648\u0628<\/strong> \u0648 \u06a9\u0627\u0647\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a<\/strong> \u0627\u0633\u062a. \u0627\u06cc\u0646 \u0645\u0632\u0627\u06cc\u0627 \u0628\u0647 \u0686\u0646\u062f\u06cc\u0646 \u0631\u0648\u0634 \u06a9\u0644\u06cc\u062f\u06cc \u062d\u0627\u0635\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n

    \n
  • \n \u06a9\u0627\u0647\u0634 \u062d\u062c\u0645 \u0628\u0627\u0646\u062f\u0644 (Bundle Size):<\/strong> \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0647\u0631\u06af\u0632 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0631\u0633\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0645\u0646\u0637\u0642 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af\u060c \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u0622\u0646\u200c\u0647\u0627 \u0627\u0632 \u0628\u0627\u0646\u062f\u0644 \u06a9\u0644\u0627\u06cc\u0646\u062a \u062d\u0630\u0641 \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0645\u0646\u062c\u0631 \u0628\u0647 \u06a9\u0627\u0647\u0634 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0631\u0633\u0627\u0644\u06cc \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f \u06a9\u0647 \u0632\u0645\u0627\u0646 \u062f\u0627\u0646\u0644\u0648\u062f \u0648 \u067e\u0631\u062f\u0627\u0632\u0634 \u0631\u0627 \u0628\u0647 \u0634\u062f\u062a \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.\n <\/li>\n
  • \n \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631:<\/strong> \u0645\u0631\u0648\u0631\u06af\u0631 HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062f\u0627\u0646\u0644\u0648\u062f \u0648 \u0627\u062c\u0631\u0627\u06cc \u062d\u062c\u0645 \u0632\u06cc\u0627\u062f\u06cc \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0646\u06cc\u0633\u062a. \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0628\u0647\u0628\u0648\u062f First Contentful Paint (FCP) \u0648 Largest Contentful Paint (LCP) \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc\u060c \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u062f\u0631 \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u06a9\u0646\u062f\u062a\u0631 \u06cc\u0627 \u062f\u0633\u062a\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631\u060c \u0628\u0633\u06cc\u0627\u0631 \u062d\u06cc\u0627\u062a\u06cc \u0627\u0633\u062a.\n <\/li>\n
  • \n \u0648\u0627\u06a9\u0634\u06cc \u0645\u0648\u0627\u0632\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u062d\u0630\u0641 \u0622\u0628\u0634\u0627\u0631\u0647\u0627 (Waterfalls):<\/strong> RSC\u0647\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0637\u0648\u0644 \u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0631\u0648\u0631 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0648\u0627\u0632\u06cc \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u0646\u062f \u0648 \u0627\u0632 \u0622\u0628\u0634\u0627\u0631\u0647\u0627\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a (sequential data fetching) \u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0645\u062f\u0644\u060c \u0632\u0645\u0627\u0646 \u06a9\u0644\u06cc \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u062f\u062a \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.\n <\/li>\n
  • \n \u0627\u0633\u062a\u0631\u06cc\u0645\u06cc\u0646\u06af \u0628\u0627 Suspense:<\/strong> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u062f\u0631 \u062a\u0631\u06a9\u06cc\u0628 \u0628\u0627 Suspense\u060c \u0627\u0645\u06a9\u0627\u0646 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u062a\u062f\u0631\u06cc\u062c\u06cc (progressive rendering) \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u062d\u06cc\u0627\u062a\u06cc UI \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u0648\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0633\u0627\u06cc\u0631 \u0628\u062e\u0634\u200c\u0647\u0627 \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0627\u0631\u0646\u062f\u060c \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u0633\u062a\u0631\u06cc\u0645 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u0631\u0633\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c \u062d\u0633 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0648 \u0633\u0631\u0639\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0627\u0631\u0645\u063a\u0627\u0646 \u0645\u06cc\u200c\u0622\u0648\u0631\u062f.\n <\/li>\n
  • \n \u0628\u0647\u0628\u0648\u062f Core Web Vitals:<\/strong> \u0645\u062c\u0645\u0648\u0639 \u0627\u06cc\u0646 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\u200c\u0647\u0627 \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u0645\u0639\u06cc\u0627\u0631\u0647\u0627\u06cc \u062d\u06cc\u0627\u062a\u06cc \u0648\u0628 (Core Web Vitals) \u0645\u0627\u0646\u0646\u062f LCP \u0648 Interaction to Next Paint (INP) \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u06a9\u0647 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u0631\u062a\u0628\u0647\u200c\u0628\u0646\u062f\u06cc \u062f\u0631 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u062d\u0627\u0626\u0632 \u0627\u0647\u0645\u06cc\u062a \u0627\u0633\u062a.\n <\/li>\n<\/ul>\n

    \u0645\u0639\u0645\u0627\u0631\u06cc Full-stack UX: \u06cc\u06a9\u067e\u0627\u0631\u0686\u06af\u06cc \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a<\/h2>\n

    \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u06cc\u06a9 \u0645\u062f\u0644 \u062a\u0648\u0633\u0639\u0647 \u0641\u0648\u0644\u200c\u0627\u0633\u062a\u06a9 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u062a\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644 \u063a\u0646\u06cc \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0633\u0646\u062a\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0645\u0646\u0637\u0642 \u062f\u0627\u062f\u0647\u200c\u0648\u0627\u06a9\u0634\u06cc \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u06a9\u0646\u0627\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc UI \u0642\u0631\u0627\u0631 \u062f\u0647\u0646\u062f \u0648 \u0628\u0647 \u0645\u0639\u0645\u0627\u0631\u06cc “Data Fetching Collocation” \u062f\u0633\u062a \u06cc\u0627\u0628\u0646\u062f.<\/p>\n

      \n
    • \n \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647:<\/strong> RSC\u0647\u0627 \u0645\u0631\u0632 \u0628\u06cc\u0646 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648 \u0628\u06a9\u200c\u0627\u0646\u062f \u0631\u0627 \u06a9\u0645\u200c\u0631\u0646\u06af \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0647 \u0645\u0646\u0627\u0628\u0639 \u0628\u06a9\u200c\u0627\u0646\u062f \u0645\u0627\u0646\u0646\u062f \u067e\u0627\u06cc\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647\u060c \u0633\u06cc\u0633\u062a\u0645 \u0641\u0627\u06cc\u0644 \u06cc\u0627 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u062d\u06cc\u0637\u06cc \u062d\u0633\u0627\u0633 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06cc\u06a9 \u0644\u0627\u06cc\u0647 API \u062c\u062f\u0627\u06af\u0627\u0646\u0647. \u0627\u06cc\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u06af\u06cc\u060c \u0686\u0631\u062e\u0647 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0648 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n <\/li>\n
    • \n Server Actions:<\/strong> \u0628\u0627 \u0645\u0639\u0631\u0641\u06cc Server Actions \u062f\u0631 Next.js\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u062a\u0648\u0627\u0628\u0639 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0627\u0645\u06a9\u0627\u0646 \u062c\u0647\u0634\u200c\u0647\u0627\u06cc (mutations) \u062f\u0627\u062f\u0647\u200c\u0627\u06cc \u0627\u0645\u0646 \u0648 \u06a9\u0627\u0631\u0622\u0645\u062f \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u0631\u06cc\u0641 API\u0647\u0627\u06cc REST \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0639\u0645\u0644\u06cc\u0627\u062a \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f. Server Actions \u0627\u0645\u0646\u06cc\u062a \u0631\u0627 \u0628\u0627 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0641\u0634\u0627\u06cc \u0645\u0646\u0637\u0642 \u062d\u0633\u0627\u0633 \u0628\u0647 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f.\n <\/li>\n
    • \n \u062a\u0631\u06a9\u06cc\u0628 Server \u0648 Client Components:<\/strong> RSC\u0647\u0627 \u0627\u0645\u06a9\u0627\u0646 \u062a\u0631\u06a9\u06cc\u0628 \u0627\u0646\u0639\u0637\u0627\u0641\u200c\u067e\u0630\u06cc\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u062f \u0648 \u062d\u062a\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 children<\/code> \u06cc\u0627 props \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u0627 \u0631\u0641\u062a\u0627\u0631\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u062a\u0631\u06a9\u06cc\u0628 \u06a9\u0646\u06cc\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u062f.\n <\/li>\n<\/ul>\n

      \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0648\u0632 \u0648 \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 RSC<\/h2>\n
        \n
      • \n \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Server-First:<\/strong> \u062f\u0631 Next.js App Router\u060c \u0631\u0648\u06cc\u06a9\u0631\u062f “Server-First” \u062d\u0627\u06a9\u0645 \u0627\u0633\u062a\u061b \u06cc\u0639\u0646\u06cc \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Server Component \u0627\u0633\u062a \u0648 \u062a\u0646\u0647\u0627 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u0627\u0645\u0644 \u06cc\u0627 API\u0647\u0627\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u0632 \"use client\"<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\n <\/li>\n
      • \n \u0645\u0631\u0632\u0647\u0627\u06cc \u0635\u0631\u06cc\u062d:<\/strong> \u0645\u0631\u0632 \u0628\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0627\u06cc\u062f \u0635\u0631\u06cc\u062d \u0648 \u0622\u06af\u0627\u0647\u0627\u0646\u0647 \u0628\u0627\u0634\u062f. \u062f\u0633\u062a\u0648\u0631 \"use client\"<\/code> \u06cc\u06a9 \u0645\u0627\u0698\u0648\u0644 \u06a9\u0627\u0645\u0644 (\u0641\u0627\u06cc\u0644) \u0648 \u0647\u0631 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u062f \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0645\u0627\u0631\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n <\/li>\n
      • \n \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc Props:<\/strong> \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0628\u0627\u0634\u0646\u062f (\u0645\u0627\u0646\u0646\u062f \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u060c \u0627\u0639\u062f\u0627\u062f\u060c \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627\u060c \u0627\u0634\u06cc\u0627\u0621 \u0633\u0627\u062f\u0647). \u062a\u0648\u0627\u0628\u0639\u060c \u06a9\u0644\u0627\u0633\u200c\u0647\u0627\u060c \u06cc\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f. \u0628\u0631\u0627\u06cc Callbacks \u0627\u0632 Server Actions \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.\n <\/li>\n
      • \n Async\/Await \u062f\u0631 Server Components:<\/strong> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f async<\/code> \u0628\u0627\u0634\u0646\u062f \u0648 \u0627\u0632 await<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u062d\u06cc\u0646 \u0631\u0646\u062f\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a\u060c \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0637\u0628\u06cc\u0639\u06cc \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u0631\u0646\u062f\u0631\u06cc\u0646\u06af \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n <\/li>\n
      • \n React 19 \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631\u06cc RSC:<\/strong> React 19 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 RSC \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0627\u06cc\u062f\u0627\u0631\u062a\u0631 \u0641\u0631\u0627\u0647\u0645 \u06a9\u0631\u062f\u0647 \u0648 API\u0647\u0627\u06cc \u0632\u06cc\u0631\u0628\u0646\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc RSC \u062a\u0648\u0633\u0637 \u0628\u0627\u0646\u062f\u0644\u0631\u0647\u0627 \u0648 \u0641\u0631\u06cc\u0645\u200c\u0648\u0631\u06a9\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f\u060c \u06a9\u0647 \u0646\u0634\u0627\u0646 \u0627\u0632 \u062a\u0639\u0647\u062f React \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0627\u0633\u062a.\n <\/li>\n<\/ul>\n

        \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u0648 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627 \u062f\u0631 \u06a9\u0627\u0631 \u0628\u0627 RSC<\/h2>\n

        \u0628\u0627 \u0648\u062c\u0648\u062f \u0645\u0632\u0627\u06cc\u0627\u06cc \u0641\u0631\u0627\u0648\u0627\u0646\u060c \u062f\u0631\u06a9 \u0635\u062d\u06cc\u062d \u0646\u062d\u0648\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0648 \u0645\u0631\u0632\u0647\u0627\u06cc \u0622\u0646 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a:<\/p>\n

          \n
        • \n \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 useState<\/code> \u06cc\u0627 useEffect<\/code> \u062f\u0631 Server Components:<\/strong><\/p>\n

          \u0645\u0634\u06a9\u0644:<\/strong> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 Hook\u0647\u0627\u06cc React \u0645\u0627\u0646\u0646\u062f useState<\/code>\u060c useEffect<\/code>\u060c useRef<\/code> \u0648 \u063a\u06cc\u0631\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0641\u0627\u0642\u062f \u0648\u0636\u0639\u06cc\u062a \u0648 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0627\u06cc\u062c\u200c\u062a\u0631\u06cc\u0646 \u062e\u0637\u0627\u0647\u0627 \u0627\u0633\u062a \u0648 \u0628\u0627\u0639\u062b \u0627\u0631\u0648\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

          \u0631\u0627\u0647\u200c\u062d\u0644:<\/strong> \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u0627\u0645\u0644 \u06cc\u0627 Hook \u062f\u0627\u0631\u0646\u062f \u0631\u0627 \u0628\u0627 \"use client\"<\/code> \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0647 \u0648 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Client Component \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0646\u06cc\u062f. \u0645\u0646\u0637\u0642 \u062a\u0639\u0627\u0645\u0644\u06cc \u0631\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0628\u0631\u06af (leaf components) \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n

        • \n \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 Server Component \u0628\u0647 Client Component:<\/strong><\/p>\n

          \u0645\u0634\u06a9\u0644:<\/strong> \u06cc\u06a9 Client Component \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u06cc\u06a9 Server Component \u0631\u0627 \u0648\u0627\u0631\u062f (import) \u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 Client Component \u062f\u0631 \u0628\u0627\u0646\u062f\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f \u0648 \u06a9\u062f \u0633\u0631\u0648\u0631 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0642\u0627\u0628\u0644 \u0627\u062c\u0631\u0627 \u0646\u06cc\u0633\u062a.<\/p>\n

          \u0631\u0627\u0647\u200c\u062d\u0644:<\/strong> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f Server Component \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 children<\/code> \u06cc\u0627 \u06cc\u06a9 prop (\u06a9\u0647 \u0628\u0627\u06cc\u062f \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0628\u0627\u0634\u062f) \u0628\u0647 Client Component \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 Client Component \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062f\u0627\u0646\u0633\u062a\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0622\u0646\u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n<\/li>\n

        • \n \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \"use client\"<\/code> \u062f\u0631 \u0645\u06a9\u0627\u0646 \u0646\u0627\u0645\u0646\u0627\u0633\u0628 (\u0628\u0627\u0644\u0627\u06cc \u062f\u0631\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a):<\/strong><\/p>\n

          \u0645\u0634\u06a9\u0644:<\/strong> \u0627\u06af\u0631 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u0631\u0627 \u0628\u0627 \"use client\"<\/code> \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f\u060c \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0646\u06cc\u0632 \u0628\u0647 Client Component \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u0647 \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0628\u0647 \u0628\u0627\u0646\u062f\u0644 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0647 \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc RSC \u0631\u0627 \u0646\u0642\u0636 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

          \u0631\u0627\u0647\u200c\u062d\u0644:<\/strong> \u062f\u0633\u062a\u0648\u0631 \"use client\"<\/code> \u0631\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646\u200c\u062a\u0631\u06cc\u0646 \u0646\u0642\u0627\u0637 \u062f\u0631\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0628\u062e\u0634\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0648\u0627\u0642\u0639\u0627\u064b \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0631\u0646\u062f\u060c \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u062d\u062f\u0627\u06a9\u062b\u0631 \u0628\u0647\u0631\u0647\u200c\u0648\u0631\u06cc \u0631\u0627 \u0627\u0632 RSC \u0628\u0628\u0631\u06cc\u062f.<\/p>\n<\/li>\n

        • \n \u0639\u062f\u0645 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0635\u062d\u06cc\u062d Props:<\/strong><\/p>\n

          \u0645\u0634\u06a9\u0644:<\/strong> \u0627\u0646\u062a\u0642\u0627\u0644 \u062a\u0648\u0627\u0628\u0639\u060c \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0633\u060c \u06cc\u0627 \u0627\u0634\u06cc\u0627\u0621 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u063a\u06cc\u0631\u0633\u0631\u06cc\u0627\u0644\u200c\u0634\u062f\u0646\u06cc \u0628\u0647 Client Components \u0628\u0627\u0639\u062b \u062e\u0637\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u06cc\u0646 \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0645\u0646\u062a\u0642\u0644 \u0634\u0648\u0646\u062f.<\/p>\n

          \u0631\u0627\u0647\u200c\u062d\u0644:<\/strong> \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 props \u0645\u0646\u062a\u0642\u0644 \u0634\u062f\u0647 \u0628\u06cc\u0646 Server \u0648 Client Components \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0647\u0633\u062a\u0646\u062f (\u0645\u0627\u0646\u0646\u062f \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u060c \u0627\u0639\u062f\u0627\u062f\u060c \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0627\u0634\u06cc\u0627\u0621 \u0633\u0627\u062f\u0647 JSON). \u0628\u0631\u0627\u06cc Callbacks \u06cc\u0627 \u0639\u0645\u0644\u06cc\u0627\u062a \u0633\u0645\u062a \u0633\u0631\u0648\u0631\u060c \u0627\u0632 Server Actions \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/li>\n

        • \n \u0645\u0633\u062f\u0648\u062f \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0631\u06cc\u0645\u06cc\u0646\u06af \u0628\u0627 await<\/code>\u0647\u0627\u06cc \u0633\u0637\u062d \u0628\u0627\u0644\u0627:<\/strong><\/p>\n

          \u0645\u0634\u06a9\u0644:<\/strong> \u0627\u06af\u0631 \u06cc\u06a9 Server Component \u0642\u0628\u0644 \u0627\u0632 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0647\u0631 JSX\u060c \u0645\u0646\u062a\u0638\u0631 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u062f (\u0645\u0627\u0646\u0646\u062f \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0637\u0648\u0644\u0627\u0646\u06cc) \u0628\u0627\u0634\u062f\u060c \u0633\u0631\u0648\u0631 \u0686\u06cc\u0632\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0646\u062f\u0627\u0631\u062f \u0648 \u0627\u0633\u062a\u0631\u06cc\u0645\u06cc\u0646\u06af \u0622\u063a\u0627\u0632 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0647 \u0628\u0627\u0639\u062b \u062a\u0623\u062e\u06cc\u0631 \u062f\u0631 \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

          \u0631\u0627\u0647\u200c\u062d\u0644:<\/strong> \u0627\u0632 Promise.all<\/code> \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u0648\u0627\u0632\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0633\u062a\u0642\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u06a9\u0646\u062f \u0631\u0627 \u0628\u0627 Suspense fallback<\/code> \u0628\u067e\u0648\u0634\u0627\u0646\u06cc\u062f \u062a\u0627 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 UI \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0631\u0646\u062f\u0631 \u0634\u0648\u0646\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0628\u062f.<\/p>\n<\/li>\n<\/ul>\n

          \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u0635\u062d\u06cc\u062d<\/h2>\n

          \u062f\u0631\u06a9 \u0639\u0645\u0644\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0628\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u0646\u062f \u0645\u062b\u0627\u0644 \u06a9\u0644\u06cc\u062f\u06cc \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n

          1. Server Component \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647<\/h3>\n

          \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0633\u0631\u0648\u0631 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0646 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u0648\u062f.<\/p>\n

          \/\/ app\/products\/page.tsx (\u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 Server Component \u0627\u0633\u062a)\nimport { getProducts } from '..\/..\/lib\/data'; \/\/ \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0628\u06a9\u200c\u0627\u0646\u062f \u06cc\u0627 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\n\ninterface Product {\n  id: string;\n  name: string;\n  price: number;\n}\n\nasync function ProductsPage() {\n  \/\/ \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062f\u0631 \u0633\u0631\u0648\u0631. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u062f\u06cc\u062a\u0627\u0628\u06cc\u0633 \u0628\u0627\u0634\u062f.\n  const products: Product[] = await getProducts(); \n\n  return (\n    <div>\n      <h1>\u0644\u06cc\u0633\u062a \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/h1>\n      <ul>\n        {products.map((product) => (\n          <li key={product.id}>{product.name} - ${product.price}<\/li>\n        ))}\n      <\/ul>\n      {\/* \u0627\u0631\u0633\u0627\u0644 prop \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0628\u0647 Client Component *\/}\n      <AddToCartButton productId={products[0]?.id || \"\"} \/> \n    <\/div>\n  );\n}\n\nexport default ProductsPage;\n<\/code><\/pre>\n
          \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c ProductsPage<\/code> \u06cc\u06a9 Server Component \u0627\u0633\u062a \u06a9\u0647 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 getProducts<\/code> (\u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627\u0634\u062f) \u0648\u0627\u06a9\u0634\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0647\u06cc\u0686 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0637\u0642 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
          2. Client Component \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644<\/h3>\n
          \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062f\u0631 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0627\u0632 Hook\u0647\u0627\u06cc React \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0648 \u062a\u0639\u0627\u0645\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
          \/\/ app\/products\/AddToCartButton.tsx\n'use client'; \/\/ \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 Client Component \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f\n\nimport { useState } from 'react';\n\ninterface AddToCartButtonProps {\n  productId: string;\n}\n\nfunction AddToCartButton({ productId }: AddToCartButtonProps) {\n  const [quantity, setQuantity] = useState(1);\n\n  const handleAddToCart = () => {\n    \/\/ \u0645\u0646\u0637\u0642 \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f (\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0634\u0627\u0645\u0644 Server Action \u0628\u0627\u0634\u062f)\n    console.log(`Adding ${quantity} of product ${productId} to cart`);\n    alert(`\u0645\u062d\u0635\u0648\u0644 ${productId} \u0628\u0647 \u062a\u0639\u062f\u0627\u062f ${quantity} \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u0634\u062f.`);\n  };\n\n  return (\n    <div style={{ marginTop: '20px' }}>\n      <label htmlFor=\"quantity\">\u062a\u0639\u062f\u0627\u062f:<\/label>\n      <input\n        id=\"quantity\"\n        type=\"number\"\n        value={quantity}\n        onChange={(e) => setQuantity(Number(e.target.value))}\n        min=\"1\"\n        style={{ marginLeft: '10px', marginRight: '10px', padding: '5px' }}\n      \/>\n      <button onClick={handleAddToCart} style={{ padding: '8px 15px', cursor: 'pointer' }}>\n        \u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default AddToCartButton;\n<\/code><\/pre>\n
          AddToCartButton<\/code> \u06cc\u06a9 Client Component \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 useState<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a \u0645\u062d\u0644\u06cc \u0648 onClick<\/code> \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0633\u062a\u0648\u0631 \"use client\"<\/code> \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n
          3. \u062a\u0631\u06a9\u06cc\u0628 Server Component \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 children<\/code> \u062f\u0631 Client Component<\/h3>\n
          \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 Client Component \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062e\u0648\u062f\u0634 \u0628\u0647 Server Component \u062a\u0628\u062f\u06cc\u0644 \u0634\u0648\u062f\u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n
          \/\/ app\/components\/InteractiveWrapper.tsx\n'use client';\n\nimport { useState } from 'react';\nimport React from 'react';\n\ninterface InteractiveWrapperProps {\n  children: React.ReactNode; \/\/ children \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9 Server Component \u0628\u0627\u0634\u062f\n}\n\nfunction InteractiveWrapper({ children }: InteractiveWrapperProps) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', marginTop: '20px' }}>\n      <button onClick={() => setIsOpen(!isOpen)} style={{ padding: '10px 15px', cursor: 'pointer', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '5px' }}>\n        {isOpen ? '\u0628\u0633\u062a\u0646' : '\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646'} \u0645\u062d\u062a\u0648\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc\n      <\/button>\n      {isOpen && <div style={{ marginTop: '15px' }}>{children}<\/div>} {\/* children \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f *\/}\n    <\/div>\n  );\n}\n\nexport default InteractiveWrapper;\n\n\/\/ app\/page.tsx (Server Component)\nimport InteractiveWrapper from '..\/components\/InteractiveWrapper';\n\n\/\/ \u062a\u0627\u0628\u0639 \u0641\u0631\u0636\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0627\u0632 \u0633\u0631\u0648\u0631\nasync function fetchStaticContent(): Promise<string> {\n  \/\/ \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0623\u062e\u06cc\u0631 \u062f\u0631 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\n  await new Promise(resolve => setTimeout(resolve, 500)); \n  return \"\u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u062a\u0646 \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647.\";\n}\n\nasync function HomePage() {\n  const staticContent = await fetchStaticContent(); \/\/ \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u062f\u0631 \u0633\u0631\u0648\u0631\n  return (\n    <div>\n      <h1>\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a<\/h1>\n      <InteractiveWrapper>\n        <p>{staticContent}<\/p> {\/* \u06cc\u06a9 Server Component \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 children *\/}\n        <h2>\u0627\u06cc\u0646 \u0645\u062d\u062a\u0648\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u0632 \u0633\u0631\u0648\u0631 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0628\u0627\u0646\u062f\u0644 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0646\u06cc\u0633\u062a.<\/h2>\n        <p>\u062d\u062a\u06cc \u0627\u06af\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627\u0634\u062f\u060c \u0627\u06cc\u0646 \u0628\u062e\u0634 \u0645\u062d\u062a\u0648\u0627 \u0641\u0642\u0637 \u06cc\u06a9 \u0628\u0627\u0631 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u0622\u06cc\u062f.<\/p>\n      <\/InteractiveWrapper>\n    <\/div>\n  );\n}\n\nexport default HomePage;\n<\/code><\/pre>\n
          \u062f\u0631 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u060c InteractiveWrapper<\/code> \u06cc\u06a9 Client Component \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 (\u06a9\u0647 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 <p><\/code> \u0648 <h2><\/code> \u0627\u0633\u062a) \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 children<\/code> \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u0628\u0647 Client Component \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0647\u0645\u0686\u0646\u0627\u0646 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0645\u06cc\u200c\u0622\u06cc\u062f \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0646 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0627\u0631\u0633\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
          \u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h2>\n
          \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u067e\u0627\u0631\u0627\u062f\u0627\u06cc\u0645 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 React \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627\u0644\u0627\u060c \u062d\u062c\u0645 \u0628\u0627\u0646\u062f\u0644 \u06a9\u0645 \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a\u0647 \u0628\u0633\u0627\u0632\u0646\u062f. \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 \u0639\u0645\u06cc\u0642 \u062f\u0631 Next.js App Router\u060c RSC\u0647\u0627 \u06cc\u06a9 \u0645\u062f\u0644 \u062a\u0648\u0633\u0639\u0647 \u0641\u0648\u0644\u200c\u0627\u0633\u062a\u06a9 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u0646\u0637\u0642 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0648 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0646\u0647 \u062a\u0646\u0647\u0627 \u0628\u0647 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648\u0628<\/strong> \u0648 \u06a9\u0627\u0647\u0634 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a<\/strong> \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0628\u0644\u06a9\u0647 \u0628\u0627 \u0641\u0631\u0627\u0647\u0645 \u0622\u0648\u0631\u062f\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc Full-stack UX<\/strong>\u060c \u062a\u062c\u0631\u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc\u200c\u0628\u062e\u0634\u062f.<\/p>\n
          \u0628\u0627 \u062f\u0631\u06a9 \u0635\u062d\u06cc\u062d \u0645\u0631\u0632\u0647\u0627\u06cc \u0628\u06cc\u0646 Server \u0648 Client Components\u060c \u067e\u06cc\u0631\u0648\u06cc \u0627\u0632 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647\u200c\u0647\u0627 \u0648 \u0627\u062c\u062a\u0646\u0627\u0628 \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0645\u0632\u0627\u06cc\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0645\u0639\u0645\u0627\u0631\u06cc \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u0628\u0647\u0631\u0647\u200c\u0645\u0646\u062f \u0634\u0648\u0646\u062f \u0648 \u0646\u0633\u0644 \u062c\u062f\u06cc\u062f\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0648\u0628 \u0633\u0631\u06cc\u0639\u060c \u06a9\u0627\u0631\u0622\u0645\u062f \u0648 \u0627\u0645\u0646 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f. \u0622\u06cc\u0646\u062f\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React<\/strong> \u0631\u0648\u0634\u0646\u200c\u062a\u0631 \u0648 \u067e\u0648\u06cc\u0627\u062a\u0631 \u0627\u0632 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0631\u0633\u062f.<\/p>\n
          \n
          \u0633\u0624\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\n
          \n\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u0631\u0648\u0631 React (RSC) \u062f\u0642\u06cc\u0642\u0627\u064b \u0686\u0647 \u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0627 Server-Side Rendering (SSR) \u062f\u0627\u0631\u0646\u062f\u061f<\/summary>\n
          \u062f\u0631 SSR \u0633\u0646\u062a\u06cc\u060c \u0633\u0631\u0648\u0631 HTML \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u062a\u0645\u0627\u0645 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc 'hydration' \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0645\u06cc\u200c\u0641\u0631\u0633\u062a\u062f. \u062f\u0631 \u0645\u0642\u0627\u0628\u0644\u060c RSC\u0647\u0627 \u0647\u0631\u06af\u0632 \u062f\u0631 \u06a9\u0644\u0627\u06cc\u0646\u062a 'hydrate' \u0646\u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0648 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0622\u0646\u200c\u0647\u0627 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0631\u0633\u0627\u0644 \u0646\u0645\u06cc\u200c\u06af\u0631\u062f\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u06a9\u0627\u0647\u0634 \u0686\u0634\u0645\u06af\u06cc\u0631 \u062d\u062c\u0645 \u0628\u0627\u0646\u062f\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0628\u0647\u0628\u0648\u062f \u0633\u0631\u0639\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u06a9\u0644\u0627\u06cc\u0646\u062a \u0641\u0642\u0637 \u062e\u0631\u0648\u062c\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0648 \u0647\u0631\u06af\u0648\u0646\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/details>\n
          \n\u0686\u06af\u0648\u0646\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0627 \u062f\u0631 Next.js App Router \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u0645\u061f<\/summary>\n
          \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u062f\u0631 App Router\u060c \u0628\u0627\u06cc\u062f \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u062f\u0633\u062a\u0648\u0631 <code>'use client';<\/code> \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0628\u0647 \u0628\u0627\u0646\u062f\u0644\u0631 \u0627\u0637\u0644\u0627\u0639 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0648 \u062a\u0645\u0627\u0645 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc\u200c\u0647\u0627\u06cc \u0622\u0646 \u0628\u0627\u06cc\u062f \u062f\u0631 \u0628\u0627\u0646\u062f\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u0648\u0646\u062f \u0648 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Hook\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc React \u0645\u0627\u0646\u0646\u062f <code>useState<\/code> \u0648 <code>useEffect<\/code> \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/details>\n
          \n\u0622\u06cc\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0645 \u06cc\u06a9 Server Component \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631\u0648\u0646 \u06cc\u06a9 Client Component \u0648\u0627\u0631\u062f \u06a9\u0646\u0645\u061f<\/summary>\n
          \u062e\u06cc\u0631\u060c \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 Server Component \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631\u0648\u0646 \u06cc\u06a9 Client Component \u0648\u0627\u0631\u062f (import) \u06a9\u0646\u06cc\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 Server Component \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 <code>children<\/code> \u06cc\u0627 \u06cc\u06a9 prop (\u06a9\u0647 \u0628\u0627\u06cc\u062f \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0628\u0627\u0634\u062f) \u0628\u0647 \u06cc\u06a9 Client Component \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 Client Component \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0633\u0631\u0648\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u062e\u0648\u062f\u0634 \u0628\u0647 Server Component \u062a\u0628\u062f\u06cc\u0644 \u0634\u0648\u062f\u060c \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u062f.<\/p>\n<\/details>\n
          \n\u0686\u0647 \u0646\u0648\u0639 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u06cc\u0646 Server Component \u0648 Client Component \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u062f\u061f<\/summary>\n
          \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u06cc\u0646 Server Component \u0648 Client Component \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u060c \u0628\u0627\u06cc\u062f \u0642\u0627\u0628\u0644 \u0633\u0631\u06cc\u0627\u0644\u200c\u0633\u0627\u0632\u06cc \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u0634\u0627\u0645\u0644 \u0627\u0646\u0648\u0627\u0639 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 (\u0645\u0627\u0646\u0646\u062f \u0631\u0634\u062a\u0647\u200c\u0647\u0627\u060c \u0627\u0639\u062f\u0627\u062f\u060c \u0628\u0648\u0644\u06cc\u0646\u200c\u0647\u0627)\u060c \u0622\u0631\u0627\u06cc\u0647\u200c\u0647\u0627 \u0648 \u0627\u0634\u06cc\u0627\u0621 \u0633\u0627\u062f\u0647 (\u0628\u062f\u0648\u0646 \u062a\u0648\u0627\u0628\u0639\u060c \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u06cc\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062f\u06cc\u06af\u0631) \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u0646\u062a\u0642\u0627\u0644 \u0645\u0646\u0637\u0642 \u06cc\u0627 Callbacks \u0627\u0632 \u0633\u0631\u0648\u0631 \u0628\u0647 \u06a9\u0644\u0627\u06cc\u0646\u062a\u060c \u0628\u0627\u06cc\u062f \u0627\u0632 Server Actions \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/details>\n
          \n\u0686\u0631\u0627 RSC\u0647\u0627 \u0628\u0647 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc SEO \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u061f<\/summary>\n
          RSC\u0647\u0627 \u0628\u0647 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc SEO \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0632\u06cc\u0631\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc HTML \u0627\u0632 \u0647\u0645\u0627\u0646 \u0627\u0628\u062a\u062f\u0627 \u062f\u0631 \u0633\u0631\u0648\u0631 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u0634\u0648\u062f \u0648 \u0628\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f. \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u062e\u0632\u0646\u062f\u0647\u200c\u0647\u0627\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 (\u0645\u0627\u0646\u0646\u062f Googlebot) \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u067e\u0633 \u0627\u0632 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062f\u0631\u06cc\u0627\u0641\u062a \u0648 \u0627\u06cc\u0646\u062f\u06a9\u0633 \u06a9\u0646\u0646\u062f\u060c \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0627\u06cc\u0646 \u0627\u0645\u0631 \u0628\u0647 \u0628\u0647\u0628\u0648\u062f \u062f\u06cc\u062f \u0648 \u0631\u062a\u0628\u0647\u200c\u0628\u0646\u062f\u06cc \u0633\u0627\u06cc\u062a \u062f\u0631 \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u06a9\u0645\u06a9 \u0634\u0627\u06cc\u0627\u0646\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<\/details>\n<\/section>\n
          \n
          \u0645\u0646\u0627\u0628\u0639 \u0648 \u0645\u0637\u0627\u0644\u0639\u0647 \u0628\u06cc\u0634\u062a\u0631<\/h2>\n