import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Рендеринг на стороне сервера (SSR)",
  "children": [{
    "depth": 2,
    "value": "Скрипт гидрации",
    "children": []
  }, {
    "depth": 2,
    "value": "Асинхронный и потоковый SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Предостережения по SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Начало работы с SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Начало работы с созданием статических сайтов",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    code: "code",
    p: "p",
    pre: "pre",
    span: "span",
    em: "em",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "рендеринг-на-стороне-сервера-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#рендеринг-на-стороне-сервера-ssr",
        children: "#"
      }), "Рендеринг на стороне сервера (", jsx(_components.code, {
        children: "SSR"
      }), ")"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid обрабатывает серверный рендеринг, компилируя шаблоны JSX в сверхэффективный код добавления строк. Это может быть достигнуто с помощью плагина babel, с помощью аргумента ", jsx(_components.code, {
        children: "generate: 'ssr'"
      }), ". Для того, чтобы код мог подключиться после отправки с сервера на клиенте вам необходимо передать ", jsx(_components.code, {
        children: "hydratable: true"
      }), ", чтобы сгенерировать код, с ", jsx(_components.a, {
        href: "https://github.com/gatsbyjs/gatsby-ru/blob/master/docs/docs/react-hydration.md",
        children: "гидрацией"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Среды выполнения solid-js и solid-js/web меняются местами на нереактивные аналоги при работе с Node. Для других сред вам нужно будет связать код сервера с условным экспортом, установленным как ", jsx(_components.code, {
        children: "node"
      }), ". У большинства сборщиков кода (", jsx(_components.code, {
        children: "bundlers"
      }), ") есть способ сделать это. В общем, мы также рекомендуем использовать условия экспорта ", jsx(_components.code, {
        children: "solid"
      }), ", а также рекомендуется, чтобы библиотеки поставляли свой исходный код с экспортом ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Сборка для SSR определенно требует немного большей настройки, потому что мы будем генерировать 2 отдельных бандла. В записи клиента следует использовать ", jsx(_components.code, {
        children: "hydrate"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { hydrate } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "hydrate"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ")\n"]
      })
    }), "\n", jsx(_components.p, {
      children: jsxs(_components.em, {
        children: ["Примечание: рендеринг и гидрация должны происходить в главном компоненте (", jsx(_components.code, {
          children: "Entry"
        }), "). Это позволяет нам полностью описать наш интерфейс в JSX."]
      })
    }), "\n", jsx(_components.p, {
      children: "Сервер может использовать один из четырех вариантов рендеринга. Каждый вариант также создает JS код, который вставляется в заголовок документа."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { renderToString, renderToStringAsync, renderToNodeStream, renderToWebStream } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Синхронный рендеринг строки"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " html = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToString"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ")\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Асинхронный рендеринг строки"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " html = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToStringAsync"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ")\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// API-интерфейс Node Stream"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pipeToNodeWritable"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "App"
        }), ", res)\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// API веб-потока (например, Cloudflare Workers)"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { readable, writable } = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "TransformStream"
        }), "()\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pipeToWritable"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", writable)\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Для вашего удобства solid-js/web экспортирует флаг ", jsx(_components.code, {
        children: "isServer"
      }), ". Это полезно еще и для бандлеров, если нужно что-то выполнить на стороне только клиента/сервера."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { isServer } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (isServer) {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Только на сервере"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Только в браузере"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "скрипт-гидрации",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#скрипт-гидрации",
        children: "#"
      }), "Скрипт гидрации"]
    }), "\n", jsxs(_components.p, {
      children: ["Для постепенной гидрации даже до загрузки среды выполнения Solid на страницу необходимо вставить специальный скрипт. Его можно либо сгенерировать и вставить через ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), ", либо включить как часть JSX с помощью тега", jsx(_components.code, {
        children: "<HydrationScript />"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { generateHydrationScript } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " app = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToString"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ")\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " html = ", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`\n  <html lang=\"en\">\n    <head>\n      <title>🔥 Solid SSR 🔥</title>\n      <meta charset=\"UTF-8\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <link rel=\"stylesheet\" href=\"/styles.css\" />\n      ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${generateHydrationScript()}"
          }), "\n    </head>\n    <body>", jsx(_components.span, {
            className: "hljs-subst",
            children: "${app}"
          }), "</body>\n  </html>\n`"]
        }), "\n"]
      })
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HydrationScript"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "html"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "lang"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'en'"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "head"
            }), ">"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "title"
            }), ">"]
          }), "🔥 Solid SSR 🔥", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "title"
            }), ">"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "meta"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "charset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'UTF-8'"
            }), " />"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "meta"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "name"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'viewport'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "content"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'width=device-width, initial-scale=1.0'"
            }), " />"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "link"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rel"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'stylesheet'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "href"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'/styles.css'"
            }), " />"]
          }), "\n        ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HydrationScript"
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "head"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "body"
            }), ">"]
          }), "{/*... Приложение */}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "body"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "html"
            }), ">"]
          })]
        }), "\n  )\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["При гидрации из документа некоторые ресурсы, которые будут недоступны в клиентской части, также могут выдать ошибку. Solid предоставляет компонент ", jsx(_components.code, {
        children: "<NoHydration>"
      }), ", дочерние элементы которого будут нормально работать на сервере, но не будут гидрироваться в браузере."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n  {manifest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: [jsx(_components.span, {
            className: "hljs-params",
            children: "m"
          }), " =>"]
        }), " (\n    ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "link"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rel"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'modulepreload'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "href"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{m.href}"
            }), " />"]
          })
        }), "\n  ))}\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "асинхронный-и-потоковый-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#асинхронный-и-потоковый-ssr",
        children: "#"
      }), "Асинхронный и потоковый SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Эти механизмы основаны на знании Solid о том, как работает ваше приложение. Это достигается за счет использования ", jsx(_components.code, {
        children: "Suspense"
      }), " и API ", jsx(_components.code, {
        children: "Ресурсов"
      }), " на сервере вместо предварительной выборки и последующего рендеринга. Solid загружает компоненты по мере их доступности, как на сервере, так и на клиенте. Ваш код и шаблоны выполнения написаны точно так же."]
    }), "\n", jsxs(_components.p, {
      children: ["Асинхронный рендеринг ждет, пока все границы ", jsx(_components.code, {
        children: "Suspense"
      }), " не выполнятся, а затем отправляет результаты (или записывает их в файл в случае создания статического сайта)."]
    }), "\n", jsxs(_components.p, {
      children: ["Потоковая передача начинает сбрасывать синхронный контент в браузер, немедленно запуская рендеринг ", jsx(_components.code, {
        children: "fallback"
      }), " копонентов вашего ", jsx(_components.code, {
        children: "Suspense"
      }), " на сервере. Затем, когда асинхронные данные заканчиваются на сервере, он отправляет данные в том же потоке клиенту, чтобы успешно завершить процесс ", jsx(_components.code, {
        children: "Suspense"
      }), ", где браузер заменит все ", jsx(_components.code, {
        children: "fallback"
      }), " на реальный контент."]
    }), "\n", jsx(_components.p, {
      children: "Преимущество такого подхода:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["Серверу не нужно ждать ответа от асинхронных данных. ", jsx(_components.code, {
          children: "Ресурсы"
        }), " начнут загружаться в браузере раньше, и пользователь, соответственно, раньше увидит контент."]
      }), "\n", jsxs(_components.li, {
        children: ["По сравнению с клиентской выборкой, такой как ", jsx(_components.code, {
          children: "JAMStack"
        }), ", загрузка данных начинается на сервере немедленно и не требует ожидания загрузки клиентского JavaScript."]
      }), "\n", jsx(_components.li, {
        children: "Все данные сериализуются и автоматически передаются от сервера к клиенту."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "предостережения-по-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#предостережения-по-ssr",
        children: "#"
      }), "Предостережения по SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Решение Solid's для ", jsx(_components.code, {
        children: "Isomorphic SSR"
      }), " очень мощное, поскольку вы можете писать свой код универсально, и он будет работать одинаково в обеих средах. Однако есть ожидания, что это приведет к гидрации. В основном визуализированный вид на клиенте такой же, как и на сервере. Необязательно, чтобы текст был точным, но структурно разметка должна быть такой же."]
    }), "\n", jsxs(_components.p, {
      children: ["Мы используем маркеры, отображаемые на сервере, для сопоставления элементов и местоположений ресурсов на сервере. По этой причине Клиент и Сервер должны иметь одинаковые компоненты. Обычно это не проблема, учитывая, что Solid визуализирует одинаково на клиенте и сервере. Но в настоящее время нет средств для рендеринга на сервере чего-то, что не гидрировалось бы на клиенте. В настоящее время нет возможности частично гидрировать всю страницу и не создавать для нее маркеры гидрации. Все или ничего. Частичная гидрация (", jsx(_components.code, {
        children: "Partial Hydration"
      }), ") - это то, что мы хотим изучить в будущем."]
    }), "\n", jsxs(_components.p, {
      children: ["Наконец, все ресурсы должны быть определены в дереве рендеринга. Они автоматически сериализуются и обрабатываются в браузере, однако это работает, потому что методы ", jsx(_components.code, {
        children: "render"
      }), " или ", jsx(_components.code, {
        children: "pipeTo"
      }), " отслеживают ход визуализации. Это то, чего мы не можем сделать, если они созданы в изолированном контексте. Точно так же на сервере нет реактивности, поэтому не обновляйте ", jsx(_components.code, {
        children: "Сигналы"
      }), " при первоначальном рендеринге и ожидайте, что они будут отражаться выше по дереву. Хотя у нас есть границы приостановки, SSR Solid в основном работает сверху вниз."]
    }), "\n", jsxs(_components.h2, {
      id: "начало-работы-с-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#начало-работы-с-ssr",
        children: "#"
      }), "Начало работы с SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Конфигурации SSR непростые. У нас есть несколько примеров в пакете ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Однако в разработке находится новое средство для старта проекта ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), ", которое призвано сделать этот опыт более плавным."]
    }), "\n", jsxs(_components.h2, {
      id: "начало-работы-с-созданием-статических-сайтов",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#начало-работы-с-созданием-статических-сайтов",
        children: "#"
      }), "Начало работы с созданием статических сайтов"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " также поставляется с простой утилитой для создания статических или предварительно отрисованных сайтов. Прочтите README для получения дополнительной информации."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=server-9f7cb66b.js.map
