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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Server Side Rendering",
  "children": [{
    "depth": 2,
    "value": "Hydration Script",
    "children": []
  }, {
    "depth": 2,
    "value": "Async y Streaming SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Advertencias sobre el SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Iniciando con SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Iniciando con la Generación de Sitios Estáticos SSG",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span",
    h2: "h2",
    ul: "ul",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "server-side-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#server-side-rendering",
        children: "#"
      }), "Server Side Rendering"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid maneja el renderizado en servidor compilando los templates JSX a un código ultra eficiente de adición de cadenas de texto. Esto puede ser logrado mediante el ", jsx(_components.em, {
        children: "plugin"
      }), " de Babel o un ", jsx(_components.em, {
        children: "preset"
      }), " añadiendo ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), ". Para ambos, cliente y servidor es necesario añadirle ", jsx(_components.code, {
        children: "hydratable: true"
      }), " para generar el código compatible con la hidratación."]
    }), "\n", jsxs(_components.p, {
      children: ["Los entornos de ejecución ", jsx(_components.code, {
        children: "solid-js"
      }), " y ", jsx(_components.code, {
        children: "solid-js/web"
      }), " se intercambian por contrapartes no-reactivas cuando se ejecutan en un entorno de node. Para otros ambientes necesitas empaquetar el código de servidor con exportaciones condicionales establecidos a ", jsx(_components.code, {
        children: "node"
      }), ". La mayoría empaquetadores tienen una manera de hacer esto. En general también recomendamos usar las condiciones de exportación ", jsx(_components.code, {
        children: "solid"
      }), ", así como también se recomienda que las librerías envíen su fuente bajo la exportación ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Construir para SSR definitivamente toma un poco mas de configuración pues estaremos generando 2 ", jsx(_components.em, {
        children: "bundles"
      }), " separados. La entrada del cliente debería usar ", 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: "Nota: Es posible renderizar e hidratar desde la raíz del documeno. Esto permite que describamos nuestra vista completa en JSX."
      })
    }), "\n", jsxs(_components.p, {
      children: ["La entrada del servidor puede usar una de cuatro opciones de renderizado ofrecidas por Solid. Cada una produce el ", jsx(_components.em, {
        children: "output"
      }), " y una etiqueta de script para ser insertado en el ", jsx(_components.code, {
        children: "head"
      }), " del documento."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { renderToString, renderToStringAsync, renderToStream } ", 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: "//Renderizado síncrono de strings"
        }), "\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: "//Renderizado asíncrono de strings"
        }), "\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: "// Renderizado en Stream"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " stream = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToStream"
        }), "(", 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"
        }), "\nstream.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pipe"
        }), "(res);\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Streams web (para servicios como 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"
        }), "();\nstream.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "pipeTo"
        }), "(writable);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Para su comodidad ", jsx(_components.code, {
        children: "solid-js/web"
      }), " exporta un indicador ", jsx(_components.code, {
        children: "isServer"
      }), ". Esto es útil ya que la mayoría de los ", jsx(_components.em, {
        children: "bundlers"
      }), " podrán realizar ", jsx(_components.em, {
        children: "treeshaking"
      }), " en cualquier recurso que este bajo esta indicador o importar solo el código utilizado bajo este indicador fuera de su ", jsx(_components.em, {
        children: "bundle"
      }), " de cliente."]
    }), "\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\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// solo ejecuta esto en el servidor"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n\t", jsx(_components.span, {
          className: "hljs-comment",
          children: "// solo ejecuta esto en el navegador"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "hydration-script",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#hydration-script",
        children: "#"
      }), "Hydration Script"]
    }), "\n", jsxs(_components.p, {
      children: ["Para hidratar progresivamente incluso antes de que se cargue el entorno de ejecución de Solid, se debe insertar un script especial en la página. Puede generarse e insertarse a través de ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " o incluirse como parte del JSX usando la etiqueta ", 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"
            }), ">"]
          }), "{/*... el resto de la 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: ["Cuando se hidrata desde el documento, la inserción de recursos que no están disponibles en la ejecución del cliente también puede arruinar el proceso cuando no están bajo la etiqueta ", jsx(_components.code, {
        children: "<head>"
      }), ". Solid proporciona un componente ", jsx(_components.code, {
        children: "<NoHydration>"
      }), " cuyos hijos funcionarán normalmente en el servidor pero no se hidratarán en el navegador."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ImNotHydrated"
            }), " />"]
          })
        }), "\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "async-y-streaming-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#async-y-streaming-ssr",
        children: "#"
      }), "Async y Streaming SSR"]
    }), "\n", jsx(_components.p, {
      children: "Estos mecanismos se basan en el conocimiento de Solid sobre cómo funciona tu aplicación. Utiliza Suspense y Resource API en el servidor, en lugar de obtener datos y luego renderizar. Solid obtiene los recursos al mismo tiempo que renderiza en el servidor, de la misma forma que lo hace en el cliente. Tu código está escrito exactamente de la misma manera."
    }), "\n", jsx(_components.p, {
      children: "El renderizado asíncrono espera hasta que todos los límites del Suspense sean resueltos y entonces envía los resultados (o los escribe en un archivo en caso de ser Generación de Sitios Estáticos)."
    }), "\n", jsx(_components.p, {
      children: "El streaming envía contenido síncrono al navegador inmediatamente. Inicialmente, renderiza en el servidor tus respaldos del Suspense y los envía al cliente. Después, en el momento en que los datos asíncronos terminan de cargar en el servidor, enviamos al cliente los datos y el HTML usando el mismo stream. El navegador finaliza el trabajo, resuelve el componente Suspense, y reemplaza el respaldo con contenido real."
    }), "\n", jsx(_components.p, {
      children: "La ventaja de este enfoque:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "El servidor no tiene que esperar la respuesta de los datos asíncronos. Los recursos pueden empezar a cargar antes en el navegador, así el usuario puede empezar a ver contenido antes."
      }), "\n", jsx(_components.li, {
        children: "Comparado con la obtención de datos del lado del cliente como en JAMStack, la carga de datos en el servidor comienza inmediatamente y no necesita esperar a que el cliente JavaScript cargue."
      }), "\n", jsx(_components.li, {
        children: "Todos los datos son serializados y transportados desde el servidor al cliente de forma automática."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "advertencias-sobre-el-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#advertencias-sobre-el-ssr",
        children: "#"
      }), "Advertencias sobre el SSR"]
    }), "\n", jsx(_components.p, {
      children: "La solución SSR isomorfa de Solid es muy poderosa porque puede escribir su código principalmente como una base de código único que se ejecuta de manera similar en ambos entornos. Sin embargo esto genera expectativas en la hidratación. Principalmente, la vista renderizada en el cliente es la misma que se renderizaría en el servidor. No es necesario que sea exacto en términos de texto, pero estructuralmente el etiquetado debe ser el mismo."
    }), "\n", jsx(_components.p, {
      children: "En el servidor usamos indicadores renderizados para igualar los elementos y las ubicaciones de los recursos en el servidor. Por este motivo el cliente y el servidor deberán tener los mismos componentes. Esto no es usualmente un problema dado que Solid renderiza de la misma forma en el cliente y en el servidor. Pero actualmente no existe una forma de renderizar algo en el servidor que no sea hidratado en el cliente. En este momento no hay forma de hidratar parcialmente una página completa, y no generar indicadores para ello. Es todo o nada. La hidratación parcial es algo que queremos explorar en el futuro."
    }), "\n", jsxs(_components.p, {
      children: ["Finalmente, todos los recursos deben definirse bajo el árbol ", jsx(_components.code, {
        children: "render"
      }), ". Estos se serializan automáticamente y son captados en el navegador, pero eso funciona porque los métodos de ", jsx(_components.code, {
        children: "render"
      }), " realizan un seguimiento del progreso de la renderización. Algo que no podemos hacer si se crean en un contexto aislado. Del mismo modo, no hay reactividad en el servidor, por lo que no debe actualizar las señales en el renderizado inicial y esperar que se reflejen más arriba en el árbol. Si bien tenemos límites de Suspense, el SSR de Solid es básicamente de arriba hacia abajo."]
    }), "\n", jsxs(_components.h2, {
      id: "iniciando-con-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#iniciando-con-ssr",
        children: "#"
      }), "Iniciando con SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Las configuraciones de SSR son complicadas. Tenemos algunos ejemplos en el paquete ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Sin embargo, se está trabajando en un nuevo ", jsx(_components.em, {
        children: "starter"
      }), " ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " que tiene como objetivo hacer que esta experiencia sea mucho más amigable."]
    }), "\n", jsxs(_components.h2, {
      id: "iniciando-con-la-generación-de-sitios-estáticos-ssg",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#iniciando-con-la-generación-de-sitios-estáticos-ssg",
        children: "#"
      }), "Iniciando con la Generación de Sitios Estáticos SSG"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " también viene con una sencilla utilidad para generar sitios estáticos o renderizados previamente. Lea el README para obtener más información."]
    })]
  });
}
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-59dcc8c5.js.map
