{"id":457031,"date":"2025-04-23T09:01:57","date_gmt":"2025-04-23T09:01:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=457031"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=457031","title":{"rendered":"<span>SSG \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c Static Site Generation (SSG) \u0432 React \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Next.js, TanStack Start, React Router \u0438 \u0438\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445. \u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c: \u044f \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044e \u0438\u0445 \u0447\u0435\u043c-\u0442\u043e \u00ab\u043f\u043b\u043e\u0445\u0438\u043c\u00bb \u0438 \u043d\u0435 \u0430\u0433\u0438\u0442\u0438\u0440\u0443\u044e \u043f\u0440\u043e\u0442\u0438\u0432 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412\u0441\u0451 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435: \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438\u0437-\u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435.<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>\u041e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0440\u0430\u0437\u0434\u0435\u043b \u00ab\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u00bb). \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c\u0438.<\/p>\n<p><strong>Static Site Generation (SSG)<\/strong> \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u043d\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0427\u0430\u0441\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0435\u0449\u0451 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 pre-rendering. \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c (<strong>SSR<\/strong>) \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c (<strong>CSR<\/strong>), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043b\u044f SEO \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0434\u0435\u0448\u0435\u0432\u0438\u0437\u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0438\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0451\u043d \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438.<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c75\/b64\/2a6\/c75b642a608f2667d7054a9cb1da8758.png\" width=\"1709\" height=\"2116\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c75\/b64\/2a6\/c75b642a608f2667d7054a9cb1da8758.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c75\/b64\/2a6\/c75b642a608f2667d7054a9cb1da8758.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0432\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 SSG \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c SSR \u0438 CSR. \u0412\u0435\u0434\u044c \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<ol>\n<li>\n<p><strong>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438<\/strong> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0438 \u0432\u044b\u043a\u0430\u0442\u0438\u043b\u0438\u0441\u044c, \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0443\u043b\u044f \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/strong> \u2014 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0443\u0436\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML<\/strong> \u2014 \u043e\u043d \u0443\u0436\u0435 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0420\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c Node.js-\u0441\u0435\u0440\u0432\u0435\u0440<\/strong> \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b (\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438 \u043f\u0430\u043c\u044f\u0442\u044c).<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 Node.js<\/strong> \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u043b\u0438 \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u0440\u043e\u0441\u0442\u043e\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e \u043a\u0438\u0431\u0435\u0440\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438. \u0412 SSR-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f \u0440\u0438\u0441\u043a XSS-\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0435 \u044d\u0442\u0438 \u044d\u0442\u0430\u043f\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u043e \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u043e\u0442\u043a\u0430\u0437\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 SSG, \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043e\u043d\u044b \u0441 \u0440\u043e\u043b\u0435\u0432\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0441\u043e\u043a\u043e\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u0430\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432:<\/p>\n<ul>\n<li>\n<p>\u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u0441 \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u043c \u0430\u0441\u0441\u043e\u0440\u0442\u0438\u043c\u0435\u043d\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044b \u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0439 \u043b\u0435\u043d\u0442\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u00a0\u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043d\u0430\u00a0Webpack \u0438\u043b\u0438\u00a0Vite. \u0412\u00a0\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Vite\u00a0\u2014 \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438 \u0432\u0430\u043c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SSR\u2011\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0440\u043e\u0443\u0442\u0435\u0440, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a\u00a0React Router. \u0410 \u0432\u043e\u0442 TanStack Router (\u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f TanStack Start) \u043d\u0435\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 SSR \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0API\u2011\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c TanStack Query \u0438\u043b\u0438\u00a0Redux Toolkit.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443\u00a0\u0432\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c <a href=\"https:\/\/github.com\/jquery-dlya-slabih\/ssg-example\"><u>\u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c<\/u><\/a>.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445 SSG, \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0443\u043b\u044f \u0438 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0443\u0434\u0435\u043b\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 package.json<\/h3>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0444\u0430\u0439\u043b\u0430\u00a0<code>package.json<\/code>\u00a0\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"dev\": \"exec vite\",   \"build\": \"vite build\" }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e:<\/p>\n<ol>\n<li>\n<p><strong>\u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438<\/strong> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u0437\u0430\u043f\u0443\u0441\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 production-\u0441\u0431\u043e\u0440\u043a\u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b <a href=\"https:\/\/github.com\/mysticatea\/npm-run-all\/blob\/master\/docs\/run-p.md\">\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e<\/a> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<ul>\n<li>\n<p>\u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0431\u043e\u0440\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0443\u0441\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"json\">  \"scripts\": {     \"dev\": \"exec vite\",     \"clean\": \"rm -rf dist\/\",     \"build:client\": \"vite build\",     \"build:server\": \"vite build --ssr src\/entry-server.tsx\",     \"ssg\": \"node dist\/server\/entry-server.js\",     \"build\": \"run-s clean build:* ssg\"   }<\/code><\/pre>\n<h3>vite.config.ts<\/h3>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Vite \u0434\u043b\u044f CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<pre><code class=\"typescript\">import tailwindcss from '@tailwindcss\/vite'; import react from '@vitejs\/plugin-react-swc'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths';  export default defineConfig({   plugins: [tsconfigPaths(), tailwindcss(), react()] });<\/code><\/pre>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0441 \u0444\u043b\u0430\u0433\u043e\u043c\u00a0<code>--ssr<\/code>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0<code>isSsrBuild<\/code>. \u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ol>\n<li>\n<p><code>outDir<\/code>: \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><code>copyPublicDir<\/code>:  \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043f\u043a\u0438 \u0441 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0443\u0436\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0431\u043e\u0440\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">import tailwindcss from '@tailwindcss\/vite'; import react from '@vitejs\/plugin-react-swc'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths';  export default defineConfig(({ isSsrBuild }) =&gt; {   if (isSsrBuild) {     return {       build: {         outDir: 'dist\/server',         copyPublicDir: false       },       plugins: [tsconfigPaths()]     };   } else {     return {       plugins: [tsconfigPaths(), tailwindcss(), react()]     };   } });<\/code><\/pre>\n<h3>index.html<\/h3>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b SSG \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u044f\u043a\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<ol>\n<li>\n<p><code>head\u2011outlet<\/code>\u00a0\u2014<strong> <\/strong>\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f\u00a0\u0432\u0441\u0442\u0430\u0432\u043a\u0438: \u043c\u0435\u0442\u0430\u2011\u0442\u0435\u0433\u043e\u0432, \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 <code>&lt;head&gt;<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>ssg\u2011outlet <\/code>\u2014 \u044f\u043a\u043e\u0440\u044c \u0434\u043b\u044f\u00a0\u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e React\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>rqs\u2011outlet<\/code> (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)\u00a0\u2014 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 API.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:<\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt;   &lt;head&gt;     &lt;meta charset=\"UTF-8\" \/&gt;     &lt;meta name=\"referrer\" content=\"strict-origin-when-cross-origin\" \/&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"48x48\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.svg\" sizes=\"any\" type=\"image\/svg+xml\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/cdn.dummyjson.com\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/&gt;     &lt;link       href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100..900;1,100..900&amp;display=swap\"       rel=\"stylesheet\"     \/&gt;     &lt;!--head-outlet--&gt;   &lt;\/head&gt;   &lt;body class=\"font-roboto antialiased\"&gt;     &lt;div id=\"root\"&gt;&lt;!--ssg-outlet--&gt;&lt;\/div&gt;     &lt;script&gt;       &lt;!--rqs-outlet--&gt;     &lt;\/script&gt;     &lt;script type=\"module\" src=\"\/src\/entry-client.tsx\"&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0444\u0430\u0439\u043b\u00a0<code>entry-client.tsx<\/code>.  \u0415\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<h3>entry-client.tsx<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443. <\/p>\n<pre><code class=\"typescript\">import { QueryClientProvider, HydrationBoundary, QueryClient } from '@tanstack\/react-query'; import { ReactQueryDevtools } from '@tanstack\/react-query-devtools'; import { StrictMode } from 'react'; import { createRoot, hydrateRoot } from 'react-dom\/client'; import { RouterProvider } from 'react-router\/dom'; import { createBrowserRouter } from 'react-router';  import createRoutes from '@\/createRoutes.tsx';  import '@\/index.css';  declare global {   interface Window {     __REACT_QUERY_STATE__: string;   } }  const queryClient = new QueryClient({   defaultOptions: {     queries: {       staleTime: Infinity     }   } });  const routes = createRoutes(queryClient); const router = createBrowserRouter(routes); const dehydratedState = window.__REACT_QUERY_STATE__; const container = document.getElementById('root');  if (container) {   const app = (     &lt;StrictMode&gt;       &lt;QueryClientProvider client={queryClient}&gt;         &lt;HydrationBoundary state={dehydratedState}&gt;           &lt;RouterProvider router={router} \/&gt;           &lt;ReactQueryDevtools \/&gt;         &lt;\/HydrationBoundary&gt;       &lt;\/QueryClientProvider&gt;     &lt;\/StrictMode&gt;   );    if (container.children.length) {     hydrateRoot(container, app);   } else {     const root = createRoot(container);     root.render(app);   } } else {   throw new Error('Container not found, must be HTMLElement'); }<\/code><\/pre>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0440\u0443\u0430\u0446\u0438\u044f <code>QueryClient<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>staleTime: Infinity<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a\u00a0API\u00a0\u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 SSG \u043f\u0435\u0440\u0435\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043f\u0438\u0441\u0430\u043b \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p><code>window.__REACT_QUERY_STATE__<\/code><strong> <\/strong>\u0432\u00a0\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u044f\u043a\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438\u00a0\u2014 \u0432\u043e\u0442 \u044d\u0442\u0430 \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u043d\u0438\u0445. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0434\u043b\u044f\u00a0\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u00a0\u0441\u0431\u043e\u0440\u043a\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u00a0\u0438\u0437\u00a0\u044f\u043a\u043e\u0440\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a\u00a0\u0432\u00a0SSG, \u0442\u0430\u043a \u0438 \u0432\u00a0CSR\u2011\u0440\u0435\u0436\u0438\u043c\u0435, \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041f\u0440\u0438\u00a0\u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f, \u0432\u00a0\u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0443\u043b\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 API \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439.<\/p>\n<h3>createRoutes.tsx<\/h3>\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u043d\u0435\u0435, \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>createRoutes<\/code>. \u0412 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0435\u0451 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<pre><code class=\"typescript\">import type { RouteObject } from 'react-router'; import type { QueryClient } from '@tanstack\/react-query';  import Layout from '@\/components\/layout'; import MainPage from '@\/pages\/main'; import ProductPage from '@\/pages\/product'; import { productsQuery, productQuery } from '@\/queries.ts';  const createRoutes = (queryClient: QueryClient): RouteObject[] =&gt; {   return [     {       path: '\/',       Component: Layout,       children: [         {           index: true,           Component: MainPage,           loader: async () =&gt; {             if (import.meta.env.SSR) {               await queryClient.prefetchQuery(productsQuery());             }           }         },         {           path: '\/products\/:id',           Component: ProductPage,           loader: async ({ params }) =&gt; {             if (import.meta.env.SSR) {               await queryClient.prefetchQuery(productQuery(params.id));             }           }         }       ]     }   ]; };  export default createRoutes;<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u0443\u044e React Router, \u043c\u044b \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u043d\u043a\u0438. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043b\u0435\u043d\u0434\u0438\u043d\u0433\u0430\u0445, \u044d\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u0441\u043c\u044b\u0441\u043b\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0434\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 5 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442\u043e\u0432. \u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \u043c\u0435\u0442\u043e\u0434 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430\u00a0<code>renderToString<\/code>\u00a0\u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0441\u0431\u043e\u0440\u043a\u0438, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\u00a0<a href=\"https:\/\/loadable-components.com\/\">loadable components<\/a>. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0451 \u2014 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0435\u0451 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445\u00a0\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 API React Router. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u00a0<code>import.meta.env.SSR<\/code>\u00a0\u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u043c\u00a0<code>--ssr<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432\u00a0<code>package.json<\/code>. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a API \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u043c\u044b \u043e\u0431\u0435\u0440\u043d\u0443\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u00a0<code>import.meta.env.SSR<\/code>.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<strong>\u00a0<\/strong><code>Layout<\/code>\u00a0\u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435. \u0412 \u043d\u0451\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0440\u0438\u0451\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<h3>components\/layout\/index.tsx<\/h3>\n<pre><code class=\"typescript\">import { Outlet } from 'react-router'; import { HTML_DIVIDER } from '@\/constants.ts';  const Layout = () =&gt; (   &lt;&gt;     {import.meta.env.SSR &amp;&amp; HTML_DIVIDER}     &lt;header className=\"p-20 text-center\"&gt;THIS IS TOPLINE&lt;\/header&gt;     &lt;Outlet \/&gt;     &lt;footer className=\"p-20 text-center\"&gt;THIS IS FOOTER&lt;\/footer&gt;   &lt;\/&gt; );  export default Layout;<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 <code>HTML_DIVIDER<\/code> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>!--pre--<\/code>. \u0415\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 JXS-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c JSX-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">function MainPage() {   const { data, isPending, isError } = useQuery(productsQuery());    if (isPending) {     return &lt;div className=\"animate-pulse p-50 font-bold text-pink-500\"&gt;Loading...&lt;\/div&gt;;   }    if (isError) {     return &lt;div className=\"p-50 font-bold text-red-400\"&gt;Something went wrong...&lt;\/div&gt;;   }    return (     &lt;&gt;       &lt;title&gt;Top products&lt;\/title&gt;       &lt;meta name=\"description\" content={`Count of top products ${data.length}`} \/&gt;       &lt;div className=\"px-20\"&gt;         {data?.map(({ title, brand, price, id }) =&gt; (           &lt;NavLink key={id} to={`\/products\/${id}`} className=\"cursor-pointer block hover:opacity-70\"&gt;             &lt;span&gt;{title}&lt;\/span&gt;             &lt;span className=\"ml-14\"&gt;{brand}&lt;\/span&gt;             &lt;span className=\"ml-14\"&gt;{price}&lt;\/span&gt;           &lt;\/NavLink&gt;         ))}       &lt;\/div&gt;     &lt;\/&gt;   ); }<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0435\u0433\u0438\u00a0<code>&lt;title&gt;<\/code> \u0438 <code>&lt;meta&gt;<\/code>\u00a0\u2014 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 React \u0432\u044b\u043d\u0435\u0441\u0435\u0442 \u0438\u0445 \u0432\u00a0\u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 <code>&lt;head&gt;<\/code> \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f <code>HTML_DIVIDER<\/code>.<\/p>\n<p>\u0421\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c47\/997\/79b\/c4799779bd04997d7d55ebf1d547bf95.png\" width=\"1711\" height=\"815\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c47\/997\/79b\/c4799779bd04997d7d55ebf1d547bf95.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c47\/997\/79b\/c4799779bd04997d7d55ebf1d547bf95.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0412\u0441\u044f \u044d\u0442\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430\u00a0\u0432 \u0444\u0430\u0439\u043b\u0435\u00a0<code>entry-server.tsx<\/code>, \u043a\u0443\u0434\u0430 \u043c\u044b \u0441\u043a\u043e\u0440\u043e \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c. <\/p>\n<blockquote>\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u00a0\u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e React. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u00a0\u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c Vite \u0434\u043b\u044f\u00a0\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Hot Module Replacement (HMR), \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u0431\u043e\u0435\u0432 \u0432\u00a0\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u041d\u0430\u00a0\u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u00a0\u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u0434\u0451\u0436\u043d\u0435\u0435.<\/p>\n<\/blockquote>\n<h3>entry-server.tsx<\/h3>\n<p>\u041c\u044b \u043f\u043e\u0434\u043e\u0448\u043b\u0438 \u043a\u00a0\u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u044d\u0442\u0430\u043f\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0\u0444\u0430\u0439\u043b\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 HTML\u2011\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u00a0\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u0412\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u0437\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 API \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a TanStack Query \u0438 React Router\u00a0\u2014 \u0438\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432\u00a0\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u0412\u00a0\u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u044f \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0443\u0441\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u00a0\u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441\u00a0\u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/p>\n<pre><code class=\"typescript\">import { QueryClientProvider, dehydrate, HydrationBoundary, QueryClient } from '@tanstack\/react-query'; import { ReactQueryDevtools } from '@tanstack\/react-query-devtools'; import fs from 'node:fs'; import path from 'node:path'; import { StrictMode } from 'react'; import { renderToString } from 'react-dom\/server'; import serialize from 'serialize-javascript'; import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router'; import type { StaticHandlerContext } from 'react-router';  import createRoutes from '@\/createRoutes.tsx'; import { HTML_DIVIDER } from '@\/constants';  const outDir = 'dist';  const routesForSSG = [   {     routePath: '\/',     fileName: '\/index.html'   },   ...[1, 2, 3, 4, 5].map((id) =&gt; ({     routePath: `\/products\/${id}`,     fileName: `\/products\/${id}\/index.html`   })) ];  function render() {   const template = fs.readFileSync(`${dist}\/index.html`, 'utf-8');    routesForSSG.forEach(async ({ routePath, fileName }) =&gt; {     console.info(`\u267b\ufe0f generating ${fileName}`);      const t0 = performance.now();      const request = new Request(`https:\/\/whatever.com${routePath}`);     const queryClient = new QueryClient();     const routes = createRoutes(queryClient);     const { query, dataRoutes } = createStaticHandler(routes);     const context = (await query(request)) as StaticHandlerContext;     const router = createStaticRouter(dataRoutes, context);     const rqs = dehydrate(queryClient);      const htmlString = renderToString(       &lt;StrictMode&gt;         &lt;QueryClientProvider client={queryClient}&gt;           &lt;HydrationBoundary state={rqs}&gt;             &lt;StaticRouterProvider router={router} context={context} \/&gt;             &lt;ReactQueryDevtools \/&gt;           &lt;\/HydrationBoundary&gt;         &lt;\/QueryClientProvider&gt;       &lt;\/StrictMode&gt;     );      const [head, body] = htmlString.split(HTML_DIVIDER);      const html = template       .replace('&lt;!--head-outlet--&gt;', head)       .replace('&lt;!--ssg-outlet--&gt;', body)       .replace('&lt;!--rqs-outlet--&gt;', `window.__REACT_QUERY_STATE__ = ${serialize(rqs)};`);      const folder = path.resolve(`${outDir}${fileName.replace('index.html', '')}`);      if (!fs.existsSync(folder)) {       fs.mkdirSync(folder, { recursive: true });     }      fs.writeFileSync(path.resolve(`${outDir}${fileName}`), html);      const t1 = performance.now();      console.info(`\u2705  ${fileName} processed in ${Math.round(t1 - t0)}ms`);   }); }  render();<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e\u00a0\u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f \u0432\u00a0\u0433\u043b\u0430\u0437\u0430, \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/www.npmjs.com\/package\/serialize-javascript\">serialize\u2011javascript<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0435\u0448\u0430\u0435\u0442 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0430\u0436\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443: \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435. \u0412\u00a0\u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0451 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0\u2014 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 XSS\u2011\u0430\u0442\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u00a0\u043c\u0430\u0441\u0441\u0438\u0432 <code>routesForSSG<\/code>, \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u00a0\u043d\u0435\u0433\u043e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f\u00a0\u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0412\u00a0\u043f\u043e\u043b\u0435 <code>fileName<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a\u00a0\u0444\u0430\u0439\u043b\u0443 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u00a0\u0435\u0433\u043e \u0438\u043c\u0435\u043d\u0435\u043c. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0434\u043b\u044f\u00a0\u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441\u00a0NGINX: \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u0447\u043d\u043e\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u044e \u043f\u0443\u0442\u0435\u0439, \u0441\u0435\u0440\u0432\u0435\u0440 \u0441\u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c URL \u0431\u0435\u0437\u00a0\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430.<\/p>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a. \u0414\u043b\u044f\u00a0\u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0439\u0442\u0438\u0441\u044c \u043f\u043e\u00a0\u0432\u0441\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u043c \u043d\u0430\u00a0\u043f\u0435\u0440\u0432\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438 <code>pages<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430\u00a0\u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n<\/blockquote>\n<p>\u041c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0430\u00a0\u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u0438\u0437 <code>renderToString<\/code> \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>HTML_DIVIDER<\/code>:<\/p>\n<ol>\n<li>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u00a0<code>&lt;head&gt;<\/code>\u00a0\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<\/li>\n<li>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0451\u043d \u0432 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0441\u0445\u0435\u043c\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432\u044b\u0448\u0435.<\/p>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044e<strong> <\/strong>\u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u00a0<code>window.__REACT_QUERY_STATE__<\/code>\u00a0(\u043e \u0447\u0451\u043c \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432 \u0433\u043b\u0430\u0432\u0435 \u043f\u0440\u043e\u00a0<code>entry-client.tsx<\/code>):<\/p>\n<ol>\n<li>\n<p>\u041f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043f\u043e URL \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u00a0<code>loader<\/code>\u00a0(\u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u0432 \u0433\u043b\u0430\u0432\u0435 \u043f\u0440\u043e\u00a0<code>createRoutes.tsx<\/code>).<\/p>\n<\/li>\n<li>\n<p><code>queryClient.prefetchQuery<\/code>\u00a0\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0420\u043e\u0443\u0442\u0435\u0440 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043c\u0438\u0441\u0430 \u043e\u0442\u00a0<code>loader<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>dehydrate<\/code>\u00a0\u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u0443\u0435\u043c\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0435\u0448\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p><code>serialize-javascript<\/code>\u00a0\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0441\u0442\u0430\u0432\u043a\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<\/li>\n<li>\n<p><code>HydrationBoundary<\/code>\u00a0\u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0417\u0430\u0432\u0435\u0440\u0448\u0430\u044e\u0449\u0438\u0439 \u044d\u0442\u0430\u043f:<\/strong> \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>npm run build<\/code>\u00a0\u2014 \u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e \u043a\u00a0\u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044e!<\/p>\n<blockquote>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0438\u0437\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/jquery-dlya-slabih\/ssg-example\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<\/blockquote>\n<h2>Code splitting<\/h2>\n<p>\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u0435\u0441\u044f\u0442 \u043c\u043d\u043e\u0433\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u043e\u043b\u0435\u0435 50\u00a0\u041a\u0411) \u0438\u043b\u0438\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u044f\u0436\u0451\u043b\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438? \u0412\u00a0\u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0442\u043e\u0438\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430\u00a0\u0447\u0430\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u00a0\u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u00a0\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u00a0\u043a\u043e\u0434\u0435 \u0434\u043b\u044f\u00a0\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u00a0\u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u00a0loadable components, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0441\u00a0\u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432<\/h3>\n<p>\u0414\u043b\u044f\u00a0\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u0432\u00a0\u0444\u0430\u0439\u043b <code>createRoutes.tsx<\/code><strong>.<\/strong> \u041f\u0435\u0440\u0432\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>lazy<\/code> \u0438\u0437\u00a0React. \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430\u00a0\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <code>lazy<\/code>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043d\u0430\u00a0\u0447\u0430\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u00a0\u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<pre><code class=\"typescript\">import type { RouteObject } from 'react-router'; import type { QueryClient } from '@tanstack\/react-query'; import { lazy } from 'react';  import Layout from '@\/components\/layout'; import { productsQuery, productQuery } from '@\/queries.ts';  const createRoutes = (queryClient: QueryClient): RouteObject[] =&gt; {   return [     {       path: '\/',       Component: Layout,       children: [         {           index: true,           Component: lazy(() =&gt; import('@\/pages\/main')),           loader: async () =&gt; {             if (import.meta.env.SSR) {               await queryClient.prefetchQuery(productsQuery());             }           }         },         {           path: '\/products\/:id',           Component: lazy(() =&gt; import('@\/pages\/product')),           loader: async ({ params }) =&gt; {             if (import.meta.env.SSR) {               await queryClient.prefetchQuery(productQuery(params.id));             }           }         }       ]     }   ]; };  export default createRoutes;<\/code><\/pre>\n<h3>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e renderToPipeableStream<\/h3>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443\u00a0<code>renderToString<\/code>\u00a0\u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u0435, \u043c\u044b \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u043d\u0430\u00a0<code>renderToPipeableStream<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043c\u044b:<\/p>\n<ol>\n<li>\n<p>\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043f\u043e\u0442\u043e\u043a \u0432 \u043f\u0430\u043c\u044f\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0442\u0435 \u0436\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u0438 \u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">import { QueryClientProvider, dehydrate, HydrationBoundary, QueryClient } from '@tanstack\/react-query'; import { ReactQueryDevtools } from '@tanstack\/react-query-devtools'; import fs from 'node:fs'; import path from 'node:path'; import { Writable } from 'node:stream'; import { StrictMode } from 'react'; import { renderToPipeableStream } from 'react-dom\/server'; import serialize from 'serialize-javascript'; import { createStaticHandler, createStaticRouter, StaticRouterProvider } from 'react-router'; import type { StaticHandlerContext } from 'react-router';  import createRoutes from '@\/createRoutes.tsx'; import { HTML_DIVIDER } from '@\/constants';  const outDir = 'dist';  const routesForSSG = [   {     routePath: '\/',     fileName: '\/index.html'   },   ...[1, 2, 3, 4, 5].map((id) =&gt; ({     routePath: `\/products\/${id}`,     fileName: `\/products\/${id}\/index.html`   })) ];  function render() {   const template = fs.readFileSync(`${dist}\/index.html`, 'utf-8');    routesForSSG.forEach(async ({ routePath, fileName }) =&gt; {     console.info(`\u267b\ufe0f generating ${fileName}`);      const t0 = performance.now();      const request = new Request(`https:\/\/whatever.com${routePath}`);     const queryClient = new QueryClient();     const routes = createRoutes(queryClient);     const { query, dataRoutes } = createStaticHandler(routes);     const context = (await query(request)) as StaticHandlerContext;     const router = createStaticRouter(dataRoutes, context);     const state = dehydrate(queryClient);      const { pipe } = renderToPipeableStream(       &lt;StrictMode&gt;         &lt;QueryClientProvider client={queryClient}&gt;           &lt;HydrationBoundary state={state}&gt;             &lt;StaticRouterProvider router={router} context={context} \/&gt;             &lt;ReactQueryDevtools \/&gt;           &lt;\/HydrationBoundary&gt;         &lt;\/QueryClientProvider&gt;       &lt;\/StrictMode&gt;,       {         onAllReady() {           const chunks: string[] = [];           const writeable = new Writable({             write(chunk, _encoding, callback) {               chunks.push(chunk.toString());               callback();             }           });            writeable.on('finish', () =&gt; {             const [head, body] = chunks.join('').split(HTML_DIVIDER);             const rqs = serialize(state);              const html = template               .replace('&lt;!--head-outlet--&gt;', head)               .replace('&lt;!--ssg-outlet--&gt;', body)               .replace('&lt;!--rqs-outlet--&gt;', `window.__REACT_QUERY_STATE__ = ${rqs};`);              const folder = path.resolve(`${outDir}${fileName.replace('index.html', '')}`);              if (!fs.existsSync(folder)) {               fs.mkdirSync(folder, { recursive: true });             }              fs.writeFileSync(path.resolve(`${outDir}${fileName}`), html);              const t1 = performance.now();              console.info(`\u2705  ${fileName} processed in ${Math.round(t1 - t0)}ms`);           });            pipe(writeable);         }       }     );   }); }  render();<\/code><\/pre>\n<p>\u0423\u0440\u0430. \u041d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0437\u00a0\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439\u00a0\u2014 \u0432\u00a0\u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0431\u0435\u0437\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 loadable components.<\/p>\n<p>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0438\u0437\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 <a href=\"https:\/\/github.com\/jquery-dlya-slabih\/ssg-example\/tree\/lazy\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0418\u0442\u043e\u0433<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <strong>Static Site Generation (SSG)<\/strong> \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e React \u0438 Vite (webpack \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c <strong>\u0431\u044b\u0441\u0442\u0440\u044b\u0435, SEO\u2011\u0434\u0440\u0443\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435<\/strong> \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u0441\u00a0\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0445\u043e\u0434\u0430\u043c\u0438. <\/p>\n<p>\u041a\u0430\u043a\u00a0\u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0433\u0438\u0431\u043a\u043e\u0439. \u0418 \u0435\u0441\u043b\u0438 \u0432\u00a0\u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0443\u00a0\u0432\u0430\u0441 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442 \u0432\u043e\u043f\u0440\u043e\u0441\u044b: <\/p>\n<blockquote>\n<p><em>\u041c\u043e\u0436\u043d\u043e\u00a0\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c SEO \u0438 UX \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u0435\u00a0\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u00a0CSR \u043d\u0430\u00a0SSR? \u0410 \u0441\u0434\u0435\u043b\u0430\u0442\u044c SSG \u043d\u0435 \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u044f \u043d\u0430 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c framework?<\/em><\/p>\n<\/blockquote>\n<p>\u0412\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c: <em>\u00ab\u0414\u0430\u00bb<\/em>.<\/p>\n<p>\u0415\u0441\u043b\u0438\u00a0\u0436\u0435 \u0443\u00a0\u0432\u0430\u0441 \u0443\u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0451\u043d \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u0435\u043d\u0434\u0438\u043d\u0433 \u0431\u0435\u0437\u00a0\u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438 \u043d\u0430\u00a0SSR, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043f\u043e\u0432\u043e\u0434 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u00a0\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0441\u0432\u043e\u0431\u043e\u0434\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b (\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438 \u043f\u0430\u043c\u044f\u0442\u044c) \u0438 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043e\u0442\u0434\u0430\u0447\u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430\u00a0\u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/companies\/domclick\/articles\/902938\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043b\u0438 \u0432\u044b SSG?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">25% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, \u0447\u0435\u0440\u0435\u0437 Next.js.<\/span><span class=\"tm-article-poll__answer-votes\">1<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 25%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">0% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, \u0447\u0435\u0440\u0435\u0437 TanStack Start \u0438\u043b\u0438 React Router as framework (ex Remix).<\/span><span class=\"tm-article-poll__answer-votes\">0<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 0%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">25% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, \u0447\u0435\u0440\u0435\u0437 Gatsby.<\/span><span class=\"tm-article-poll__answer-votes\">1<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 25%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">0% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, Vike.<\/span><span class=\"tm-article-poll__answer-votes\">0<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 0%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">50% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, \u0434\u0440\u0443\u0433\u043e\u0435.<\/span><span class=\"tm-article-poll__answer-votes\">2<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 50%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">25% <\/span><span class=\"tm-article-poll__answer-label\">\u041d\u0435\u0442.<\/span><span class=\"tm-article-poll__answer-votes\">1<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 25%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 4 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.    \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0441\u044f 1 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/902938\/\"> https:\/\/habr.com\/ru\/articles\/902938\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0425\u0430\u0431\u0440!<\/p>\n<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e\u043c, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c Static Site Generation (SSG) \u0432 React \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Next.js, TanStack Start, React Router \u0438 \u0438\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445. \u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c: \u044f \u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044e \u0438\u0445 \u0447\u0435\u043c-\u0442\u043e \u00ab\u043f\u043b\u043e\u0445\u0438\u043c\u00bb \u0438 \u043d\u0435 \u0430\u0433\u0438\u0442\u0438\u0440\u0443\u044e \u043f\u0440\u043e\u0442\u0438\u0432 \u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412\u0441\u0451 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435: \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438\u0437-\u0437\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435.<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043f\u0440\u0435\u0434\u0438\u0441\u043b\u043e\u0432\u0438\u0435<\/h2>\n<p>\u041e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u0440\u0430\u0437\u0434\u0435\u043b \u00ab\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430\u00bb). \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c\u0438.<\/p>\n<p><strong>Static Site Generation (SSG)<\/strong> \u2014 \u044d\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u043d\u0435 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0427\u0430\u0441\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0435\u0449\u0451 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 pre-rendering. \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u043c (<strong>SSR<\/strong>) \u0438\u043b\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c (<strong>CSR<\/strong>), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0432\u044b\u0441\u043e\u043a\u0430\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0433\u043e\u0442\u043e\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043b\u044f SEO \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0434\u0435\u0448\u0435\u0432\u0438\u0437\u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<\/ol>\n<p>\u041d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0438\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0451\u043d \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0443\u043c\u0430\u044e, \u0432\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 SSG \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c SSR \u0438 CSR. \u0412\u0435\u0434\u044c \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n<ol>\n<li>\n<p><strong>\u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438<\/strong> \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u0430 \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0438 \u0432\u044b\u043a\u0430\u0442\u0438\u043b\u0438\u0441\u044c, \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u0443\u043b\u044f \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e<\/strong> \u2014 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0443\u0436\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c HTML<\/strong> \u2014 \u043e\u043d \u0443\u0436\u0435 \u0431\u044b\u043b \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p><strong>\u0420\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c Node.js-\u0441\u0435\u0440\u0432\u0435\u0440<\/strong> \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u043f\u043b\u0430\u0447\u0438\u0432\u0430\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b (\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0438 \u043f\u0430\u043c\u044f\u0442\u044c).<\/p>\n<\/li>\n<li>\n<p><strong>\u0411\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 Node.js<\/strong> \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438\u043b\u0438 \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u0440\u043e\u0441\u0442\u043e\u044e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435\u043b\u044c\u0437\u044f \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e \u043a\u0438\u0431\u0435\u0440\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438. \u0412 SSR-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f \u0440\u0438\u0441\u043a XSS-\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0432\u0441\u0435 \u044d\u0442\u0438 \u044d\u0442\u0430\u043f\u044b \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043d\u043e \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u043e\u0442\u043a\u0430\u0437\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438 SSG, \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e:<\/p>\n<ol>\n<li>\n<p>\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0437\u043e\u043d\u044b \u0441 \u0440\u043e\u043b\u0435\u0432\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c\u044e;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0441\u043e\u043a\u043e\u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u0430\u043a\u0438\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432:<\/p>\n<ul>\n<li>\n<p>\u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0430\u0431\u0438\u043d\u0435\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u0441 \u043e\u0431\u0448\u0438\u0440\u043d\u044b\u043c \u0430\u0441\u0441\u043e\u0440\u0442\u0438\u043c\u0435\u043d\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u043d\u043e\u0432\u043e\u0441\u0442\u043d\u044b\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044b \u0441 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0439 \u043b\u0435\u043d\u0442\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<h2>\u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u00a0\u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043d\u0430\u00a0Webpack \u0438\u043b\u0438\u00a0Vite. \u0412\u00a0\u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Vite\u00a0\u2014 \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u044f \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438 \u0432\u0430\u043c.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SSR\u2011\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0440\u043e\u0443\u0442\u0435\u0440, \u0442\u0430\u043a\u043e\u0439 \u043a\u0430\u043a\u00a0React Router. \u0410 \u0432\u043e\u0442 TanStack Router (\u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f TanStack Start) \u043d\u0435\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 SSR \u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0414\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0API\u2011\u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u00a0\u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c TanStack Query \u0438\u043b\u0438\u00a0Redux Toolkit.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443\u00a0\u0432\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c <a href=\"https:\/\/github.com\/jquery-dlya-slabih\/ssg-example\"><u>\u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c<\/u><\/a>.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u0445 SSG, \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0443\u043b\u044f \u0438 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0443\u0434\u0435\u043b\u044e \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 package.json<\/h3>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0444\u0430\u0439\u043b\u0430\u00a0<code>package.json<\/code>\u00a0\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"json\">\"scripts\": {   \"dev\": \"exec vite\",   \"build\": \"vite build\" }<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e:<\/p>\n<ol>\n<li>\n<p><strong>\u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438<\/strong> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><strong>\u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430;<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u0437\u0430\u043f\u0443\u0441\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/strong><\/p>\n<\/li>\n<\/ol>\n<p>\u0410 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 production-\u0441\u0431\u043e\u0440\u043a\u0438 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b <a href=\"https:\/\/github.com\/mysticatea\/npm-run-all\/blob\/master\/docs\/run-p.md\">\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e<\/a> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<ul>\n<li>\n<p>\u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0431\u043e\u0440\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0437\u0430\u043f\u0443\u0441\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"json\">  \"scripts\": {     \"dev\": \"exec vite\",     \"clean\": \"rm -rf dist\/\",     \"build:client\": \"vite build\",     \"build:server\": \"vite build --ssr src\/entry-server.tsx\",     \"ssg\": \"node dist\/server\/entry-server.js\",     \"build\": \"run-s clean build:* ssg\"   }<\/code><\/pre>\n<h3>vite.config.ts<\/h3>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f Vite \u0434\u043b\u044f CSR-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<pre><code class=\"typescript\">import tailwindcss from '@tailwindcss\/vite'; import react from '@vitejs\/plugin-react-swc'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths';  export default defineConfig({   plugins: [tsconfigPaths(), tailwindcss(), react()] });<\/code><\/pre>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0441 \u0444\u043b\u0430\u0433\u043e\u043c\u00a0<code>--ssr<\/code>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e\u00a0<code>isSsrBuild<\/code>. \u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<ol>\n<li>\n<p><code>outDir<\/code>: \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u043e\u0442\u043b\u0438\u0447\u043d\u0443\u044e \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p><code>copyPublicDir<\/code>:  \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043f\u043a\u0438 \u0441 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u0443\u0436\u0435 \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0431\u043e\u0440\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"typescript\">import tailwindcss from '@tailwindcss\/vite'; import react from '@vitejs\/plugin-react-swc'; import { defineConfig } from 'vite'; import tsconfigPaths from 'vite-tsconfig-paths';  export default defineConfig(({ isSsrBuild }) =&gt; {   if (isSsrBuild) {     return {       build: {         outDir: 'dist\/server',         copyPublicDir: false       },       plugins: [tsconfigPaths()]     };   } else {     return {       plugins: [tsconfigPaths(), tailwindcss(), react()]     };   } });<\/code><\/pre>\n<h3>index.html<\/h3>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b SSG \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 HTML-\u0444\u0430\u0439\u043b, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u044f\u043a\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<ol>\n<li>\n<p><code>head\u2011outlet<\/code>\u00a0\u2014<strong> <\/strong>\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f\u00a0\u0432\u0441\u0442\u0430\u0432\u043a\u0438: \u043c\u0435\u0442\u0430\u2011\u0442\u0435\u0433\u043e\u0432, \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 <code>&lt;head&gt;<\/code>;<\/p>\n<\/li>\n<li>\n<p><code>ssg\u2011outlet <\/code>\u2014 \u044f\u043a\u043e\u0440\u044c \u0434\u043b\u044f\u00a0\u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0433\u043e React\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p><code>rqs\u2011outlet<\/code> (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)\u00a0\u2014 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 API.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:<\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt;   &lt;head&gt;     &lt;meta charset=\"UTF-8\" \/&gt;     &lt;meta name=\"referrer\" content=\"strict-origin-when-cross-origin\" \/&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.ico\" sizes=\"48x48\" \/&gt;     &lt;link rel=\"icon\" href=\"\/favicon.svg\" sizes=\"any\" type=\"image\/svg+xml\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/cdn.dummyjson.com\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/&gt;     &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/&gt;     &lt;link       href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100..900;1,100..900&amp;display=swap\"       rel=\"stylesheet\"     \/&gt;     &lt;!--head-outlet--&gt;   &lt;\/head&gt;   &lt;body class=\"font-roboto antialiased\"&gt;     &lt;div id=\"root\"&gt;&lt;!--ssg-outlet--&gt;&lt;\/div&gt;     &lt;script&gt;       &lt;!--rqs-outlet--&gt;     &lt;\/script&gt;     &lt;script type=\"module\" src=\"\/src\/entry-client.tsx\"&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0444\u0430\u0439\u043b\u00a0<code>entry-client.tsx<\/code>.  \u0415\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<h3>entry-client.tsx<\/h3>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0443. <\/p>\n<pre><code class=\"typescript\">import { QueryClientProvider, HydrationBoundary, QueryClient } from '@tanstack\/react-query'; import { ReactQueryDevtools } from '@tanstack\/react-query-devtools'; import { StrictMode } from 'react'; import { createRoot, hydrateRoot } from 'react-dom\/client'; import { RouterProvider } from 'react-router\/dom'; import { createBrowserRouter } from 'react-router';  import createRoutes from '@\/createRoutes.tsx';  import '@\/index.css';  declare global {   interface Window {     __REACT_QUERY_STATE__: string;   } }  const queryClient = new QueryClient({   defaultOptions: {     queries: {       staleTime: Infinity     }   } });  const routes = createRoutes(queryClient); const router = createBrowserRouter(routes); const dehydratedState = window.__REACT_QUERY_STATE__; const container = document.getElementById('root');  if (container) {   const app = (     &lt;StrictMode&gt;       &lt;QueryClientProvider client={queryClient}&gt;         &lt;HydrationBoundary state={dehydratedState}&gt;           &lt;RouterProvider router={router} \/&gt;           &lt;ReactQueryDevtools \/&gt;         &lt;\/HydrationBoundary&gt;       &lt;\/QueryClientProvider&gt;     &lt;\/StrictMode&gt;   );    if (container.children.length) {     hydrateRoot(container, app);   } else {     const root = createRoot(container);     root.render(app);   } } else {   throw new Error('Container not found, must be HTMLElement'); }<\/code><\/pre>\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0440\u0443\u0430\u0446\u0438\u044f <code>QueryClient<\/code> \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <code>staleTime: Infinity<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a\u00a0API\u00a0\u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437\u00a0\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 SSG \u043f\u0435\u0440\u0435\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f\u043c\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043e\u00a0\u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043f\u0438\u0441\u0430\u043b \u0440\u0430\u043d\u0435\u0435.<\/p>\n<\/li>\n<li>\n<p><code>window.__REACT_QUERY_STATE__<\/code><strong> <\/strong>\u0432\u00a0\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0443\u043d\u043a\u0442\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u044f\u043a\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438\u00a0\u2014 \u0432\u043e\u0442 \u044d\u0442\u0430 \u043a\u0430\u043a\u00a0\u0440\u0430\u0437 \u043e\u0434\u043d\u0430 \u0438\u0437\u00a0\u043d\u0438\u0445. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0434\u043b\u044f\u00a0\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u00a0\u0441\u0431\u043e\u0440\u043a\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a\u00a0\u0438\u0437\u00a0\u044f\u043a\u043e\u0440\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0441\u00a0\u0434\u0430\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a\u00a0\u0432\u00a0SSG, \u0442\u0430\u043a \u0438 \u0432\u00a0CSR\u2011\u0440\u0435\u0436\u0438\u043c\u0435, \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u00a0\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041f\u0440\u0438\u00a0\u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0433\u0438\u0434\u0440\u0430\u0442\u0430\u0446\u0438\u044f, \u0432\u00a0\u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0443\u043b\u044f.<\/p>\n<\/li>\n<\/ul>\n<p>\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 API \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0439.<\/p>\n<h3>createRoutes.tsx<\/h3>\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u043d\u0435\u0435, \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>createRoutes<\/code>. \u0412 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0435\u0451 \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<pre><code class=\"typescript\">import type { RouteObject } from 'react-router'; import type { QueryClient } from '@tanstack\/react-query';  import Layout from '@\/components\/layout'; import MainPage from '@\/pages\/main'; import ProductPage from '@\/pages\/product'; import { productsQuery, productQuery } from '@\/queries.ts';  const createRoutes = (queryClient: QueryClient): RouteObject[] =&gt; {   return [     {       path: '\/',       Component: Layout,       children: [<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-457031","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/457031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=457031"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/457031\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=457031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=457031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=457031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}