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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Server di rendering",
  "children": [{
    "depth": 2,
    "value": "Script di idratazione",
    "children": []
  }, {
    "depth": 2,
    "value": "Asincrono e streaming SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Avvertenze SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Iniziare con SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Iniziare con la generazione di siti statici",
    "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: "server-di-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#server-di-rendering",
        children: "#"
      }), "Server di rendering"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid gestisce il rendering del server compilando i modelli JSX in un codice di aggiunta di stringhe ultra efficiente. Questo accade con il plugin o il preset Babel passando in ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), ". Con client e server è necessario passare ", jsx(_components.code, {
        children: "hydratable: true"
      }), " per generare il codice compatibile con l'idratazione."]
    }), "\n", jsxs(_components.p, {
      children: ["I runtime ", jsx(_components.code, {
        children: "solid-js"
      }), " e ", jsx(_components.code, {
        children: "solid-js/web"
      }), " vengono scambiati con versioni non reattive durante l'esecuzione in un ambiente nodo. Per altri ambienti sarà necessario raggruppare il codice del server con esportazioni condizionali impostate su \"nodo\". La maggior parte dei bundler ha un modo per farlo. Raccomandiamo anche di usare le condizioni di esportazione ", jsx(_components.code, {
        children: "solid"
      }), " così come si consiglia alle librerie di spedire i loro sorgenti sotto l'export ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "Costruire per SSR richiede sicuramente un po' più di configurazione. Genereremo 2 bundle separati. La voce client dovrebbe usare \"idrato\":"
    }), "\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: "Nota: è possibile renderizzare e idratare dalla radice del documento. Questo ci permette di descrivere la nostra visione completa in JSX."
      })
    }), "\n", jsx(_components.p, {
      children: "La voce del server può utilizzare una delle quattro opzioni di rendering offerte da Solid. Ciascuno produce l'output e un tag di script da inserire nell'intestazione del documento."
    }), "\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: "// Rendering di stringhe sincrone"
        }), "\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: "// Rendering di stringhe asincrone"
        }), "\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 (come esempio 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: ["Per semplicità ", jsx(_components.code, {
        children: "solid-js/web"
      }), " esporta un flag ", jsx(_components.code, {
        children: "isServer"
      }), ". Ciò è utile in quanto la maggior parte dei bundler sarà in grado di eseguire il treeshake di qualsiasi cosa sotto questo flag o le importazioni utilizzate solo dal codice sotto questo flag dal tuo 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: "// solo per server"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// solo nel browser"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "script-di-idratazione",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#script-di-idratazione",
        children: "#"
      }), "Script di idratazione"]
    }), "\n", jsxs(_components.p, {
      children: ["Per idratarsi progressivamente direttamente prima del caricamento del runtime di Solid, è necessario inserire uno script speciale nella pagina. Può essere generato e inserito tramite ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), "o incluso come parte di JSX utilizzando il tag ", 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 🔥</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 🔥", 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"
            }), ">"]
          }), "{/*... resto dell'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: ["Fai attenzione quando ti idrati. Anche l'inserimento di risorse che non sono disponibili nell'esecuzione del client può rovinare le cose. Solid fornisce un componente ", jsx(_components.code, {
        children: "<NoHydration>"
      }), " i cui figli funzioneranno normalmente sul server. Questo non è per idratare nel browser."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NessunaIdratazione"
        }), ">\n  {manifesta.", 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: "NessunaIdratazione"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "asincrono-e-streaming-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#asincrono-e-streaming-ssr",
        children: "#"
      }), "Asincrono e streaming SSR"]
    }), "\n", jsx(_components.p, {
      children: "I meccanismi sono costruiti sulla conoscenza di Solid di come funziona la tua applicazione. Usando Suspense e l'API delle risorse sul server, invece di recuperare in anticipo e quindi eseguire il rendering. Solid recupera mentre esegue il rendering sul server in modo simile al client. Il codice e i modelli di esecuzione sono scritti esattamente allo stesso modo."
    }), "\n", jsx(_components.p, {
      children: "Il rendering asincrono attende la risoluzione di tutti i limiti di Suspense. Quindi invia i risultati o li scrive su un file nel caso di Static Site Generation."
    }), "\n", jsx(_components.p, {
      children: "Lo streaming inizia a scaricare il contenuto sincrono nel browser, rendendo immediatamente i tuoi Suspense Fallback sul server. Quindi, quando i dati asincroni terminano sul server, inviano lo stesso flusso al client per risolvere Suspense. Questo è quando il browser termina il lavoro e sostituisce il fallback con contenuto reale."
    }), "\n", jsx(_components.p, {
      children: "Il vantaggio:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Il server non deve attendere che i dati asincroni rispondano. Le risorse possono iniziare a caricarsi prima nel browser e l'utente può iniziare a vedere i contenuti prima."
      }), "\n", jsx(_components.li, {
        children: "Rispetto al recupero del client come JAMStack, il caricamento dei dati inizia immediatamente sul server e non deve attendere il caricamento di JavaScript del client."
      }), "\n", jsx(_components.li, {
        children: "Tutti i dati vengono serializzati e trasportati automaticamente dal server al client."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "avvertenze-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#avvertenze-ssr",
        children: "#"
      }), "Avvertenze SSR"]
    }), "\n", jsx(_components.p, {
      children: "La soluzione SSR isomorfa di Solid è molto potente. Puoi scrivere il tuo codice principalmente come base di codice singola che funziona in modo simile in entrambi gli ambienti. Tuttavia ci sono aspettative che questo metta su idratazione. Principalmente che la vista renderizzata nel client è la stessa che sarebbe resa sul server. Non ha bisogno di essere esatto in termini di testo. Strutturalmente il markup dovrebbe essere lo stesso."
    }), "\n", jsx(_components.p, {
      children: "Usiamo i marcatori resi nel server per abbinare elementi e posizioni delle risorse sul server. Per questo motivo Client e Server dovrebbero avere gli stessi componenti. Questo non è in genere un problema dato che Solid esegue il rendering allo stesso modo su client e server. Attualmente non esiste un metodo per rendere qualcosa sul server che non si idrata sul client. Non è possibile idratare parzialmente un'intera pagina e non generare indicatori di idratazione per essa. L'idratazione parziale è qualcosa che vogliamo esplorare in futuro."
    }), "\n", jsxs(_components.p, {
      children: ["Infine, tutte le risorse devono essere definite nell'albero ", jsx(_components.code, {
        children: "render"
      }), ". Vengono automaticamente serializzati e prelevati nel browser. Funziona perché i metodi ", jsx(_components.code, {
        children: "render"
      }), " o ", jsx(_components.code, {
        children: "pipeTo"
      }), " tengono traccia dell'avanzamento del rendering. Non possiamo fare nulla se vengono creati in un contesto isolato. Allo stesso modo non c'è reattività sul server. Non aggiornare i segnali durante il rendering iniziale e aspettarti che si riflettano più in alto nell'albero. Ci sono limiti di Suspense ma l'SSR di Solid viene elaborato dall'alto verso il basso."]
    }), "\n", jsxs(_components.h2, {
      id: "iniziare-con-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#iniziare-con-ssr",
        children: "#"
      }), "Iniziare con SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Le configurazioni SSR sono complicate. Abbiamo alcuni esempi nel pacchetto ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["È in lavorazione un nuovo antipasto ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " che mira a rendere questa esperienza molto più fluida."]
    }), "\n", jsxs(_components.h2, {
      id: "iniziare-con-la-generazione-di-siti-statici",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#iniziare-con-la-generazione-di-siti-statici",
        children: "#"
      }), "Iniziare con la generazione di siti statici"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " viene fornito anche con una semplice utility per la generazione di siti statici o prerenderizzati. Leggi il README per maggiori informazioni."]
    })]
  });
}
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-afe2d599.js.map
