{"id":74548,"date":"2024-08-24T06:00:42","date_gmt":"2024-08-24T02:30:42","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/"},"modified":"2024-08-24T06:00:42","modified_gmt":"2024-08-24T02:30:42","slug":"build-reactive-web-components-with-ssr-3pb9","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634 \u067e\u0630\u06cc\u0631 \u0628\u0627 SSR"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            \u0631\u0648\u0634 \u0633\u0646\u062a\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0686\u0646\u062f\u0627\u0646 \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 SSR (\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631) \u0646\u06cc\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 SSR \u0648 \u0628\u0627 \u0647\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (Vue\u060c React\u060c Svelte\u060c Solid\u060c Brisa) \u06cc\u0627 Vanilla JS \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>  \u0645\u0642\u062f\u0645\u0647<\/p>\n<p>\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0627\u0632 Brisa Web Component Compiler \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645. Brisa \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0634\u0627\u0628\u0647 \u0628\u0648\u062f\u0646 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9\u200c\u0647\u0627 \u0645\u0627\u0646\u0646\u062f Next.js \u06cc\u0627 Nuxt.js\u060c \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc\u060c \u0628\u0627 JSX \u0648 \u0628\u0627 SSR \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0622\u0631\u0645 \u0646\u0633\u06cc\u0645<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0633\u06cc\u0646\u062a\u06a9\u0633 Brisa \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 Web Components \u0628\u062f\u0627\u0646\u06cc\u062f. Brisa \u0647\u0646\u0648\u0632 \u0639\u0645\u0648\u0645\u06cc \u0646\u06cc\u0633\u062a \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a 95.48\u066a \u0627\u0632 \u0646\u0642\u0634\u0647 \u0645\u0633\u06cc\u0631 v0.1\u060c \u0627\u0645\u0627 \u062a\u062e\u0645\u06cc\u0646 \u0645\u06cc \u0632\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0627 1 \u0645\u0627\u0647 \u062f\u06cc\u06af\u0631 \u0622\u0645\u0627\u062f\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0648 \u0647\u0645\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062d\u062a\u06cc \u0627\u06af\u0631 \u0627\u0635\u0644\u0627\u064b \u0639\u0645\u0648\u0645\u06cc \u0646\u0628\u0627\u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc Web Components \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>  \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0628\u0627 Brisa<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 Web Component \u0627\u0632 \u06cc\u06a9 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645\u060c \u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647\u060c \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9.<\/p>\n<p>counter-wc.tsx<\/p>\n<p>import type { WebContext } from &#8220;brisa&#8221;;<\/p>\n<p>export default function CounterWC(<br \/>\n  { start = 0, color = &#8220;#2cebcf&#8221; }: { start?: number; color?: string },<br \/>\n  { state, css }: WebContext,<br \/>\n) {<br \/>\n  const count = state(start);<\/p>\n<p>  css`<br \/>\n    button {<br \/>\n      background-color: ${color};<br \/>\n      color: white;<br \/>\n      border: none;<br \/>\n      border-radius: 5px;<br \/>\n      padding: 10px;<br \/>\n      margin: 5px;<br \/>\n      cursor: pointer;<br \/>\n    }<br \/>\n    div {<br \/>\n      display: flex;<br \/>\n      justify-content: center;<br \/>\n      align-items: center;<br \/>\n    }<br \/>\n  `;<\/p>\n<p>  return (<br \/>\n    div&gt;<br \/>\n      button onClick={() =&gt; count.value++}&gt;+button&gt;<br \/>\n      {count.value}<br \/>\n      button onClick={() =&gt; count.value&#8211;}&gt;-button&gt;<br \/>\n    div&gt;<br \/>\n  );<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>Brisa \u0627\u0632 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u062e\u062a \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f counter-wc.<\/p>\n<p>\u0646\u06a9\u062a\u0647: \u0627\u06af\u0631\u0686\u0647 Brisa \u0647\u0646\u0648\u0632 \u0639\u0645\u0648\u0645\u06cc \u0646\u06cc\u0633\u062a\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 TypeScript \u0628\u0631\u0627\u06cc \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627\u060c state \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u06cc\u06af\u0646\u0627\u0644 \u0648 \u0633\u067e\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 .value \u0634\u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 JSX \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u062f. \u067e\u0627\u06cc\u0647 \u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0633\u06cc\u06af\u0646\u0627\u0644 \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0622\u0646\u0647\u0627 \u0641\u0642\u0637 \u062e\u0648\u0627\u0646\u062f\u0646\u06cc \u0647\u0633\u062a\u0646\u062f .value \u0628\u0631\u0627\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0633\u0627\u062e\u062a \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0634\u0628\u06cc\u0647 \u0628\u0647 React \u062a\u0627 \u0637\u0648\u0631\u06cc \u0639\u0645\u0644 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0627\u0646\u06af\u0627\u0631 \u0627\u0632 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0627\u0645\u0627 \u0628\u0631\u0639\u06a9\u0633.<\/p>\n<p>\u0627\u06cc\u0646 css template literal \u0628\u0647 \u0622\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0648\u0627\u06a9\u0646\u0634\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0632 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f color \u062f\u0627\u0631\u0627\u06cc\u06cc \u0627\u06cc\u0646 css \u0627\u0644\u06af\u0648\u06cc \u0648\u0627\u0642\u0639\u06cc \u062e\u0627\u0631\u062c \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 Web Component \u0647\u0627 \u0628\u0627 Shadow DOM \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 CSS \u0628\u0631 \u0628\u0642\u06cc\u0647 \u0635\u0641\u062d\u0647 \u062a\u0623\u062b\u06cc\u0631 \u0646\u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n<p>  \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a Web Component \u0628\u0627\u06cc\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>brisa build -w counter-wc.tsx<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 2 \u0641\u0627\u06cc\u0644 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n[ wait ]  \ud83d\ude80 building your standalone components&#8230;<br \/>\n[ info ]\n[ info ]   Standalone components:<br \/>\n[ info ]   &#8211; build\/counter-wc.client.js (670.00 B)<br \/>\n[ info ]   &#8211; build\/counter-wc.server.js (842.00 B)<br \/>\n[ info ]\n[ info ]   \u2728  Done in 42.20ms.<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u062c\u0632\u0621 Web \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0641\u0642\u0637 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0646\u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0633\u0627\u062e\u062a \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0633\u0628\u06a9 \u0628\u0627\u0634\u0646\u062f. (\u0628\u0627\u06cc\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u06cc\u0631\u0648\u0646 \u0645\u06cc \u0622\u06cc\u0646\u062f \u0628\u062f\u0648\u0646 gzip \u0647\u0633\u062a\u0646\u062f).<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645\u061f<\/p>\n<p>  \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vanilla JS<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u06cc\u062f importmap \u0631\u0627 \u062f\u0631 HTML \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f brisa\/client \u0648 \u0633\u067e\u0633 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f counter-wc.client.js \u0641\u0627\u06cc\u0644:<\/p>\n<p> lang=&#8221;en&#8221;&gt;<\/p>\n<p>     charset=&#8221;UTF-8&#8243; \/&gt;<br \/>\n     name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243; \/&gt;<br \/>\n    Brisa Web Component Example<br \/>\n    type=]]>&#8221;importmap&#8221;&gt;<br \/>\n      {<br \/>\n        &#8220;imports&#8221;: {<br \/>\n          &#8220;brisa\/client&#8221;: &#8220;https:\/\/unpkg.com\/brisa@latest\/client-simplified\/index.js&#8221;<br \/>\n        }<br \/>\n      }<\/p>\n<p>    type=]]>&#8221;module&#8221; src=&#8221;https:\/\/unpkg.com\/counter-wc@latest&#8221;&gt;<\/p>\n<p>     start=&#8221;15&#8243;&gt;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0641\u0642\u0637 \u0628\u062e\u0634 \u0631\u0646\u062f\u0631 \u062f\u0631 \u0647\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u067e\u0648\u0631\u062a \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0645\u06af\u06cc \u0627\u0632 \u0647\u0645\u0627\u0646 \u0628\u0631\u06cc\u0633\u0627 wrapper \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647 \u062f\u0631 importmap \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u06a9\u0647 \u0645\u0633\u0626\u0648\u0644 \u0627\u06cc\u062c\u0627\u062f Web Component \u0628\u0627 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627 \u0648 \u0633\u0627\u06cc\u0647 DOM \u0627\u0633\u062a.<\/p>\n<p>  SSR \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/p>\n<p>SSR \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0644\u0637\u0641 Shadow DOM \u0627\u0639\u0644\u0627\u0645\u06cc \u0642\u0627\u0628\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a. \u0627\u06cc\u0646 counter-wc.server.js \u0641\u0627\u06cc\u0644 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0634\u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 HTML \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0628\u0627 Bun.js \u06cc\u0627 Node.js \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JSX \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p>ssr.js<\/p>\n<p>import { renderToString } from &#8220;brisa\/server&#8221;;<br \/>\nimport { jsx } from &#8220;brisa\/jsx-runtime&#8221;;<br \/>\nimport CustomCounter from &#8220;counter-wc\/server&#8221;;<\/p>\n<p>const html = `<\/p>\n<p>    Brisa Web Component Example<\/p>\n<p>        ${await renderToString(jsx(CustomCounter, { start: 10 }))}<\/p>\n<p>`;<\/p>\n<p>console.log(html);<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0633\u067e\u0633 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f bun run ssr.js \u0648 HTML \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Declarative Shadow DOM \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n<p>  \u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0631\u06cc\u0633\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u0628\u062f\u0647&#8230; \u0644\u0637\u0641\u0627&#8230;<\/p>\n<p>\u0627\u062f\u063a\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648\u0628 \u0628\u0627 Brisa \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<p>import type { WebComponentIntegrations } from &#8220;brisa&#8221;;<\/p>\n<p>export default {<br \/>\n  &#8220;custom-counter&#8221;: {<br \/>\n    client: &#8220;.\/path\/to\/web-component.client.js&#8221;,<br \/>\n    server: &#8220;.\/path\/to\/web-component.server.js&#8221;,<br \/>\n    types: &#8220;.\/path\/to\/web-component.types.d.ts&#8221;,<br \/>\n  },<br \/>\n} satisfies WebComponentIntegrations;<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u0627\u0646\u0648\u0627\u0639 SSR \u0648 TypeScript \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Web Component \u062f\u0631 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u06cc\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f \u0628\u0647 \u062f\u0627\u0646\u0633\u062a\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0647\u0633\u062a\u06cc\u062f\u060c \u0627\u0632 \u0634\u0645\u0627 \u062f\u0639\u0648\u062a \u0645\u06cc \u06a9\u0646\u0645 \u0628\u0627 \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0631\u06cc\u0633\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0627\u062e\u0628\u0627\u0631 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0628\u0631\u06cc\u0633\u0627 \u0631\u0627 \u200b\u200b\u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f. \u0645\u0627 \u062a\u062e\u0645\u06cc\u0646 \u0645\u06cc \u0632\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646 \u0633\u067e\u062a\u0627\u0645\u0628\u0631 \u0622\u0645\u0627\u062f\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<p>  \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u06af\u0627\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/p>\n<p>\u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 Brisa \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc Web Component \u062e\u0648\u062f \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0646\u0634\u0627\u0646 \u00ab\u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0628\u0631\u06cc\u0633\u0627\u00bb \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f\u060c \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0631\u06cc\u0633\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p>  \u0645\u062b\u0627\u0644<\/p>\n<p>\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u062e\u0632\u0646 GitHub \u0646\u0645\u0648\u0646\u0647 \u0634\u0645\u0627\u0631\u0646\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f \u0648 \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0631\u062c\u0639\u06cc \u0628\u0631\u0627\u06cc \u062e\u0644\u0627\u0642\u06cc\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0631\u0627 \u062f\u06cc\u062f\u06cc\u0645 \u06a9\u0647 \u0628\u0627 SSR \u0648 \u0628\u0627 \u0647\u0631 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u0627 Vanilla JS \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0645\u0627 \u0627\u0632 Brisa \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 Web Component \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vanilla JS \u0648 \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 SSR \u0628\u0627 \u0622\u0646 \u0631\u0627 \u062f\u06cc\u062f\u0647\u200c\u0627\u06cc\u0645.<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0644\u0630\u062a \u0628\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0686\u06cc\u0632 \u062c\u062f\u06cc\u062f\u06cc \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06af\u0631 \u0633\u0648\u0627\u0644\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0632\u06cc\u0631 \u0627\u0632 \u0645\u0646 \u0628\u067e\u0631\u0633\u06cc\u062f. \u0645\u0646 \u062e\u0648\u0634\u062d\u0627\u0644 \u062e\u0648\u0627\u0647\u0645 \u0634\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u0645.<\/p>\n<p>\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9 \u0648 \u0627\u0632 \u0628\u0642\u06cc\u0647 \u062a\u0627\u0628\u0633\u062a\u0627\u0646 \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f! \ud83c\udf1e\ud83c\udf34<\/p>\n<p>\u0627\u0632 \u0628\u0642\u06cc\u0647 \u062a\u0627\u0628\u0633\u062a\u0627\u0646 \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f!<\/p>\n<div data-article-id=\"1971340\" id=\"article-body\">\n<p>\u0631\u0648\u0634 \u0633\u0646\u062a\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0686\u0646\u062f\u0627\u0646 \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 SSR (\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631) \u0646\u06cc\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 SSR \u0648 \u0628\u0627 \u0647\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (Vue\u060c React\u060c Svelte\u060c Solid\u060c Brisa) \u06cc\u0627 Vanilla JS \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D9%86%D9%88%D8%B4%D8%AA%D9%86_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8_%D8%A8%D8%A7_Brisa\" >\u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0628\u0627 Brisa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D8%B3%D8%A7%D8%AE%D8%AA_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\" >\u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D8%A8%D8%A7%D8%B1%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Vanilla_JS\" >\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vanilla JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#SSR_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\" >SSR \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D8%AF%D8%B1_%D9%85%D9%88%D8%B1%D8%AF_%D8%A8%D8%B1%DB%8C%D8%B3%D8%A7_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%A8%D8%AF%D9%87_%D9%84%D8%B7%D9%81%D8%A7\" >\u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0631\u06cc\u0633\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u0628\u062f\u0647... \u0644\u0637\u0641\u0627...<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\" >\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u06af\u0627\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D9%85%D8%AB%D8%A7%D9%84\" >\u0645\u062b\u0627\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/build-reactive-web-components-with-ssr-3pb9\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0642\u0635\u062f \u062f\u0627\u0631\u06cc\u0645 \u0627\u0632 Brisa Web Component Compiler \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645. Brisa \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0648\u0628 \u0627\u0633\u062a \u06a9\u0647 \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0634\u0627\u0628\u0647 \u0628\u0648\u062f\u0646 \u0628\u0627 \u0633\u0627\u06cc\u0631 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9\u200c\u0647\u0627 \u0645\u0627\u0646\u0646\u062f Next.js \u06cc\u0627 Nuxt.js\u060c \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u062a\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u200c\u067e\u0630\u06cc\u0631\u06cc\u060c \u0628\u0627 JSX \u0648 \u0628\u0627 SSR \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p><\/p>\n<figure><figcaption><small>\u0622\u0631\u0645 \u0646\u0633\u06cc\u0645<\/small><\/figcaption><\/figure>\n<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0633\u06cc\u0646\u062a\u06a9\u0633 Brisa \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u0646\u0648\u0634\u062a\u0646 Web Components \u0628\u062f\u0627\u0646\u06cc\u062f. Brisa \u0647\u0646\u0648\u0632 \u0639\u0645\u0648\u0645\u06cc \u0646\u06cc\u0633\u062a \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631 \u0627\u0633\u062a <strong>95.48\u066a \u0627\u0632 \u0646\u0642\u0634\u0647 \u0645\u0633\u06cc\u0631 v0.1<\/strong>\u060c \u0627\u0645\u0627 \u062a\u062e\u0645\u06cc\u0646 \u0645\u06cc \u0632\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0627 1 \u0645\u0627\u0647 \u062f\u06cc\u06af\u0631 \u0622\u0645\u0627\u062f\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f \u0648 \u0647\u0645\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062d\u062a\u06cc \u0627\u06af\u0631 \u0627\u0635\u0644\u0627\u064b \u0639\u0645\u0648\u0645\u06cc \u0646\u0628\u0627\u0634\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u200c\u0647\u0627\u06cc Web Components \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D9%88%D8%B4%D8%AA%D9%86_%DB%8C%DA%A9_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8_%D8%A8%D8%A7_Brisa\"><\/span>\n<p>  \u0646\u0648\u0634\u062a\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0628\u0627 Brisa<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06cc\u06a9 Web Component \u0627\u0632 \u06cc\u06a9 \u0634\u0645\u0627\u0631\u0646\u062f\u0647 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645\u060c \u0645\u062b\u0644 \u0647\u0645\u06cc\u0634\u0647\u060c \u0645\u062b\u0627\u0644 \u06a9\u0644\u0627\u0633\u06cc\u06a9.<\/p>\n<p><strong>counter-wc.tsx<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"kd\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">WebContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">brisa<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">CounterWC<\/span><span class=\"p\">(<\/span>\n  <span class=\"p\">{<\/span> <span class=\"nx\">start<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">color<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">#2cebcf<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">start<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span> <span class=\"nl\">color<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">{<\/span> <span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">css<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">WebContext<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">count<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">state<\/span><span class=\"p\">(<\/span><span class=\"nx\">start<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nx\">css<\/span><span class=\"s2\">`\n    button {\n      background-color: <\/span><span class=\"p\">${<\/span><span class=\"nx\">color<\/span><span class=\"p\">}<\/span><span class=\"s2\">;\n      color: white;\n      border: none;\n      border-radius: 5px;\n      padding: 10px;\n      margin: 5px;\n      cursor: pointer;\n    }\n    div {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  `<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\"><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"o\">++<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>+<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"si\">}<\/span>\n      <span class=\"p\"><span class=\"nt\">button<\/span> <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">count<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"o\">--<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>-<span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n<\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Brisa \u0627\u0632 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u062e\u062a \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f <code>counter-wc<\/code>.<\/p>\n<blockquote>\n<p><strong>\u0646\u06a9\u062a\u0647<\/strong>: \u0627\u06af\u0631\u0686\u0647 Brisa \u0647\u0646\u0648\u0632 \u0639\u0645\u0648\u0645\u06cc \u0646\u06cc\u0633\u062a\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u0646\u0648\u0627\u0639 TypeScript \u0628\u0631\u0627\u06cc \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/blockquote>\n<p>\u062f\u0631 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627\u060c <code>state<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u06cc\u06af\u0646\u0627\u0644 \u0648 \u0633\u067e\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>.value<\/code> \u0634\u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 JSX \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u06cc\u062f. \u067e\u0627\u06cc\u0647 \u0647\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0633\u06cc\u06af\u0646\u0627\u0644 \u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0647\u0633\u062a\u0646\u062f\u060c \u0632\u06cc\u0631\u0627 \u0622\u0646\u0647\u0627 \u0641\u0642\u0637 \u062e\u0648\u0627\u0646\u062f\u0646\u06cc \u0647\u0633\u062a\u0646\u062f <code>.value<\/code> \u0628\u0631\u0627\u06cc \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0622\u0633\u0627\u0646\u200c\u062a\u0631 \u0645\u0642\u0627\u062f\u06cc\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc\u200c\u0647\u0627\u06cc \u0632\u0645\u0627\u0646 \u0633\u0627\u062e\u062a \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0634\u0628\u06cc\u0647 \u0628\u0647 React \u062a\u0627 \u0637\u0648\u0631\u06cc \u0639\u0645\u0644 \u06a9\u0646\u0646\u062f \u06a9\u0647 \u0627\u0646\u06af\u0627\u0631 \u0627\u0632 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0627\u0645\u0627 \u0628\u0631\u0639\u06a9\u0633.<\/p>\n<p>\u0627\u06cc\u0646 <code>css<\/code> template literal \u0628\u0647 \u0622\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0648\u0627\u06a9\u0646\u0634\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u0627\u0632 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u062f <code>color<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u0627\u06cc\u0646 <code>css<\/code> \u0627\u0644\u06af\u0648\u06cc \u0648\u0627\u0642\u0639\u06cc \u062e\u0627\u0631\u062c \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0627\u0633\u062a. \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 Web Component \u0647\u0627 \u0628\u0627 Shadow DOM \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 CSS \u0628\u0631 \u0628\u0642\u06cc\u0647 \u0635\u0641\u062d\u0647 \u062a\u0623\u062b\u06cc\u0631 \u0646\u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a Web Component \u0628\u0627\u06cc\u062f \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>brisa build <span class=\"nt\">-w<\/span> counter-wc.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 2 \u0641\u0627\u06cc\u0644 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"o\">[<\/span> <span class=\"nb\">wait<\/span> <span class=\"o\">]<\/span>  \ud83d\ude80 building your standalone components...\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>   Standalone components:\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>   - build\/counter-wc.client.js <span class=\"o\">(<\/span>670.00 B<span class=\"o\">)<\/span>\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>   - build\/counter-wc.server.js <span class=\"o\">(<\/span>842.00 B<span class=\"o\">)<\/span>\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>\n<span class=\"o\">[<\/span> info <span class=\"o\">]<\/span>   \u2728  Done <span class=\"k\">in <\/span>42.20ms.\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u062c\u0632\u0621 Web \u0646\u06cc\u0633\u062a\u0646\u062f\u060c \u0641\u0642\u0637 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0646\u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0633\u0627\u062e\u062a \u0628\u0647\u06cc\u0646\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u062a\u0627 \u062d\u062f \u0627\u0645\u06a9\u0627\u0646 \u0633\u0628\u06a9 \u0628\u0627\u0634\u0646\u062f. <em>(\u0628\u0627\u06cc\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u06cc\u0631\u0648\u0646 \u0645\u06cc \u0622\u06cc\u0646\u062f \u0628\u062f\u0648\u0646 gzip \u0647\u0633\u062a\u0646\u062f)<\/em>.<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u0645\u061f<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%A7%D8%B1%DA%AF%DB%8C%D8%B1%DB%8C_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8_%D8%AF%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Vanilla_JS\"><\/span>\n<p>  \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vanilla JS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627\u06cc\u062f importmap \u0631\u0627 \u062f\u0631 HTML \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>brisa\/client<\/code> \u0648 \u0633\u067e\u0633 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>counter-wc.client.js<\/code> \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"UTF-8\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span> <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><title\/><\/span>Brisa Web Component Example<span class=\"nt\"\/>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">type=]]><\/script><\/span><span class=\"s\">\"importmap\"<\/span><span class=\"nt\">&gt;<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">imports<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n          <span class=\"dl\">\"<\/span><span class=\"s2\">brisa\/client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/unpkg.com\/brisa@latest\/client-simplified\/index.js<\/span><span class=\"dl\">\"<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"nt\"\/>\n    <span class=\"nt\"><script><![CDATA[<span class=\"na\">type=]]><\/script><\/span><span class=\"s\">\"module\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/counter-wc@latest\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>\n  <span class=\"nt\"\/>\n    <span class=\"nt\"><counter-wc> <span class=\"na\">start=<\/span><span class=\"s\">\"15\"<\/span><span class=\"nt\">&gt;<\/span><\/counter-wc><\/span>\n  <span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0641\u0642\u0637 \u0628\u062e\u0634 \u0631\u0646\u062f\u0631 \u062f\u0631 \u0647\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u067e\u0648\u0631\u062a \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0647\u0645\u06af\u06cc \u0627\u0632 \u0647\u0645\u0627\u0646 \u0628\u0631\u06cc\u0633\u0627 wrapper \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647 \u062f\u0631 importmap \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f\u060c \u06a9\u0647 \u0645\u0633\u0626\u0648\u0644 \u0627\u06cc\u062c\u0627\u062f Web Component \u0628\u0627 \u0633\u06cc\u06af\u0646\u0627\u0644\u200c\u0647\u0627 \u0648 \u0633\u0627\u06cc\u0647 DOM \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"SSR_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\"><\/span>\n<p>  SSR \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>SSR \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0644\u0637\u0641 Shadow DOM \u0627\u0639\u0644\u0627\u0645\u06cc \u0642\u0627\u0628\u0644 \u0627\u0646\u062c\u0627\u0645 \u0627\u0633\u062a. \u0627\u06cc\u0646 <code>counter-wc.server.js<\/code> \u0641\u0627\u06cc\u0644 \u0642\u0628\u0644\u0627\u064b \u0628\u0627 \u0627\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0634\u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0631 HTML \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u062a\u0637\u0628\u06cc\u0642 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0628\u0627 Bun.js \u06cc\u0627 Node.js \u0628\u062f\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 JSX \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<p><strong>ssr.js<\/strong><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">renderToString<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">brisa\/server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">jsx<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">brisa\/jsx-runtime<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">CustomCounter<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">counter-wc\/server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">html<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`\n\n\n    \n    <meta charset=\"UTF-8\"\/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n    <title>Brisa Web Component Example<\/title>\n    <script type=\"importmap\"><![CDATA[\n    {\n        \"imports\": {\n            \"brisa\/client\": \"https:\/\/unpkg.com\/brisa@latest\/client-simplified\/index.js\"\n        }\n    }\n    ]]><\/script>\n    <script type=\"module\" src=\"https:\/\/unpkg.com\/counter-wc@latest\"\/>\n    \n    \n        <\/span><span class=\"p\">${<\/span><span class=\"k\">await<\/span> <span class=\"nf\">renderToString<\/span><span class=\"p\">(<\/span><span class=\"nf\">jsx<\/span><span class=\"p\">(<\/span><span class=\"nx\">CustomCounter<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">start<\/span><span class=\"p\">:<\/span> <span class=\"mi\">10<\/span> <span class=\"p\">}))}<\/span><span class=\"s2\">\n    \n\n`<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">html<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>bun run ssr.js<\/code> \u0648 HTML \u0631\u0627 \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Declarative Shadow DOM \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1_%D9%85%D9%88%D8%B1%D8%AF_%D8%A8%D8%B1%DB%8C%D8%B3%D8%A7_%D8%A8%DB%8C%D8%B4%D8%AA%D8%B1_%D8%AA%D9%88%D8%B6%DB%8C%D8%AD_%D8%A8%D8%AF%D9%87_%D9%84%D8%B7%D9%81%D8%A7\"><\/span>\n<p>  \u062f\u0631 \u0645\u0648\u0631\u062f \u0628\u0631\u06cc\u0633\u0627 \u0628\u06cc\u0634\u062a\u0631 \u062a\u0648\u0636\u06cc\u062d \u0628\u062f\u0647... \u0644\u0637\u0641\u0627...<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u062f\u063a\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648\u0628 \u0628\u0627 Brisa \u0627\u0632 \u0637\u0631\u06cc\u0642 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"kd\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">WebComponentIntegrations<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">brisa<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"p\">{<\/span>\n  <span class=\"dl\">\"<\/span><span class=\"s2\">custom-counter<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">client<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/path\/to\/web-component.client.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">server<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/path\/to\/web-component.server.js<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">types<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/path\/to\/web-component.types.d.ts<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">},<\/span>\n<span class=\"p\">}<\/span> <span class=\"nx\">satisfies<\/span> <span class=\"nx\">WebComponentIntegrations<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0647 \u0627\u06cc\u0646 \u062a\u0631\u062a\u06cc\u0628\u060c \u0627\u0646\u0648\u0627\u0639 SSR \u0648 TypeScript \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 Web Component \u062f\u0631 \u0647\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0633\u0631\u0648\u0631 \u06cc\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628 \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--jDvmfFxA--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800\/https:\/\/aralroca.com\/images\/blog-images\/types.gif\" alt=\"\u0627\u0646\u0648\u0627\u0639 \u062a\u0627\u06cc\u067e \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\" loading=\"lazy\" width=\"600\" height=\"106\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0627\u06af\u0631 \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f \u0628\u0647 \u062f\u0627\u0646\u0633\u062a\u0646 \u0628\u06cc\u0634\u062a\u0631 \u0647\u0633\u062a\u06cc\u062f\u060c \u0627\u0632 \u0634\u0645\u0627 \u062f\u0639\u0648\u062a \u0645\u06cc \u06a9\u0646\u0645 \u0628\u0627 \u0639\u0636\u0648\u06cc\u062a \u062f\u0631 \u062e\u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0631\u06cc\u0633\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0627\u062e\u0628\u0627\u0631 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0647\u0627\u06cc \u0628\u0631\u06cc\u0633\u0627 \u0631\u0627 \u200b\u200b\u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f. \u0645\u0627 \u062a\u062e\u0645\u06cc\u0646 \u0645\u06cc \u0632\u0646\u06cc\u0645 \u06a9\u0647 \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646 \u0633\u067e\u062a\u0627\u0645\u0628\u0631 \u0622\u0645\u0627\u062f\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062e\u0648\u0627\u0647\u062f \u0634\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DB%8C%D8%A7%D8%AF%D8%AF%D8%A7%D8%B4%D8%AA_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%B2%D9%86%D8%AF%DA%AF%D8%A7%D9%86_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%88%D8%A8\"><\/span>\n<p>  \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u06af\u0627\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0627 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0634\u0648\u06cc\u0642 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 Brisa \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc Web Component \u062e\u0648\u062f \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u0646\u0634\u0627\u0646 \u00ab\u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0628\u0631\u06cc\u0633\u0627\u00bb \u0631\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f\u060c \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0631\u06cc\u0633\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--Bh5Kn3CZ--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/aralroca.com\/images\/blog-images\/brisa_badge.svg\" alt=\"\u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 \u0628\u0631\u06cc\u0633\u0627\" loading=\"lazy\" width=\"200\" height=\"56\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%AB%D8%A7%D9%84\"><\/span>\n<p>  \u0645\u062b\u0627\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u062e\u0632\u0646 GitHub \u0646\u0645\u0648\u0646\u0647 \u0634\u0645\u0627\u0631\u0646\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645 \u0628\u0628\u06cc\u0646\u06cc\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f \u0648 \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u0631\u062c\u0639\u06cc \u0628\u0631\u0627\u06cc \u062e\u0644\u0627\u0642\u06cc\u062a\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0631\u0627 \u062f\u06cc\u062f\u06cc\u0645 \u06a9\u0647 \u0628\u0627 SSR \u0648 \u0628\u0627 \u0647\u0631 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06cc\u0627 Vanilla JS \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0645\u0627 \u0627\u0632 Brisa \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 Web Component \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u0646\u062d\u0648\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Vanilla JS \u0648 \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 SSR \u0628\u0627 \u0622\u0646 \u0631\u0627 \u062f\u06cc\u062f\u0647\u200c\u0627\u06cc\u0645.<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0644\u0630\u062a \u0628\u0631\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f \u0648 \u0686\u06cc\u0632 \u062c\u062f\u06cc\u062f\u06cc \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f. \u0627\u06af\u0631 \u0633\u0648\u0627\u0644\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0632\u06cc\u0631 \u0627\u0632 \u0645\u0646 \u0628\u067e\u0631\u0633\u06cc\u062f. \u0645\u0646 \u062e\u0648\u0634\u062d\u0627\u0644 \u062e\u0648\u0627\u0647\u0645 \u0634\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u06a9\u0646\u0645.<\/p>\n<p>\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9 \u0648 \u0627\u0632 \u0628\u0642\u06cc\u0647 \u062a\u0627\u0628\u0633\u062a\u0627\u0646 \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f! \ud83c\udf1e\ud83c\udf34<\/p>\n<figure>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--LAXJ2eOM--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/aralroca.com\/images\/blog-images\/brisabeach.png\" alt=\"\u062a\u0627\u0628\u0633\u062a\u0627\u0646\" loading=\"lazy\" width=\"800\" height=\"659\" title=\"\"><\/p><figcaption><small>\u0627\u0632 \u0628\u0642\u06cc\u0647 \u062a\u0627\u0628\u0633\u062a\u0627\u0646 \u0644\u0630\u062a \u0628\u0628\u0631\u06cc\u062f!<\/small><\/figcaption><\/figure>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0631\u0648\u0634 \u0633\u0646\u062a\u06cc \u0646\u0648\u0634\u062a\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0648\u0628 \u0686\u0646\u062f\u0627\u0646 \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 SSR (\u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631) \u0646\u06cc\u0633\u062a. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a\u060c \u0645\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0632\u0627\u06cc \u0648\u0628 \u0648\u0627\u06a9\u0646\u0634\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0628\u0627 SSR \u0648 \u0628\u0627 \u0647\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a (Vue\u060c React\u060c Svelte\u060c Solid\u060c Brisa) \u06cc\u0627 Vanilla &hellip;<\/p>\n","protected":false},"author":2,"featured_media":74549,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-74548","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/74548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=74548"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/74548\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/74549"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=74548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=74548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=74548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}