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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Serverseitiges Rendering",
  "children": [{
    "depth": 2,
    "value": "Hydrations-Script",
    "children": []
  }, {
    "depth": 2,
    "value": "Asynchrones und Streaming SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "SSR Caveats",
    "children": []
  }, {
    "depth": 2,
    "value": "Den Anfang machen mit SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Den Anfang mit statischer Seitengenerierung machen",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    pre: "pre",
    span: "span",
    em: "em",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "serverseitiges-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#serverseitiges-rendering",
        children: "#"
      }), "Serverseitiges Rendering"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid handhabt serverseitiges Rendering, indem es JSX-Templates zu extrem effizientem String-anfügendem Code rendert. Das kann mit dem Babel-Plugin erreicht werden, oder indem man ", jsx(_components.code, {
        children: "generate: ssr"
      }), " durchreicht. Sowohl für Client als auch Server muss ", jsx(_components.code, {
        children: "hydratable: true"
      }), " konfiguriert sein, damit mit Hydration kompatibler Code erzeugt wird."]
    }), "\n", jsxs(_components.p, {
      children: ["Die ", jsx(_components.code, {
        children: "solid-js"
      }), " und ", jsx(_components.code, {
        children: "solid-js/web"
      }), " Laufzeit-Umgebungen werden mit nicht-reaktiven Entsprechungen getauscht, wenn sie in einer node-Umgebung laufen. Für andere Umgebungen muss man den Server-Code mit conditionalen Exporten auf ", jsx(_components.code, {
        children: "node"
      }), " gesetzt bündeln. Die meisten Code-Bundler haben einen Weg, dies zu tun. Generell empfehlen wir, außerdem die ", jsx(_components.code, {
        children: "solid"
      }), " Export-Konditionen zu benutzen und dass Libraries ihren Code unter dem ", jsx(_components.code, {
        children: "solid"
      }), " export verteilen."]
    }), "\n", jsxs(_components.p, {
      children: ["Für SSR zu bauen, benötigt definitiv mehr Konfiguration, da wir 2 separate Bündel bauen. Das Client-Script sollte ", jsx(_components.code, {
        children: "hydrate"
      }), " benutzen:"]
    }), "\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: jsx(_components.em, {
        children: "Hinweis: Es ist möglich, vom document-Root aus zu rendern und zu hydrieren. Das erlaubt es uns, den gesamten View in JSX zu beschreiben."
      })
    }), "\n", jsx(_components.p, {
      children: "Das Server-Script kann eine der vier Render-Methoden verwenden, die von Solid zur Verfügung gestellt werden. Jede erzeugt die Ausgabe und das Script-Tag, das in den Kopf des Dokuments eingefügt wird."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " {\n  renderToString,\n  renderToStringAsync,\n  renderToNodeStream,\n  renderToWebStream,\n} ", 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: "// Synchrones string rendering"
        }), "\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: "// Asynchrones string rendering"
        }), "\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: "// Node Stream API"
        }), "\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: "// Web Stream API (etwa wie 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: ["Bequemer weise exportiert ", jsx(_components.code, {
        children: "solid-js/web"
      }), " ein ", jsx(_components.code, {
        children: "isServer"
      }), "-Flag. Das ist nützlich, da viele JS-Bundler in der Lage sind, unbenutzten Code innerhalb von Abfragen dieses Flags mit Tree Shaking zu entfernen und imports, die nur von diesem Code genutzt werden, aus dem Client-Code herauszulassen."]
    }), "\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: "// das hier wird nur auf dem Server ausgeführt"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// das hier wird nur im Browser ausgeführt"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "hydrations-script",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#hydrations-script",
        children: "#"
      }), "Hydrations-Script"]
    }), "\n", jsxs(_components.p, {
      children: ["Um progressiv zu Hydrieren, noch before Solids Laufzeitumgebung geladen ist, muss ein spezielles Script in die Seite eingefügt werden. Es kann entweder generiert und per ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " eingefügt werden oder als Teil des JSX, indem man das ", jsx(_components.code, {
        children: "<HydrationScript />"
      }), "-Tag benutzt."]
    }), "\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"
            }), ">"]
          }), "{/*... Rest der App*/}", 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: ["Wenn man vom document aus hydriert, kann das Einfügen von Ressourcen, die noch nicht verfügbar sind, Dinge durcheinander bringen. Solid hat dafür eine ", jsx(_components.code, {
        children: "<NoHydration>"
      }), "-Komponente, deren Kinder ganz normal auf dem Server funktionieren, aber nicht im Browser hydriert werden."]
    }), "\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: "asynchrones-und-streaming-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#asynchrones-und-streaming-ssr",
        children: "#"
      }), "Asynchrones und Streaming SSR"]
    }), "\n", jsx(_components.p, {
      children: "Diese Mechanismen bauen auf Solids Wissen darüber auf, wie Deine Anwendung funktioniert. Das macht es, indem Suspense und die Resource-API auf dem Server verwendet wird, statt erst die Ressourcen zu laden und dann erst zu rendern. Solid rendert auf dem Server genauso wie auf dem Client. Dein Code und die Ausführungsmuster sind einfach auf die selbe Weise geschrieben."
    }), "\n", jsx(_components.p, {
      children: "Async rendering waits until all Suspense boundaries resolve and then sends the results (or writes them to a file in the case of Static Site Generation)."
    }), "\n", jsx(_components.p, {
      children: "Streaming starts flushing synchronous content to the browser immediately rendering your Suspense Fallbacks on the server. Then as the async data finishes on the server it sends the data over the same stream to the client to resolve Suspense where the browser finishes the job and replaces the fallback with real content."
    }), "\n", jsx(_components.p, {
      children: "The advantage of this approach:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Server doesn't have to wait for Async data to respond. Assets can start loading sooner in the browser, and the user can start seeing content sooner."
      }), "\n", jsx(_components.li, {
        children: "Compared to client fetching like JAMStack, data loading starts on the server immediately and doesn't have to wait for client JavaScript to load."
      }), "\n", jsx(_components.li, {
        children: "All data is serialized and transported from server to client automatically."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "ssr-caveats",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ssr-caveats",
        children: "#"
      }), "SSR Caveats"]
    }), "\n", jsx(_components.p, {
      children: "Solids isomorphische SSR-Lösung ist sehr mächtig, so dass man die Anforderungen für beide Umgebungen im gleichen Code ausdrücken kann, der in beiden Umgebungen gleichermaßen läuft. Allerdings führt das zu gewissen Erwartungen in Bezug auf Hydration, vor allem dass der gerenderte View im Client der gleiche ist, der auch auf dem Server gerendert würde. Es muss nicht exakt der gleiche sein, was den Text angeht, aber die Struktur des Markups sollte gleich sein."
    }), "\n", jsx(_components.p, {
      children: "Wir benutzen Markierungen, die vom Server gerendert werden, um Elemente und Ressourcen auf dem Server abzugleichen. Aus diesem Grund sollten Server und Client die gleichen Komponenten haben. Das ist normalerweise kein Problem, da Solid auf die gleiche Art auf dem Server und auf dem Client rendert. Aber derzeit gibt es noch keinen Weg, etwas auf dem Server zu rendern, das nicht auf dem Client hydriert wird. Im Moment gibt es keinen Weg, eine ganze Seite nur partiell zu hydrieren und keine Hydrations-Markierungen dafür zu erzeugen. Es ist alles oder nichts. Partielle Hydration ist etwas, was wir in der Zukunft erforschen wollen."
    }), "\n", jsxs(_components.p, {
      children: ["Zuletzt müssen alle Ressourcen innerhalb es ", jsx(_components.code, {
        children: "render"
      }), "-Baums definiert werden. Sie werden dann automatisch serialisiert und im Browser übernommen, aber das funktioniert, weil die ", jsx(_components.code, {
        children: "render"
      }), "- oder ", jsx(_components.code, {
        children: "pipeTo"
      }), "-Methoden den Fortschritt des Renderns überblicken, etwas, das wir innerhalb eines isolierten Kontextes nicht können. Ebenso gibt es keine Reaktivität auf dem Server, also können Signale nicht beim initialen Rendern aktualisiert und weiter nach oben im Baum weitergereicht werden. Während es Suspense-Boundaries gibt, funktioniert Solids SSR von oben nach unten."]
    }), "\n", jsxs(_components.h2, {
      id: "den-anfang-machen-mit-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#den-anfang-machen-mit-ssr",
        children: "#"
      }), "Den Anfang machen mit SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["SSR-Konfigurationen sind knifflig. Wir haben ein paar Beispiele im Paket ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Zwischenzeitlich hat die Arbeit an einem neuen Starter begonnen, ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), ", in dem wir versuchen, das Arbeiten damit bequemer zu machen."]
    }), "\n", jsxs(_components.h2, {
      id: "den-anfang-mit-statischer-seitengenerierung-machen",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#den-anfang-mit-statischer-seitengenerierung-machen",
        children: "#"
      }), "Den Anfang mit statischer Seitengenerierung machen"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " hat auch ein Werkzeug, um statische oder vorgerenderte Seiten zu erzeugen. In der README-Daten finden sich weitere Informationen dazu."]
    })]
  });
}
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-3b707b1d.js.map
