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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Rendu Côté Serveur",
  "children": [{
    "depth": 2,
    "value": "Script d'Hydratation",
    "children": []
  }, {
    "depth": 2,
    "value": "Async et Streaming côté serveur",
    "children": []
  }, {
    "depth": 2,
    "value": "Limitations du rendu côté serveur",
    "children": []
  }, {
    "depth": 2,
    "value": "Commencer avec le Rendu Côté Serveur",
    "children": []
  }, {
    "depth": 2,
    "value": "Commencer avec la Génération de Site Statique",
    "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: "rendu-côté-serveur",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendu-côté-serveur",
        children: "#"
      }), "Rendu Côté Serveur"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid gère le rendu côté serveur en compilant les templates JSX pour que l'ajout de code soit ultra efficace. Cela est fait grâce au plug-in Babel ou au preset en passant ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), ". Pour le côté client et serveur, vous devez passer ", jsx(_components.code, {
        children: "hydratable: true"
      }), " pour générer du code d'hydratation compatible."]
    }), "\n", jsxs(_components.p, {
      children: ["Le moteur d'exécution de ", jsx(_components.code, {
        children: "solid-js"
      }), " et ", jsx(_components.code, {
        children: "solid-js/web"
      }), " sont interchangé pour des équivalents non réactifs à l'exécution du code dans un environnement Node. Pour les autres environnements, vous allez avoir besoin d'empaqueter (nous utilisons le terme bundle dans la suite de la doc) le code serveur avec des exports spécifiques à ", jsx(_components.code, {
        children: "node"
      }), ". La plupart des bundlers ont une manière de le faire. En général, nous recommandons aussi d'utiliser les conditions d'export ", jsx(_components.code, {
        children: "solid"
      }), " en plus, car il est recommandé que les libraires fournissent leurs sources sous l'export ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Construire pour le Rendu Côté Serveur va demander un peu plus de configuration, car il faudra générer 2 bundles séparés. Le point d'entré côté client devra utiliser ", 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: jsx(_components.em, {
        children: "Note: Il est possible d'effectuer le rendu et l'hydratation depuis la racine du Document. Cela nous permet de décrire une vue entière en JSX."
      })
    }), "\n", jsx(_components.p, {
      children: "Le point d'entrée serveur peut utiliser une des quatre options de rendu offertes par Solid. Chacun va produire un résultat et une balise script qui sera insérée dans l'entête du document."
    }), "\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: "// Chaîne de caractère pour le rendu synchrone"
        }), "\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: "// Chaîne de caractère pour le rendu asynchrone"
        }), "\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 Web Stream (pour Cloudflare Workers par example)"
        }), "\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: ["Pour vous faciliter la vie, ", jsx(_components.code, {
        children: "solid-js/web"
      }), " exportent une condition ", jsx(_components.code, {
        children: "isServer"
      }), ". C'est utile pour la plupart des bundlers qui seront capable de (", jsx(_components.em, {
        children: "tree shake"
      }), ")[", jsx(_components.a, {
        href: "https://developer.mozilla.org/fr/docs/Glossary/Tree_shaking",
        children: "https://developer.mozilla.org/fr/docs/Glossary/Tree_shaking"
      }), "]", " (procédé permettant de supprimer les exports non exploités) avec cette condition ou d'importer seulement ce qui est utilisé par le code sous cette condition dans votre bundle client."]
    }), "\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'exécuter ce code que côté serveur"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// N'exécuter ce code que dans le navigateur"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "script-dhydratation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#script-dhydratation",
        children: "#"
      }), "Script d'Hydratation"]
    }), "\n", jsxs(_components.p, {
      children: ["Dans le but de progressivement hydrater avant même que le code d'exécution de Solid ne se charge, un script spécial a besoin d'être inséré sur la page. Il peut soit être généré soit insérer via ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " ou alors inclut comme une partie du JSX en utilisant la balise ", jsx(_components.code, {
        children: "<HydratationScriptp />"
      }), "."]
    }), "\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 of 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: ["Lorsque l'on hydrate depuis le document qui inclut des ressources qui ne sont pas disponibles pendant l'exécution du client, cela peut poser problème. Solid fourni un composant ", jsx(_components.code, {
        children: "<NoHydratation />"
      }), " dont les enfants vont fonctionner normalement côté serveur, mais ne seront pas hydratés dans le navigateur."]
    }), "\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: "async-et-streaming-côté-serveur",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#async-et-streaming-côté-serveur",
        children: "#"
      }), "Async et Streaming côté serveur"]
    }), "\n", jsx(_components.p, {
      children: "Ces mécanismes sont construits sur les connaissances que Solid possède de votre application. Cela fonctionne en utilisant les \"Suspenses\" et l'API \"Resource\" sur le serveur, au lieu de récupérer des données en avance puis d'effectuer le rendu. Solid va récupérer les données pendant qu'il effectue le rendu sur le serveur de la même manière que du côté client. Votre code ainsi que le schéma d'exécution sont écrits exactement de la même manière."
    }), "\n", jsx(_components.p, {
      children: "Le rendu asynchrone attend jusqu'à ce que toutes les limites des \"Suspenses\" soit résolu et ensuite envoi les résultats (ou les écrits dans un fichier dans le cas de la Génération de Site Statique)"
    }), "\n", jsx(_components.p, {
      children: "Le Streaming commence à envoyer le contenu synchrone au navigateur qui va immédiatement afficher le contenu de repli (ex un indicateur de chargement) côté serveur. Puis au fur et à mesure que les données asynchrones finissent de se charger, le serveur envoi les données dans le même flux au client pour résoudre le Suspense où le navigateur finit le travail et va remplacer le contenu de repli avec le vrai contenu."
    }), "\n", jsx(_components.p, {
      children: "Les avantages de cette approche :"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Le serveur n'a pas besoin d'attendre les données asynchrones pour répondre. Les ressources peuvent être chargées plus tôt dans le navigateur et l'utilisateur commence à voir le contenu plus tôt."
      }), "\n", jsx(_components.li, {
        children: "Comparer à la récupération des données côté client comme dans la JAMStack, le chargement des données commence sur le serveur immédiatement et n'a pas besoin d'attendre que le client charge le JavaScript."
      }), "\n", jsx(_components.li, {
        children: "Toutes les données sont sérialisées et transportées du serveur vers le client automatiquement."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "limitations-du-rendu-côté-serveur",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#limitations-du-rendu-côté-serveur",
        children: "#"
      }), "Limitations du rendu côté serveur"]
    }), "\n", jsx(_components.p, {
      children: "La solution de rendu côté serveur isomorphe de Solid est très puissante, car vous pouvez écrire votre code en général en tant qu'un seul et même code source qui va s'exécuter de la même manière dans les deux environnements. Cependant, il y a des attentes demandées pour l'hydratation. Principalement que la vue affichée dans le client soit la même que celle rendue sur le serveur. Il n'y a pas besoin que ce soit exactement le même texte, mais la structure de votre balisage HTML doit être le même."
    }), "\n", jsx(_components.p, {
      children: "Nous utilisons des marqueurs rendus par le serveur pour comparer les éléments et la localisation des ressources sur le serveur. Pour cette raison, le Client et le Serveur ont les mêmes composants. Cela n'est pas forcément un problème vu que Solid interprète de la même façon sur le client et le serveur. Mais actuellement, il n'y a aucun moyen d'interpréter quelque chose côté serveur qui ne soit pas ensuite envoyé et afficher par le client. Actuellement, il n'y aucun moyen d'hydrater partiellement une page entière, et de ne pas générer de marqueurs d'hydratation associés. C'est une approche tout ou rien. L'Hydratation Partielle est un point que nous voulons explorer dans le futur."
    }), "\n", jsxs(_components.p, {
      children: ["Enfin, toutes les ressources ont besoin d'être définies sous l'arbre de ", jsx(_components.code, {
        children: "render"
      }), ". Ils sont automatiquement sérialisés et récupérés par le navigateur, mais cela fonctionnera grâce à la méthode ", jsx(_components.code, {
        children: "render"
      }), " ou ", jsx(_components.code, {
        children: "pipeTo"
      }), " qui grade trace des progrès du rendu. Une chose que nous ne pouvons pas faire s’ils sont créés en isolation du contexte. De manière similaire, il n'y a pas de réactivité sur le serveur, donc ne faites pas de changement de vos signaux au rendu initial et attendez-vous à ce qu'il se reflète un peu plus haut dans l'arbre. Bien que nous ayons des limitations de Suspense, le rendu côté serveur de Solid est basiquement du haut vers le bas."]
    }), "\n", jsxs(_components.h2, {
      id: "commencer-avec-le-rendu-côté-serveur",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#commencer-avec-le-rendu-côté-serveur",
        children: "#"
      }), "Commencer avec le Rendu Côté Serveur"]
    }), "\n", jsxs(_components.p, {
      children: ["La configuration du rendu côté serveur n'est pas tout à fait terminée. Nous avons quelques exemples dans le package ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Toutefois, un nouveau kit de démarrage est en progression ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " qui vise à rendre cette expérience beaucoup plus harmonieuse."]
    }), "\n", jsxs(_components.h2, {
      id: "commencer-avec-la-génération-de-site-statique",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#commencer-avec-la-génération-de-site-statique",
        children: "#"
      }), "Commencer avec la Génération de Site Statique"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " fournis aussi un simple utilitaire pour générer des sites statiques ou prérendus. Lisez le README pour plus d'information."]
    })]
  });
}
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-5cc66240.js.map
