{"id":348761,"date":"2023-06-14T09:01:47","date_gmt":"2023-06-14T09:01:47","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=348761"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=348761","title":{"rendered":"RSC \u0441 \u043d\u0443\u043b\u044f. \u0427\u0430\u0441\u0442\u044c 1: \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
<\/p>\n

\u0412 \u044d\u0442\u043e\u043c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u043c «\u0433\u043b\u0443\u0431\u043e\u043a\u043e\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0438» (deep dive) \u043c\u044b \u0441 \u043d\u0443\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React<\/a>.<\/p>\n

<\/p>\n

\u0414\u0430\u043d\u043d\u044b\u0439 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0442\u0440\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 (\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430).<\/p>\n

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

\u0421\u0435\u0440\u044c\u0435\u0437\u043d\u043e, \u044d\u0442\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435!<\/h2>\n

<\/p>\n

\u042d\u0442\u043e\u0442 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React \u0438\u043b\u0438 \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e RSC, \u0438\u043b\u0438 \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, \u043e\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u0442 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0445 «\u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u044f» \u0441 \u043d\u0443\u043b\u044f.<\/p>\n

<\/p>\n

\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043d\u0443\u043b\u044f.<\/em> \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u044b\u0442 \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 React.<\/p>\n

<\/p>\n

\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/em> \u041c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 React<\/a>. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n

<\/p>\n

\u0412 \u043f\u0435\u0434\u0430\u0433\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0446\u0435\u043b\u044f\u0445 \u043d\u0430\u0448\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439, \u0447\u0435\u043c \u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 React.<\/em> \u0412 \u0442\u0435\u043a\u0441\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u043d\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u0430 \u043d\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c.<\/p>\n

<\/p>\n

\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u043c\u0441\u044f \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435…<\/h2>\n

<\/p>\n

\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u0432\u044b \u043f\u0440\u043e\u0441\u043d\u0443\u043b\u0438\u0441\u044c \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0443\u0442\u0440\u043e\u043c \u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430 \u0434\u0432\u043e\u0440\u0435 \u0441\u043d\u043e\u0432\u0430 2003 \u0433\u043e\u0434. \u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u0430\u0447\u0430\u0442\u043e\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u0433, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043b\u0435\u0436\u0430\u0449\u0438\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041d\u0430 PHP \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n

<\/p>\n

<?php   $author = \"Jae Doe\";   $post_content = @file_get_contents(\".\/posts\/hello-world.txt\"); ?> <html>   <head>     <title>My blog<\/title>   <\/head>   <body>     <nav>       <a href=\"\/\">Home<\/a>       <hr>     <\/nav>     <article>       <?php echo htmlspecialchars($post_content); ?>     <\/article>     <footer>       <hr>       <p><i>(c) <?php echo htmlspecialchars($author); ?>, <?php echo date(\"Y\"); ?><\/i><\/p>     <\/footer>   <\/body> <\/html><\/code><\/pre>\n
  <\/p>\n
\u0414\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 HTML \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0442\u0435\u0433\u0438 \u043a\u0430\u043a <nav><\/code>, <article><\/code> \u0438 <footer><\/code> \u0442\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438.<\/em><\/p>\n
  <\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c http:\/\/locahost:3000\/hello-world<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u044d\u0442\u043e\u0442 \u0441\u043a\u0440\u0438\u043f\u0442 PHP \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u0441\u0442\u043e\u043c \u0431\u043b\u043e\u0433\u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 .\/posts\/hello-world.txt<\/code>. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442 \u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c Node.js \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
import { createServer } from 'http'; import { readFile } from 'fs\/promises'; import escapeHtml from  'escape-html';  createServer(async (req, res) => {   const author = \"Jae Doe\";   const postContent = await readFile(\".\/posts\/hello-world.txt\", \"utf8\");   sendHTML(     res,     `<html>       <head>         <title>My blog<\/title>       <\/head>       <body>         <nav>           <a href=\"\/\">Home<\/a>           <hr \/>         <\/nav>         <article>           ${escapeHtml(postContent)}         <\/article>         <footer>           <hr>           <p><i>(c) ${escapeHtml(author)}, ${new Date().getFullYear()}<\/i><\/p>         <\/footer>       <\/body>     <\/html>`   ); }).listen(8080);  function sendHTML(res, html) {   res.setHeader(\"Content-Type\", \"text\/html\");   res.end(html); }<\/code><\/pre>\n
  <\/p>\n
\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
  <\/p>\n
\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u044f\u0442\u044c \u0441 \u0441\u043e\u0431\u043e\u0439 \u0432 2003 \u0433\u043e\u0434 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u0434\u0432\u0438\u0436\u043e\u043a Node.js \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u0432\u043d\u0435\u0441\u0442\u0438 \u0432 \u044d\u0442\u043e\u043c \u043c\u0438\u0440 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0443 React, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u0435? \u0418 \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435?<\/p>\n
  <\/p>\n
\u0428\u0430\u0433 1: \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u043c JSX<\/h2>\n
  <\/p>\n
\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u0430\u0437\u0430 \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435, \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u0430\u044f \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438. \u041c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c escapeHtml(postContent)<\/code> \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u043a\u0430\u043a HTML.<\/p>\n
  <\/p>\n
\u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0442 «\u0448\u0430\u0431\u043b\u043e\u043d\u0430» (template) \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 (template language), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u043e\u0431\u0435\u0437\u0437\u0430\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c (escape) \u0442\u0435\u043a\u0441\u0442 \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u043b\u044f \u0434\u043e\u043c\u0435\u043d\u0430 (domain-specific) \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0438 \u0446\u0438\u043a\u043b\u043e\u0432. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0432 2000-\u0445 \u0433\u043e\u0434\u0430\u0445.<\/p>\n
  <\/p>\n
\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432\u0430\u0448\u0438 \u0437\u043d\u0430\u043d\u0438\u044f React \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0430\u0441 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
  <\/p>\n
createServer(async (req, res) => {   const author = \"Jae Doe\";   const postContent = await readFile(\".\/posts\/hello-world.txt\", \"utf8\");   sendHTML(     res,     <html>       <head>         <title>My blog<\/title>       <\/head>       <body>         <nav>           <a href=\"\/\">Home<\/a>           <hr \/>         <\/nav>         <article>           {postContent}         <\/article>         <footer>           <hr \/>           <p><i>(c) {author}, {new Date().getFullYear()}<\/i><\/p>         <\/footer>       <\/body>     <\/html>   ); }).listen(8080);<\/code><\/pre>\n
  <\/p>\n
\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0445\u043e\u0436\u0435, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0412\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 (string interpolation), \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e XML \u0432 JavaScript. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e «\u0438\u0437\u043e\u0431\u0440\u0435\u043b\u0438» JSX (JavaScript and XML). JSX \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043d\u043e, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a\u0438, \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445\/\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u0442\u0435\u0433\u043e\u0432 HTML \u0438\u043b\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0431\u0435\u0437 \u043e\u0431\u0435\u0437\u0437\u0430\u0440\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c JSX \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
  <\/p>\n
\/\/ \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f {   $$typeof: Symbol.for(\"react.element\"), \/\/ \u0413\u043e\u0432\u043e\u0440\u0438\u0442 React, \u0447\u0442\u043e \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 JSX (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <html>)   type: 'html',   props: {     children: [       {         $$typeof: Symbol.for(\"react.element\"),         type: 'head',         props: {           children: {             $$typeof: Symbol.for(\"react.element\"),             type: 'title',             props: { children: 'My blog' }           }         }       },       {         $$typeof: Symbol.for(\"react.element\"),         type: 'body',         props: {           children: [             {               $$typeof: Symbol.for(\"react.element\"),               type: 'nav',               props: {                 children: [{                   $$typeof: Symbol.for(\"react.element\"),                   type: 'a',                   props: { href: '\/', children: 'Home' }                 }, {                   $$typeof: Symbol.for(\"react.element\"),                   type: 'hr',                   props: null                 }]               }             },             {               $$typeof: Symbol.for(\"react.element\"),               type: 'article',               props: {                 children: postContent               }             },             {               $$typeof: Symbol.for(\"react.element\"),               type: 'footer',               props: {                 \/* \u0418 \u0442.\u0434. *\/               }             }           ]         }       }     ]   } }<\/code><\/pre>\n
  <\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 HTML, \u0430 \u043d\u0435 \u0434\u0435\u0440\u0435\u0432\u043e JSON (\u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c).<\/p>\n
  <\/p>\n
\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 JSX \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 HTML. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0443\u0437\u043b\u043e\u0432 (nodes) (\u0441\u0442\u0440\u043e\u043a\u0430, \u0447\u0438\u0441\u043b\u043e, \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u043b\u0438 \u0443\u0437\u0435\u043b JSX \u0441 \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c\u0438 (children)) \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0443\u0441\u043e\u0447\u043a\u0438 HTML:<\/p>\n
  <\/p>\n
function renderJSXToHTML(jsx) {   if (typeof jsx === \"string\" || typeof jsx === \"number\") {     \/\/ \u042d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430. \u041e\u0431\u0435\u0437\u0437\u0430\u0440\u0430\u0436\u0438\u0432\u0430\u0435\u043c \u0435\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0432 HTML.     return escapeHtml(jsx);   } else if (jsx == null || typeof jsx === \"boolean\") {     \/\/ \u042d\u0442\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u0443\u0437\u0435\u043b. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0432 HTML.     return \"\";   } else if (Array.isArray(jsx)) {     \/\/ \u042d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0443\u0437\u043b\u043e\u0432. \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0443\u0437\u0435\u043b \u0432 HTML \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443.     return jsx.map((child) => renderJSXToHTML(child)).join(\"\");   } else if (typeof jsx === \"object\") {     \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c React JSX (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <div \/>).     if (jsx.$$typeof === Symbol.for(\"react.element\")) {       \/\/ \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0442\u0435\u0433 HTML.       let html = \"<\" + jsx.type;       for (const propName in jsx.props) {         if (jsx.props.hasOwnProperty(propName) && propName !== \"children\") {           html += \" \";           html += propName;           html += \"=\";           html += escapeHtml(jsx.props[propName]);         }       }       html += \">\";       html += renderJSXToHTML(jsx.props.children);       html += \"<\/\" + jsx.type + \">\";       return html;       \/\/ \u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442.     } else throw new Error(\"Cannot render an object.\");     \/\/ \u041d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e.   } else throw new Error(\"Not implemented.\"); }<\/code><\/pre>\n
  <\/p>\n
\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a> \u041f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 start<\/code> \u0432 package.json<\/code> (nodemon -- --experimental-loader .\/node-jsx-loader.js .\/server.js<\/code>). \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a\u043e\u0434 \u0444\u0430\u0439\u043b\u0430 server.js<\/code> \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel (@babel\/plugin-transform-react-jsx<\/code>) \u2014 \u043f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 renderJSXToHTML<\/code> JSX \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0423\u0432\u0438\u0434\u0435\u0442\u044c \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 console.log(jsx)<\/code> \u0432 \u043d\u0430\u0447\u0430\u043b\u043e renderJSXToHTML()<\/code> \u0438 \u043d\u0430\u0436\u0430\u0432 Open logs<\/code> \u0432 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c \u043c\u0435\u043d\u044e \u043e\u043a\u043d\u0430 \u043f\u0440\u0435\u0432\u044c\u044e.<\/p>\n
  <\/p>\n
\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 JSX \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 HTML \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043a\u0430\u043a «\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430» (SSR \u2014 Server-Side Rendering). \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e RSC \u0438 SSR \u2014 \u0434\u0432\u0435 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 (\u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435).<\/em> \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0441 SSR, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0440\u0435\u0434\u0435. \u041d\u043e \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433, \u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n
  <\/p>\n
\u0428\u0430\u0433 2: \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n
  <\/p>\n
\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 «\u0436\u0435\u043b\u0430\u043d\u043d\u043e\u0439» \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0433\u0434\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u0434, \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438 UI (User Interface \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441) \u043d\u0430 \u043a\u0443\u0441\u043e\u0447\u043a\u0438, \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u043f\u043e\u0432 (props, properties \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430).<\/p>\n
  <\/p>\n
\u0420\u0430\u0437\u0434\u0435\u043b\u0438\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c BlogPostPage<\/code> \u0438 Footer<\/code>:<\/p>\n
  <\/p>\n
function BlogPostPage({ postContent, author }) {   return (     <html>       <head>         <title>My blog<\/title>       <\/head>       <body>         <nav>           <a href=\"\/\">Home<\/a>           <hr \/>         <\/nav>         <article>           {postContent}         <\/article>         <Footer author={author} \/>       <\/body>     <\/html>   ); }  function Footer({ author }) {   return (     <footer>       <hr \/>       <p>         <i>           (c) {author} {new Date().getFullYear()}         <\/i>       <\/p>     <\/footer>   ); }<\/code><\/pre>\n
  <\/p>\n
\u0414\u0430\u043b\u0435\u0435, \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e JSX \u043d\u0430 <BlogPostPage postContent={postContent} author={author} \/><\/code>:<\/p>\n
  <\/p>\n
createServer(async (req, res) => {   const author = \"Jae Doe\";   const postContent = await readFile(\".\/posts\/hello-world.txt\", \"utf8\");   sendHTML(     res,     <BlogPostPage       postContent={postContent}       author={author}     \/>   ); }).listen(8080);<\/code><\/pre>\n
  <\/p>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0435\u0437 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f renderJSXToHTML()<\/code>, \u0442\u043e \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 HTML \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u043c:<\/p>\n
  <\/p>\n
<!-- \u042d\u0442\u043e \u043d\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 HTML... --> <function BlogPostPage({postContent,author}) {...}> <\/function BlogPostPage({postContent,author}) {...}><\/code><\/pre>\n
  <\/p>\n
\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f renderJSXToHTML<\/code> (\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 JSX \u0432 HTML) «\u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442», \u0447\u0442\u043e jsx.type<\/code> \u2014 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0433\u0430 HTML (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \"html\"<\/code>, \"footer\"<\/code> \u0438\u043b\u0438 \"p\"<\/code>):<\/p>\n
  <\/p>\n
if (jsx.$$typeof === Symbol.for(\"react.element\")) {   \/\/ \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433\u0438 HTML (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <p>).   let html = \"<\" + jsx.type;   \/\/ ...   html += \"<\/\" + jsx.type + \">\";   return html; }<\/code><\/pre>\n
  <\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e BlogPostPage<\/code> \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \"<\" + jsx.type + \">\"<\/code> «\u043f\u0435\u0447\u0430\u0442\u0430\u0435\u0442» \u0435\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434. \u041c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0438 \u0442\u0435\u0433\u0430 HTML. \u0412\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c (serialize) \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0435\u044e JSX \u0432 HTML:<\/p>\n
  <\/p>\n
if (jsx.$$typeof === Symbol.for(\"react.element\")) {   if (typeof jsx.type === \"string\") { \/\/ \u042d\u0442\u043e \u0442\u0435\u0433 (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <div>)?     \/\/ \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433\u0438 HTML (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <p>).     let html = \"<\" + jsx.type;     \/\/ ...     html += \"<\/\" + jsx.type + \">\";     return html;   } else if (typeof jsx.type === \"function\") { \/\/ \u042d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <BlogPostPage>)?     \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u0440\u043e\u043f\u0430\u043c\u0438 \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0438\u043c JSX \u0432 HTML.     const Component = jsx.type;     const props = jsx.props;     const returnedJsx = Component(props);     return renderJSXToHTML(returnedJsx);     \/\/ \u041d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e.   } else throw new Error(\"Not implemented.\"); }<\/code><\/pre>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442 JSX, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <BlogPostPage author=\"Jae Doe\" \/><\/code>, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f { author: \"Jae Doe\" }<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 JSX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 renderJSXToHTML()<\/code>.<\/p>\n
  <\/p>\n
\u042d\u0442\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0432.<\/p>\n
  <\/p>\n
\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
  <\/p>\n
\u0428\u0430\u0433 3: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0440\u043e\u0443\u0442\u0438\u043d\u0433<\/h2>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0431\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u0431\u043b\u043e\u0433.<\/p>\n
  <\/p>\n
\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u0430\u0434\u0440\u0435\u0441\u0443, \u043a\u0430\u043a \/hello-world<\/code>, \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0444\u0430\u0439\u043b\u0430 .\/posts\/hello-world.txt<\/code>, \u0430 \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e URL (Uniform Resource Locator \u2014 \u0435\u0434\u0438\u043d\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432) \u2014 \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0432\u0441\u0435\u0445 \u043f\u043e\u0441\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 BlogIndexPage<\/code>, \u0438\u043c\u0435\u044e\u0449\u0443\u044e \u043e\u0431\u0449\u0438\u0439 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 BlogPostPage<\/code> \u043c\u0430\u043a\u0435\u0442 (shared layout), \u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0438.<\/p>\n
  <\/p>\n
\u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BlogPostPage<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e <html><\/code>. \u0418\u0437\u0432\u043b\u0435\u0447\u0435\u043c \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0447\u0430\u0441\u0442\u0438 UI (header<\/code> \u0438 footer<\/code>) \u0438\u0437 BlogPostPage<\/code> \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 (reusable) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BlogLayout<\/code>:<\/p>\n
  <\/p>\n
function BlogLayout({ children }) {   const author = \"Jae Doe\";   return (     <html>       <head>         <title>My blog<\/title>       <\/head>       <body>         <nav>           <a href=\"\/\">Home<\/a>           <hr \/>         <\/nav>         <main>           {children}         <\/main>         <Footer author={author} \/>       <\/body>     <\/html>   ); }<\/code><\/pre>\n
  <\/p>\n
\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c BlogPostPage<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c (slot) \u0432\u043d\u0443\u0442\u0440\u044c \u043c\u0430\u043a\u0435\u0442\u0430:<\/p>\n
  <\/p>\n
function BlogPostPage({ postSlug, postContent }) {   return (     <section>       <h2>         <a href={\"\/\" + postSlug}>{postSlug}<\/a>       <\/h2>       <article>{postContent}<\/article>     <\/section>   ); }<\/code><\/pre>\n
  <\/p>\n
\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c <BlogPostPage><\/code>, \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u0432 <BlogLayout><\/code>:<\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BlogIndexPage<\/code>, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0441\u0442 \u0432 .\/posts\/*.txt<\/code> \u043e\u0434\u0438\u043d \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c:<\/p>\n
  <\/p>\n
function BlogIndexPage({ postSlugs, postContents }) {   return (     <section>       <h1>Welcome to my blog<\/h1>       <div>         {postSlugs.map((postSlug, index) => (           <section key={postSlug}>             <h2>               <a href={\"\/\" + postSlug}>{postSlug}<\/a>             <\/h2>             <article>{postContents[index]}<\/article>           <\/section>         ))}       <\/div>     <\/section>   ); }<\/code><\/pre>\n
  <\/p>\n
\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0432 BlogLayout<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0438\u043c\u0435\u043b \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0448\u0430\u043f\u043a\u0443 \u0438 \u043f\u043e\u0434\u0432\u0430\u043b:<\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 (server handler) \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 URL, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u0434\u043b\u044f \u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0430\u043a\u0435\u0442\u0430:<\/p>\n
  <\/p>\n
createServer(async (req, res) => {   try {     const url = new URL(req.url, `http:\/\/${req.headers.host}`);     \/\/ \u0418\u0449\u0435\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 URL \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.     const page = await matchRoute(url);     \/\/ \u041e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0432\u043f\u0430\u0432\u0448\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043e\u0431\u0449\u0438\u0439 \u043c\u0430\u043a\u0435\u0442.     sendHTML(res, <BlogLayout>{page}<\/BlogLayout>);   } catch (err) {     console.error(err);     res.statusCode = err.statusCode ?? 500;     res.end();   } }).listen(8080);  async function matchRoute(url) {   if (url.pathname === \"\/\") {     \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0441\u0435\u0445 \u043f\u043e\u0441\u0442\u043e\u0432.     \/\/ \u0427\u0438\u0442\u0430\u0435\u043c \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u0432 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.     const postFiles = await readdir(\".\/posts\");     const postSlugs = postFiles.map((file) => file.slice(0, file.lastIndexOf(\".\")));     const postContents = await Promise.all(       postSlugs.map((postSlug) =>         readFile(\".\/posts\/\" + postSlug + \".txt\", \"utf8\")       )     );     return <BlogIndexPage postSlugs={postSlugs} postContents={postContents} \/>;   } else {     \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430.     \/\/ \u0427\u0438\u0442\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0444\u0430\u0439\u043b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u0432.     const postSlug = sanitizeFilename(url.pathname.slice(1));     try {       const postContent = await readFile(\".\/posts\/\" + postSlug + \".txt\", \"utf8\");       return <BlogPostPage postSlug={postSlug} postContent={postContent} \/>;     } catch (err) {       throwNotFound(err);     }   } }  function throwNotFound(cause) {   \/\/ \u041d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u043e.   const notFound = new Error(\"Not found.\", { cause });   notFound.statusCode = 404;   throw notFound; }<\/code><\/pre>\n
  <\/p>\n
\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
  <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f (navigate) \u043f\u043e \u0431\u043b\u043e\u0433\u0443. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u0435\u0433\u043a\u0430 \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c \u0438 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435.<\/p>\n
  <\/p>\n
\u0428\u0430\u0433 4: \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0435\u043c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n
  <\/p>\n
\u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 BlogIndexPage<\/code> \u0438 BlogPostPage<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e:<\/p>\n
    <\/p>\n
  <\/p>\n
    <\/p>\n
  <\/p>\n
  <\/p>\n
\u0411\u044b\u043b\u043e \u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u043e \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041e\u0434\u043d\u0430\u043a\u043e, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Post<\/code>, \u043d\u0430\u043c \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a-\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c content<\/code> \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430:<\/p>\n
  <\/p>\n
function Post({ slug, content }) { \/\/ \u041a\u0442\u043e-\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f `content` \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 :-(   return (     <section>       <h2>         <a href={\"\/\" + slug}>{slug}<\/a>       <\/h2>       <article>{content}<\/article>     <\/section>   ) }<\/code><\/pre>\n
  <\/p>\n
\u0421\u0435\u0439\u0447\u0430\u0441 \u043b\u043e\u0433\u0438\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 content<\/code> \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u043e\u0432 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0434\u0435\u0441\u044c<\/a> \u0438 \u0437\u0434\u0435\u0441\u044c<\/a>. \u041c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0435\u0433\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 API (Application Programming Interface \u2014 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f) readFile<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u043c\u043e\u0434\u0443\u043b\u044c fs<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u0447\u0442\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u043b\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443).<\/p>\n
  <\/p>\n
\u0418\u043b\u0438 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0436\u0435\u043c?<\/p>\n
  <\/p>\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a React \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u0438\u0434\u0435\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e API \u0432\u0440\u043e\u0434\u0435 fs.readFile<\/code> \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0414\u0430\u0436\u0435 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 React SSR \u0438\u043d\u0442\u0443\u0438\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0430\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 API, \u0432\u0440\u043e\u0434\u0435 fs.readFile<\/code>, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443\u0442.<\/p>\n
  <\/p>\n
\u041d\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u0432\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u043a\u043e\u043c\u0443-\u0442\u043e \u0432 2003 \u0433\u043e\u0434\u0443, \u043e\u043d\u0438 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u0431\u044b \u044d\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c.<\/p>\n
  <\/p>\n
\u0411\u0443\u0434\u0435\u043c \u0440\u0435\u0448\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u043e\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043e\u0436\u0434\u0430\u0442\u044c \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 HTML \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0438 \u043e\u043d \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432 \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e.<\/p>\n
  <\/p>\n
\u0423\u0434\u0430\u043b\u0438\u043c \u043f\u0440\u043e\u043f content<\/code> \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c Post<\/code> \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u0430 await readFile()<\/code>:<\/p>\n
  <\/p>\n
async function Post({ slug }) {   let content;   try {     content = await readFile(\".\/posts\/\" + slug + \".txt\", \"utf8\");   } catch (err) {     throwNotFound(err);   }   return (     <section>       <h2>         <a href={\"\/\" + slug}>{slug}<\/a>       <\/h2>       <article>{content}<\/article>     <\/section>   ) }<\/code><\/pre>\n
  <\/p>\n
\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c BlogIndexPage<\/code> \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0435\u0439 \u0437\u0430 \u043f\u0435\u0440\u0435\u0431\u043e\u0440 \u043f\u043e\u0441\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e await readdir()<\/code>:<\/p>\n
  <\/p>\n
async function BlogIndexPage() {   const postFiles = await readdir(\".\/posts\");   const postSlugs = postFiles.map((file) =>     file.slice(0, file.lastIndexOf(\".\"))   );   return (     <section>       <h1>Welcome to my blog<\/h1>       <div>         {postSlugs.map((slug) => (           <Post key={slug} slug={slug} \/>         ))}       <\/div>     <\/section>   ); }<\/code><\/pre>\n
  <\/p>\n
\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Post<\/code> \u0438 BlogIndexPage<\/code> \u0441\u0430\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c matchRoute()<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <Router><\/code>:<\/p>\n
  <\/p>\n
function Router({ url }) {   let page;   if (url.pathname === \"\/\") {     page = <BlogIndexPage \/>;   } else {     const postSlug = sanitizeFilename(url.pathname.slice(1));     page = <BlogPostPage postSlug={postSlug} \/>;   }   return <BlogLayout>{page}<\/BlogLayout>; }<\/code><\/pre>\n
  <\/p>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u0435\u0440\u0445\u043d\u0435\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <Router><\/code><\/p>\n
  <\/p>\n
createServer(async (req, res) => {   try {     const url = new URL(req.url, `http:\/\/${req.headers.host}`);     await sendHTML(res, <Router url={url} \/>);   } catch (err) {     console.error(err);     res.statusCode = err.statusCode ?? 500;     res.end();   } }).listen(8080);<\/code><\/pre>\n
  <\/p>\n
\u041f\u043e\u0433\u043e\u0434\u0438\u0442\u0435, \u043d\u0430\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/p>\n
  <\/p>\n
\u041d\u0430\u0439\u0434\u0435\u043c \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f renderJSXToHTML()<\/code>:<\/p>\n
  <\/p>\n
} else if (typeof jsx.type === \"function\") {   const Component = jsx.type;   const props = jsx.props;   const returnedJsx = Component(props); \/\/ <--- \u0412\u043e\u0442 \u0433\u0434\u0435 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b   return renderJSXToHTML(returnedJsx); } else throw new Error(\"Not implemented.\");<\/code><\/pre>\n
  <\/p>\n
\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e await<\/code>:<\/p>\n
  <\/p>\n
\/\/ ... const returnedJsx = await Component(props); \/\/ ...<\/code><\/pre>\n
  <\/p>\n
\u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u0430\u043c\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f renderJSXToHTML<\/code> \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439:<\/p>\n
  <\/p>\n
async function renderJSXToHTML(jsx)  {   \/\/ ... }<\/code><\/pre>\n
  <\/p>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c, \u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 HTML «\u0436\u0434\u0435\u0442» \u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f (\u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0432\u0432\u0438\u0434\u0443 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043c\u0438\u0441\u0430).<\/p>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0432 \u043d\u043e\u0432\u043e\u043c \u043a\u043e\u0434\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u043e «\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435» \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f BlogIndexPage<\/code> \u0432 \u0446\u0438\u043a\u043b\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BlogIndexPage<\/code> \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 Post<\/code>, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u0436\u0434\u044b\u0439 Post<\/code> \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n
  <\/p>\n
\u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 await<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f «\u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u043c». \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0434\u0430\u0436\u0435 \u043d\u0430\u0447\u0430\u0442\u044c<\/em> \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0443 HTML \u0434\u043e \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0439<\/em> \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435, \u043d\u0430\u043c \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c HTML \u043f\u043e \u043c\u0435\u0440\u0435 \u0435\u0433\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 (\u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0432 \u043f\u043e\u0442\u043e\u043a\u0435 (stream)). \u041c\u044b \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u043e\u0442\u043e\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0431\u0435\u0437 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u0430\u043c\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 await<\/code> \u0434\u043b\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 (\u0447\u0442\u043e \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e), \u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b await<\/code> \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f async<\/code>. \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 React \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p><\/blockquote>\n
  <\/p>\n
\u0428\u0430\u0433 5: \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h2>\n
  <\/p>\n
\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0440\u043e\u0443\u0442 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 HTML:<\/p>\n
  <\/p>\n
async function sendHTML(res, jsx) {   const html = await renderJSXToHTML(jsx);   res.setHeader(\"Content-Type\", \"text\/html\");   res.end(html); }<\/code><\/pre>\n
  <\/p>\n
\u042d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f HTML \u2014 \u043d\u043e \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439. \u041c\u044b \u0431\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c «\u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0438\u0435\u0441\u044f \u0447\u0430\u0441\u0442\u0438» \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 (in-place), \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043a \u0432\u043d\u0443\u0442\u0440\u0438, \u0442\u0430\u043a \u0438 \u0432\u043e\u043a\u0440\u0443\u0433 \u044d\u0442\u0438\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430, \u0432\u0438\u0434\u0435\u043e, \u043f\u043e\u043f\u0430\u043f\u0430 \u0438 \u0442.\u0434.). \u042d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f \u043a \u043f\u043e\u0441\u0442\u0443) \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u043c\u0438.<\/p>\n
  <\/p>\n
\u0414\u043b\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c <input \/><\/code><\/a> \u0432 <nav><\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 BlogLayout<\/code>:<\/p>\n
  <\/p>\n
<nav>   <a href=\"\/\">Home<\/a>   <hr \/>   <input \/>   <hr \/> <\/nav><\/code><\/pre>\n
  <\/p>\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0431\u043b\u043e\u0433\u0443:<\/p>\n
  <\/p>\n
\n
<\/div>\n<\/div>\n
  <\/p>\n
\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u0433\u0430, \u043d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u043c. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u043b\u0441\u044f \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n
  <\/p>\n
\u0418\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0432 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430:<\/p>\n
  <\/p>\n
    \n
  1. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 JS \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439 (\u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b).<\/li>\n
  2. \u041d\u0430\u0443\u0447\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e \u0441\u0435\u0442\u0438 JSX \u0432\u043c\u0435\u0441\u0442\u043e HTML \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439.<\/li>\n
  3. \u041d\u0430\u0443\u0447\u0438\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f JSX \u0431\u0435\u0437 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u044f DOM (Document Object Model \u2014 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430) (\u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React).<\/li>\n<\/ol>\n
      <\/p>\n
    \u0428\u0430\u0433 5.1: \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h3>\n
      <\/p>\n
    \u041d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u0433 <script><\/code> \u0432 \u043d\u043e\u0432\u043e\u043c \u0444\u0430\u0439\u043b\u0435 client.js<\/code>. \u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0430\u0439\u0442\u0443 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u043a\u043b\u0438\u043a \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e navigate<\/code>:<\/p>\n
      <\/p>\n
    async function navigate(pathname) {   \/\/ TODO }  window.addEventListener(\"click\", (e) => {   \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u043a\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435.   if (e.target.tagName !== \"A\") {     return;   }   \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \"\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u043d\u043e\u0432\u043e\u043c \u043e\u043a\u043d\u0435\".   if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {     return;   }   \/\/ \u0418\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 URL.   const href = e.target.getAttribute(\"href\");   if (!href.startsWith(\"\/\")) {     return;   }   \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c URL.   e.preventDefault();   window.history.pushState(null, null, href);   \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443.   navigate(href); }, true);  window.addEventListener(\"popstate\", () => {   \/\/ \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \"\u0412\u043f\u0435\u0440\u0435\u0434\/\u041d\u0430\u0437\u0430\u0434\" \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443.   navigate(window.location.pathname); });<\/code><\/pre>\n
      <\/p>\n
    \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 navigate<\/code> \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0432\u0435\u0442 HTML \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f DOM:<\/p>\n
      <\/p>\n
    let currentPathname = window.location.pathname;  async function navigate(pathname) {   currentPathname = pathname;   \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c HTML \u0434\u043b\u044f \u0440\u043e\u0443\u0442\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434.   const response = await fetch(pathname);   const html = await response.text();    if (pathname === currentPathname) {     \/\/ \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0447\u0430\u0441\u0442\u044c HTML, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0443\u044e\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 <body>.     const bodyStartIndex = html.indexOf(\"<body>\") + \"<body>\".length;     const bodyEndIndex = html.lastIndexOf(\"<\/body>\");     const bodyHTML = html.slice(bodyStartIndex, bodyEndIndex);      \/\/ \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.     document.body.innerHTML = bodyHTML;   } }<\/code><\/pre>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 5.2: \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c JSX \u043f\u043e \u0441\u0435\u0442\u0438<\/h3>\n
      <\/p>\n
    \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0435\u0440\u0435\u0432\u0430 JSX?<\/p>\n
      <\/p>\n
    {   $$typeof: Symbol.for(\"react.element\"),   type: 'html',   props: {     children: [       {         $$typeof: Symbol.for(\"react.element\"),         type: 'head',         props: {           \/\/ \u0418 \u0442.\u0434.<\/code><\/pre>\n
      <\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c. \u041a\u043e\u0433\u0434\u0430 URL \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 ?jsx<\/code>, \u0432 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e, \u0430 \u043d\u0435 HTML. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043b\u0435\u0433\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0438 \u0442\u043e\u0447\u0435\u0447\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c DOM. \u042d\u0442\u043e \u0440\u0435\u0448\u0438\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <input><\/code>, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0442\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u043c. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 (\u043d\u0435 \u0432 \u044d\u0442\u043e\u0439!) \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e (\u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e HTML) \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n
      <\/p>\n
    \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043d\u043e\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 sendJSX<\/code> \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 (search param) ?jsx<\/code>:<\/p>\n
      <\/p>\n
    createServer(async (req, res) => {   try {     const url = new URL(req.url, `http:\/\/${req.headers.host}`);     if (url.pathname === \"\/client.js\") {       \/\/ ...     } else if (url.searchParams.has(\"jsx\")) {       url.searchParams.delete(\"jsx\"); \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c URL, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 <Router>       await sendJSX(res, <Router url={url} \/>);     } else {       await sendHTML(res, <Router url={url} \/>);     }     \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u0412 sendJSX()<\/code> \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0435\u0440\u0435\u0432\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 JSON \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSON.stringify(jsx)<\/code> \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u043e \u0441\u0435\u0442\u0438:<\/p>\n
      <\/p>\n
    async function sendJSX(res, jsx) {   const jsxString = JSON.stringify(jsx, null, 2);   res.setHeader(\"Content-Type\", \"application\/json\");   res.end(jsxString); }<\/code><\/pre>\n
      <\/p>\n
    \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c «\u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 JSX», \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043f\u043e \u0441\u0435\u0442\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 JSX (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \"<Foo \/>\"<\/code>). \u041c\u044b \u0431\u0435\u0440\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0435\u0440\u0435\u0432\u0430, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 JSX, \u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 JSON. \u041e\u0434\u043d\u0430\u043a\u043e \u0444\u043e\u0440\u043c\u0430\u0442 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e\u0437\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f (\u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 RSC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438).<\/p>\n
      <\/p>\n
    \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u0441\u0435\u0442\u0438:<\/p>\n
      <\/p>\n
    async function navigate(pathname) {   currentPathname = pathname;   const response = await fetch(pathname + \"?jsx\");   const jsonString = await response.text();   if (pathname === currentPathname) {     alert(jsonString);   } }<\/code><\/pre>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a> \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 (\/<\/code>) \u0438 \u043d\u0430\u0436\u043c\u0435\u0442\u0435 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0441 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c:<\/p>\n
      <\/p>\n
    {   \"key\": null,   \"ref\": null,   \"props\": {     \"url\": \"http:\/\/localhost:3000\/hello-world\"   },   \/\/ ... }<\/code><\/pre>\n
      <\/p>\n
    \u041c\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e JSX \u0432\u0440\u043e\u0434\u0435 <html>...<\/html><\/code>, \u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.<\/p>\n
      <\/p>\n
    \u041d\u0430\u0448 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 JSX \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0442\u0430\u043a:<\/p>\n
      <\/p>\n
    <Router url=\"http:\/\/localhost:3000\/hello-world\" \/> \/\/ { \/\/   $$typeof: Symbol.for('react.element'), \/\/   type: Router, \/\/   props: { url: \"http:\/\/localhost:3000\/hello-world\" } }, \/\/    ... \/\/ }<\/code><\/pre>\n
      <\/p>\n
    \u041f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u044d\u0442\u043e\u0442 JSX \u0432 JSON \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430 «\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u043d\u043e», \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 JSX Router<\/code> \u0445\u043e\u0447\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0430 Router<\/code> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Router<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439 JSX \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/em><\/p>\n
      <\/p>\n
    \u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Router<\/code> \u0441 { url: \"http:\/\/localhost:3000\/hello-world\" }<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u043e\u043f\u0430, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u0443\u0441\u043e\u043a JSX:<\/p>\n
      <\/p>\n
    <BlogLayout>   <BlogIndexPage \/> <\/BlogLayout><\/code><\/pre>\n
      <\/p>\n
    \u041e\u043f\u044f\u0442\u044c «\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u043d\u043e» \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 JSX \u0432 JSON \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c BlogLayout<\/code> \u2014 \u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c BlogLayout<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 JSX \u043e\u043d \u0445\u043e\u0447\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0438 \u0442.\u0434.<\/p>\n
      <\/p>\n
    \u041e\u043f\u044b\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 React \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c: \u043c\u043e\u0436\u0435\u043c \u043b\u0438 \u043c\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f? \u0418\u0449\u0438\u0442\u0435 \u043e\u0442\u0432\u0435\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0435\u0440\u0438\u0438! \u041d\u043e \u0434\u0430\u0436\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f BlogLayout<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 BlogIndexPage<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 fs.readdir()<\/code>.<\/em><\/p>\n
      <\/p>\n
    \u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e JSX, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u043a\u043e\u0434. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
      <\/p>\n
    <html>   <head>...<\/head>   <body>     <nav>       <a href=\"\/\">Home<\/a>       <hr \/>     <\/nav>     <main>     <section>       <h1>Welcome to my blog<\/h1>       <div>         ...       <\/div>     <\/main>     <footer>       <hr \/>       <p>         <i>           (c) Jae Doe 2003         <\/i>       <\/p>     <\/footer>   <\/body> <\/html><\/code><\/pre>\n
      <\/p>\n
    \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 JSON.stringify()<\/code> \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n
      <\/p>\n
    \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e renderJSXToClientJSX<\/code>. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0443\u0441\u043e\u043a JSX \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f «\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c» \u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 (\u043f\u0443\u0442\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e JSX, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0443.<\/p>\n
      <\/p>\n
    \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 renderJSXToHTML()<\/code>, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e HTML \u043e\u043d\u0430 \u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b:<\/p>\n
      <\/p>\n
    async function renderJSXToClientJSX(jsx) {   if (     typeof jsx === \"string\" ||     typeof jsx === \"number\" ||     typeof jsx === \"boolean\" ||     jsx == null   ) {     \/\/ \u0421 \u044d\u0442\u0438\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e.     return jsx;   } else if (Array.isArray(jsx)) {     \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.     return Promise.all(jsx.map((child) => renderJSXToClientJSX(child)));   } else if (jsx !== null && typeof jsx === \"object\") {     if (jsx.$$typeof === Symbol.for(\"react.element\")) {       if (typeof jsx.type === \"string\") {         \/\/ \u042d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <div \/>).         \/\/ \u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u044b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 JSON.         return {           ...jsx,           props: await renderJSXToClientJSX(jsx.props),         };       } else if (typeof jsx.type === \"function\") {         \/\/ \u042d\u0442\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React  (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a <Footer \/>).         \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u0443 \u0434\u043b\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0435\u044e JSX.         const Component = jsx.type;         const props = jsx.props;         const returnedJsx = await Component(props);         return renderJSXToClientJSX(returnedJsx);         \/\/ \u041d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e.       } else throw new Error(\"Not implemented.\");     } else {       \/\/ \u042d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u043f\u044b \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0438\u0445).       \/\/ \u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0432 \u043d\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f JSX.       return Object.fromEntries(         await Promise.all(           Object.entries(jsx).map(async ([propName, value]) => [             propName,             await renderJSXToClientJSX(value),           ])         )       );     }     \/\/ \u041d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e.   } else throw new Error(\"Not implemented\"); }<\/code><\/pre>\n
      <\/p>\n
    \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c sendJSX()<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f <Router \/><\/code> \u0432 «\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 JSX» \u043f\u0435\u0440\u0435\u0434 \u0435\u0433\u043e \u0441\u0442\u0440\u0438\u043d\u0433\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439:<\/p>\n
      <\/p>\n
    async function sendJSX(res, jsx) {   const clientJSX = await renderJSXToClientJSX(jsx);   const clientJSXString = JSON.stringify(clientJSX, null, 2);   res.setHeader(\"Content-Type\", \"application\/json\");   res.end(clientJSXString); }<\/code><\/pre>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043b\u0438\u043a \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043d\u0430 HTML \u2014 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043a \u0435\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e (diffing)!<\/p>\n
      <\/p>\n
    \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0435, \u043c\u043d\u043e\u0433\u043e\u0435 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0431\u0435\u0437 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u0424\u043e\u0440\u043c\u0430\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u0435\u043d \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u043e\u0432, \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 RSC \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0435\u0439 HTML, \u043f\u043b\u043e\u0445\u043e, \u0447\u0442\u043e «\u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f» \u0432\u0435\u0441\u044c \u043e\u0442\u0432\u0435\u0442 \u0446\u0435\u043b\u0438\u043a\u043e\u043c. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0441\u0442\u0440\u0438\u043c\u0438\u0442\u044c JSX \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0445 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043a\u043b\u0435\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0430\u0441\u0442\u0438 \u043e\u0431\u0449\u0435\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <html><\/code> \u0438 <nav><\/code>) \u0445\u043e\u0442\u044f \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u0441\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 (screen) \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0430\u0436\u043d\u043e\u0439, \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043c\u0430\u043a\u0435\u0442\u0430. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f RSC \u043d\u0435 \u0441\u0442\u0440\u0430\u0434\u0430\u0435\u0442 \u043e\u0442 \u044d\u0442\u0438\u0445 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432, \u043d\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u0446\u0435\u043b\u044f\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043a\u043e\u0434\u0430.<\/p><\/blockquote>\n
      <\/p>\n
    \u0428\u0430\u0433 5.3: \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f JSX \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435<\/h3>\n
      <\/p>\n
    \u0421\u0442\u0440\u043e\u0433\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d React \u0434\u044f\u043b \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f JSX. \u041d\u0430\u0448\u0438 \u0443\u0437\u043b\u044b JSX \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <nav><\/code> \u0438 <footer><\/code>. \u041c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0435 \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 JSX. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0431\u043e\u0433\u0430\u0442\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430.<\/p>\n
      <\/p>\n
    \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 HTML. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b React \u043c\u043e\u0433 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0437\u043b\u043e\u043c DOM, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043d \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b (\u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a \u0443\u0437\u0435\u043b DOM, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u0438\u0437 HTML), \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c React \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 JSX, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u044d\u0442\u043e\u043c\u0443 \u0443\u0437\u043b\u0443 DOM. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u0434\u0440\u044f\u0434\u0447\u0438\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0438\u0442 \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 \u043f\u043b\u0430\u043d \u0434\u043e\u043c\u0430 \u043f\u0435\u0440\u0435\u0434 \u0435\u0433\u043e \u0440\u0435\u043c\u043e\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435 React \u043e\u0431\u0445\u043e\u0434\u0438\u0442 DOM \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 JSX \u043a\u0430\u043a\u0438\u043c \u0443\u0437\u043b\u0430\u043c DOM \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 React \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u0443\u0437\u043b\u0430\u043c DOM, \u0434\u0435\u043b\u0430\u044f \u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u041e\u043d\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b (hydrated), \u043a\u0430\u043a \u0440\u0430\u0441\u0442\u0435\u043d\u0438\u044f, \u043e\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0442 \u0432\u043e\u0434\u044b.<\/p>\n
      <\/p>\n
    \u041e\u0431\u044b\u0447\u043d\u043e, \u0434\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c hydrateRoot<\/a> \u0441 \u0443\u0437\u043b\u043e\u043c DOM, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f React, \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c JSX, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n
      <\/p>\n
    hydrateRoot(document, <App \/>);<\/code><\/pre>\n
      <\/p>\n
    \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043d\u0435\u0442 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0442\u0430\u043a\u043e\u0433\u043e \u043a\u0430\u043a <App \/><\/code>). \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430, \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0443\u0441\u043e\u043a JSX \u0431\u0435\u0437 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 React \u0432 \u043d\u0435\u043c. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e React, \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e JSX, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 HTML. \u0414\u0435\u0440\u0435\u0432\u043e «\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JSX» (\u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u043a <html>...<\/html><\/code>), \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0438 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440, \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442:<\/p>\n
      <\/p>\n
    import { hydrateRoot } from 'react-dom\/client';  const root = hydrateRoot(document, getInitialClientJSX());  function getInitialClientJSX() {   \/\/ TODO: \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JSX <html>...<\/html>, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c HTML }<\/code><\/pre>\n
      <\/p>\n
    \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c JSX \u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. React \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u043e\u0431\u043e\u0439\u0434\u0435\u0442 \u0434\u0435\u0440\u0435\u0432\u043e DOM \u0438 \u0434\u0435\u0440\u0435\u0432\u043e JSX \u0438 \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0435\u043c\u0443 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n
      <\/p>\n
    \u0417\u0430\u0442\u0435\u043c, \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c JSX \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c DOM \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e root.render<\/a>:<\/p>\n
      <\/p>\n
    async function navigate(pathname) {   currentPathname = pathname;   const clientJSX = await fetchClientJSX(pathname);   if (pathname === currentPathname) {     root.render(clientJSX);   } }  async function fetchClientJSX(pathname) {   \/\/ TODO: \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 JSX <html>...<\/html> \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u043e\u0443\u0442\u0430 }<\/code><\/pre>\n
      <\/p>\n
    \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043d\u0430\u0448\u0435\u0439 \u0446\u0435\u043b\u0438 \u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442 React, \u0431\u0435\u0437 \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n
      <\/p>\n
    \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 5.3.1: \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c JSX \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h4>\n
      <\/p>\n
    \u041d\u0430\u0447\u043d\u0435\u043c \u0441 fetchClientJSX()<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0435 \u043b\u0435\u0433\u0447\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n
      <\/p>\n
    \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 ?jsx<\/code>:<\/p>\n
      <\/p>\n
    async function sendJSX(res, jsx) {   const clientJSX = await renderJSXToClientJSX(jsx);   const clientJSXString = JSON.stringify(clientJSX);   res.setHeader(\"Content-Type\", \"application\/json\");   res.end(clientJSXString); }<\/code><\/pre>\n
      <\/p>\n
    \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043c\u044b \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043e\u0442\u0432\u0435\u0442 \u0432 JSON.parse()<\/code> \u0434\u043b\u044f \u0435\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 JSX:<\/p>\n
      <\/p>\n
    async function fetchClientJSX(pathname) {   const response = await fetch(pathname + \"?jsx\");   const clientJSXString = await response.text();   const clientJSX = JSON.parse(clientJSXString);   return clientJSX; }<\/code><\/pre>\n
      <\/p>\n
    \u0415\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/a>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 JSX \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0442\u0430\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430:<\/p>\n
      <\/p>\n
    Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}).<\/code><\/pre>\n
      <\/p>\n
    \u0412\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u041e\u0431\u044a\u0435\u043a\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 JSON.stringify()<\/code>, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
      <\/p>\n
    {   $$typeof: Symbol.for(\"react.element\"),   type: 'html',   props: {     \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 JSON.parse()<\/code> \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e $$typeof<\/code> \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0438:<\/p>\n
      <\/p>\n
    {   type: 'html',   props: {     \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u0411\u0435\u0437 $$typeof: Symbol.for(\"react.element\")<\/code> React \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u043a \u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 \u0443\u0437\u0435\u043b JSX.<\/p>\n
      <\/p>\n
    \u042d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0437\u0430\u0449\u0438\u0442\u044b. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e React \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b JSON, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0438\u0437 \u0441\u0435\u0442\u0438, \u043a\u0430\u043a \u0442\u0435\u0433\u0438 JSX. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0442\u0438\u043f\u0430 symbol<\/code> (\u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Symbol.for('react.element')<\/code>) \u0443\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSON.stringify()<\/code>. \u042d\u0442\u043e \u0437\u0430\u0449\u0438\u0449\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 JSX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0431\u044b\u043b \u044f\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u043a\u043e\u0434\u043e\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
      <\/p>\n
    \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u0438 \u0443\u0437\u043b\u044b JSX \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u043c\u0438 (\u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435), \u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 $$typeof: Symbol.for(\"react.element\")<\/code>, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0435\u0433\u043e \u043d\u0435\u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u044c.<\/p>\n
      <\/p>\n
    \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. JSON.stringify()<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u044c (replacer function), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e JSON. \u0417\u0430\u043c\u0435\u043d\u044f\u0435\u043c Symbol.for('react.element')<\/code> \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \"$RE\"<\/code> \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435:<\/p>\n
      <\/p>\n
    async function sendJSX(res, jsx) {   \/\/ ...   const clientJSXString = JSON.stringify(clientJSX, stringifyJSX);   \/\/ ... }  function stringifyJSX(key, value) {   if (value === Symbol.for(\"react.element\")) {     \/\/ \u041c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0438\u043c\u0432\u043e\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443.     return \"$RE\"; \/\/ \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c. \u042f \u0432\u044b\u0431\u0440\u0430\u043b RE \u043a\u0430\u043a \u0430\u0431\u0431\u0440\u0435\u0432\u0438\u0430\u0442\u0443\u0440\u0443 React Element.   } else if (typeof value === \"string\" && value.startsWith(\"$\")) {     \/\/ \u0412\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d $ \u043a \u0441\u0442\u0440\u043e\u043a\u0435, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441 $.     return \"$\" + value;   } else {     return value;   } }<\/code><\/pre>\n
      <\/p>\n
    \u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c JSON.parse()<\/code> «\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0436\u0438\u0432\u043b\u0435\u043d\u0438\u044f» (reviver function) \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u043d\u044b \"$RE\"<\/code> \u043d\u0430 Symbol.for('react.element')<\/code> \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n
      <\/p>\n
    async function fetchClientJSX(pathname) {   \/\/ ...   const clientJSX = JSON.parse(clientJSXString, parseJSX);   \/\/ ... }  function parseJSX(key, value) {   if (value === \"$RE\") {     \/\/ \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435.     \/\/ \u0412\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 JSX \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f React.     return Symbol.for(\"react.element\");   } else if (typeof value === \"string\" && value.startsWith(\"$$\")) {     \/\/ \u042d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430, \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u0441 $. \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 $, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c.     return value.slice(1);   } else {     return value;   } }<\/code><\/pre>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a JSX \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435!<\/p>\n
      <\/p>\n
    \u0415\u0441\u043b\u0438 \u0432\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u043e\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0438\u043d\u043f\u0443\u0442 \u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439, \u043a\u0440\u043e\u043c\u0435 \u0441\u0430\u043c\u043e\u0439 \u043f\u0435\u0440\u0432\u043e\u0439. \u042d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e React \u043d\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c JSX \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c\u0443 HTML.<\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 5.3.2: \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 JSX \u0432 HTML<\/h4>\n
      <\/p>\n
    \u0423 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043d\u0435\u0434\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434:<\/p>\n
      <\/p>\n
    const root = hydrateRoot(document, getInitialClientJSX());  function getInitialClientJSX() {   return null; \/\/ TODO }<\/code><\/pre>\n
      <\/p>\n
    \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JSX, \u043d\u043e \u043e\u0442\u043a\u0443\u0434\u0430 \u0435\u0433\u043e \u0432\u0437\u044f\u0442\u044c?<\/p>\n
      <\/p>\n
    \u041d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 HTML, \u043d\u043e \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c React \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u043c \u0431\u044b\u043b \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 JSX \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u0443\u044e \u0440\u0435\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e HTML, \u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0432\u043e\u0434\u043e\u043f\u0430\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (waterfall).<\/p>\n
      <\/p>\n
    \u0412 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u043c SSR \u0441 React \u043c\u044b \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0441 \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439, \u043d\u043e \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u043b\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e JSX \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0434\u0430\u043d\u043d\u044b\u0435. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 (\u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043a\u043e\u0434, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u0442 \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 JSX.<\/p>\n
      <\/p>\n
    \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c JSX \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435:<\/p>\n
      <\/p>\n
    const root = hydrateRoot(document, getInitialClientJSX());  function getInitialClientJSX() {   const clientJSX = JSON.parse(window.__INITIAL_CLIENT_JSX_STRING__, reviveJSX);   return clientJSX; }<\/code><\/pre>\n
      <\/p>\n
    \u041c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e sendHTML<\/code> \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JSX \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e JSX \u0432 \u043a\u043e\u043d\u0435\u0446 HTML:<\/p>\n
      <\/p>\n
    async function sendHTML(res, jsx) {   let html = await renderJSXToHTML(jsx);    \/\/ \u0421\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c JSX \u043f\u043e\u0441\u043b\u0435 HTML \u0432\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (paint):   const clientJSX = await renderJSXToClientJSX(jsx);   const clientJSXString = JSON.stringify(clientJSX, stringifyJSX);   html += `<script>window.__INITIAL_CLIENT_JSX_STRING__ = `;   html += JSON.stringify(clientJSXString).replace(\/<\/g, \"\\\\u003c\");   html += `<\/script>`;   \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u043d\u043e\u0441\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u043b\u043a\u0438\u0445 \u043f\u0440\u0430\u0432\u043e\u043a<\/a> \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0443\u0437\u043b\u043e\u0432, \u0447\u0442\u043e\u0431\u044b React \u043c\u043e\u0433 \u0438\u0445 \u0433\u0438\u0434\u0440\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0435 \u0432 \u0438\u043d\u043f\u0443\u0442, \u043d\u0435 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u043c\u0438.<\/p>\n
      <\/p>\n
    \n
    <\/div>\n<\/div>\n
      <\/p>\n
    \u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0443\u0442\u0430! \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0434\u0435\u043b\u043e \u043d\u0435 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0438\u043d\u043f\u0443\u0442\u0435 \u2014 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u0435\u0441\u0442\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n
      <\/p>\n
    \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f RSC \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 JSX \u0432 HTML, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0442\u043b\u0438\u0447\u0438\u0439. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f RSC \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0447\u0430\u0441\u0442\u0438 JSX \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u0443\u0441\u043e\u043a \u0432 \u043a\u043e\u043d\u0446\u0435. \u0413\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 React \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 JSX, \u043d\u0435 \u043e\u0436\u0438\u0434\u0430\u044f \u043f\u0440\u0438\u0431\u044b\u0442\u0438\u044f \u0432\u0441\u0435\u0445 \u0447\u0430\u0441\u0442\u0435\u0439. RSC \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u0430\u043a \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 (\u043f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \"use client\"<\/code> \u0432 Next.js). \u0422\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432 HTML, \u043d\u043e \u0438\u0445 \u043a\u043e\u0434 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0431\u043e\u0440\u043a\u0443 (bundle) \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e JSON \u0434\u043b\u044f \u0438\u0445 \u043f\u0440\u043e\u043f\u043e\u0432. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c React \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0434\u043b\u044f \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u0438 (deduplication) \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043c\u0435\u0436\u0434\u0443 HTML \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439.<\/p><\/blockquote>\n
      <\/p>\n
    \u0428\u0430\u0433 6: \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a<\/h2>\n
      <\/p>\n
    \u041f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 RSC. \u041c\u044b \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0432\u0440\u043e\u0434\u0435 \u0441\u0442\u0440\u0438\u043c\u0438\u043d\u0433\u0430, \u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c\u0441\u044f \u043a \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 6.1: \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0434\u0435\u0434\u0443\u043f\u043b\u0438\u043a\u0430\u0446\u0438\u044e \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n
      <\/p>\n
    \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML:<\/p>\n
      <\/p>\n
    async function sendHTML(res, jsx) {   \/\/ <Router \/> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \"<html>...<\/html>\" (\u0441\u0442\u0440\u043e\u043a\u0443):   let html = await renderJSXToHTML(jsx);    \/\/ <Router \/> \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u0432 <html>...<\/html> (\u043e\u0431\u044a\u0435\u043a\u0442):   const clientJSX = await renderJSXToClientJSX(jsx);<\/code><\/pre>\n
      <\/p>\n
    \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e jsx<\/code> \u0437\u0434\u0435\u0441\u044c \u2014 \u044d\u0442\u043e <Router url=\"https:\/\/localhost:3000\" \/><\/code>.<\/p>\n
      <\/p>\n
    \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c renderJSXToHTML()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 Router<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u043a\u0438 HTML. \u041d\u043e \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 JSX, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u044d\u0442\u0438\u043c \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c renderJSXToClientJSX()<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043d\u043e\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 Router<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0442\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Feed<\/code> (\u043d\u043e\u0432\u043e\u0441\u0442\u043d\u0430\u044f \u043b\u0435\u043d\u0442\u0430). \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445 (data flow) \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d.<\/p>\n
      <\/p>\n
    \u0427\u0442\u043e \u0435\u0441\u043b\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e JSX?<\/p>\n
      <\/p>\n
    async function sendHTML(res, jsx) {   \/\/ 1. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c <Router \/> \u0432 <html>...<\/html> (\u043e\u0431\u044a\u0435\u043a\u0442):   const clientJSX = await renderJSXToClientJSX(jsx);<\/code><\/pre>\n
      <\/p>\n
    \u0412\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f. \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c HTML \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430:<\/p>\n
      <\/p>\n
    async function sendHTML(res, jsx) {   \/\/ 1. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c <Router \/> \u0432 <html>...<\/html> (\u043e\u0431\u044a\u0435\u043a\u0442):   const clientJSX = await renderJSXToClientJSX(jsx);   \/\/ 2. \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u044d\u0442\u043e\u0442 <html>...<\/html> \u0432 \"<html>...<\/html>\" (\u0441\u0442\u0440\u043e\u043a\u0443):   let html = await renderJSXToHTML(clientJSX);   \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437.<\/p>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 6.2: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c React \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 HTML<\/h3>\n
      <\/p>\n
    \u041a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f renderJSXToHTML()<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043d\u0435\u0435 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e JSX, renderJSXToHTML()<\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 React renderToString<\/a>:<\/p>\n
      <\/p>\n
    import { renderToString } from 'react-dom\/server';  \/\/ ...  async function sendHTML(res, jsx) {   const clientJSX = await renderJSXToClientJSX(jsx);   let html = renderToString(clientJSX);   \/\/ ...<\/code><\/pre>\n
      <\/p>\n
    \u0421\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n
      <\/p>\n
    \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c. \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u043e\u0432\u044b\u0445 \u0444\u0438\u0447 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b), \u043c\u044b \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b React, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a renderToString()<\/code> \u0438\u043b\u0438 hydrateRoot()<\/code>. \u041e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
      <\/p>\n
    \u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 React \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c renderToString()<\/code> \u0438 hydrateRoot()<\/code> \u0441 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <App \/><\/code>. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c (evaluate) «\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0435» \u0434\u0435\u0440\u0435\u0432\u043e JSX \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e renderJSXToClientJSX()<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c React.<\/p>\n
      <\/p>\n
    \u0414\u043b\u044f renderToString()<\/code> \u0438 hydrateRoot()<\/code> Router<\/code>, BlogIndexPage<\/code> \u0438 Footer<\/code> \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438. \u0412\u044b\u0437\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432 \u0434\u0435\u0440\u0435\u0432\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0438\u043c\u0438 JSX.<\/p>\n
      <\/p>\n
    \u0428\u0430\u0433 6.3: \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0434\u0432\u0430<\/h3>\n
      <\/p>\n
    \u041d\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0448\u0430\u0433\u0435 \u043c\u044b \u043e\u0442\u0434\u0435\u043b\u0438\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML:<\/p>\n
      <\/p>\n