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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Renderização do Lado do Servidor (SSR)",
  "children": [{
    "depth": 2,
    "value": "Script de Hidratação",
    "children": []
  }, {
    "depth": 2,
    "value": "SSR Assíncrono e Streaming",
    "children": []
  }, {
    "depth": 2,
    "value": "Ressalvas SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Começando com SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Começando com Static Site Generation",
    "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: "renderização-do-lado-do-servidor-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#renderização-do-lado-do-servidor-ssr",
        children: "#"
      }), "Renderização do Lado do Servidor (SSR)"]
    }), "\n", jsxs(_components.p, {
      children: ["O Solid lida com a renderização do servidor compilando modelos JSX para um código de acréscimo de string ultra eficiente. Isso pode ser feito através do plugin ou preset do babel passando ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), ". Para cliente e servidor, você precisa passar ", jsx(_components.code, {
        children: "hydratable: true"
      }), " para gerar o código compatível de hidratação."]
    }), "\n", jsxs(_components.p, {
      children: ["Os tempos de execução ", jsx(_components.code, {
        children: "solid-js"
      }), " e ", jsx(_components.code, {
        children: "solid-js/web"
      }), " são trocados por contrapartes não reativas quando executados em um ambiente Node. Para outros ambientes, você precisará agrupar o código do servidor com exportações condicionais definidas como ", jsx(_components.code, {
        children: "node"
      }), ". A maioria dos empacotadores tem uma maneira de fazer isso. Em geral, também recomendamos o uso das condições de exportação ", jsx(_components.code, {
        children: "solid"
      }), ", bem como é recomendado que as bibliotecas enviem seu código-fonte sob a exportação ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Construir para SSR definitivamente requer um pouco mais de configuração, pois estaremos gerando 2 pacotes separados. A entrada do cliente deve 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: "Observação: É possível renderizar e hidratar a partir da raiz do Documento. Isso nos permite descrever nossa visão completa em JSX."
      })
    }), "\n", jsx(_components.p, {
      children: "A entrada do servidor pode usar uma das quatro opções de renderização oferecidas pelo Solid. Cada um produz a saída e uma tag de script a ser inserida no cabeçalho do 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: "// Renderização síncrona de string"
        }), "\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: "// Renderização assíncrona de string"
        }), "\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 (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"
        }), "();\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: ["Para sua conveniência, ", jsx(_components.code, {
        children: "solid-js/web"
      }), " exporta um sinalizador ", jsx(_components.code, {
        children: "isServer"
      }), ". Isso é útil, pois a maioria dos empacotadores será capaz de fazer treeshake de qualquer coisa sob este sinalizador ou importações usadas apenas pelo código sob este sinalizador de seu pacote 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  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// só faça isso no servidor"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// só faça isso no browser"
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "script-de-hidratação",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#script-de-hidratação",
        children: "#"
      }), "Script de Hidratação"]
    }), "\n", jsxs(_components.p, {
      children: ["Para hidratar progressivamente antes mesmo do tempo de execução do Solid carregar, um script especial precisa ser inserido na página. Ele pode ser gerado e inserido via ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " ou incluído como parte do JSX usando a 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 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: ["Ao se hidratar a partir do documento, inserir ativos que não estão disponíveis na execução do cliente também pode bagunçar as coisas. O Solid fornece um componente ", jsx(_components.code, {
        children: "<NoHydration>"
      }), " cujos filhos funcionarão normalmente no servidor, mas não se hidratarão no navegador."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n  {manifest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "m"
          }), ") =>"]
        }), " (\n    ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "link"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rel"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"modulepreload\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "href"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{m.href}"
            }), " />"]
          })
        }), "\n  ))}\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "ssr-assíncrono-e-streaming",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ssr-assíncrono-e-streaming",
        children: "#"
      }), "SSR Assíncrono e Streaming"]
    }), "\n", jsx(_components.p, {
      children: "Esses mecanismos são construídos com base no conhecimento do Solid de como sua aplicação funciona. Ele faz isso usando Suspense e a API de recursos no servidor, em vez de buscar e renderizar. Solid busca à medida que são renderizadas no servidor, assim como no cliente. Seu código e padrões de execução são escritos exatamente da mesma maneira."
    }), "\n", jsx(_components.p, {
      children: "A renderização assíncrona espera até que todos os limites do Suspense sejam resolvidos e, em seguida, envia os resultados (ou os grava em um arquivo no caso de Geração de Site Estático - SSG)."
    }), "\n", jsx(_components.p, {
      children: "O streaming começa a descarregar o conteúdo síncrono para o navegador, processando imediatamente seus Suspense Fallbacks no servidor. Então, quando os dados assíncronos terminam no servidor, ele os envia pelo mesmo fluxo para o cliente para resolver o Suspense onde o navegador termina o trabalho e substitui o fallback por conteúdo real."
    }), "\n", jsx(_components.p, {
      children: "A vantagem desta abordagem:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "O servidor não precisa esperar a resposta dos dados Async. Assets podem começar a carregar mais cedo no navegador e o usuário pode começar a ver o conteúdo mais cedo."
      }), "\n", jsx(_components.li, {
        children: "Em comparação com a busca do cliente, como JAMStack, o carregamento de dados começa no servidor imediatamente e não precisa esperar o carregamento do JavaScript do cliente."
      }), "\n", jsx(_components.li, {
        children: "Todos os dados são serializados e transportados do servidor para o cliente automaticamente."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "ressalvas-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ressalvas-ssr",
        children: "#"
      }), "Ressalvas SSR"]
    }), "\n", jsx(_components.p, {
      children: "A solução Isomorphic SSR da Solid é muito poderosa, pois você pode escrever seu código principalmente como uma única base de código que roda de maneira semelhante em ambos os ambientes. No entanto, há expectativas de que isso coloque a hidratação. Principalmente porque a visualização renderizada no cliente é a mesma que seria renderizada no servidor. Não precisa ser exato em termos de texto, mas estruturalmente a marcação deve ser a mesma."
    }), "\n", jsx(_components.p, {
      children: "Usamos marcadores renderizados no servidor para combinar elementos e locais de recursos no servidor. Por isso, o Cliente e o Servidor devem ter os mesmos componentes. Normalmente, isso não é um problema, visto que o Solid renderiza da mesma maneira no cliente e no servidor. Mas atualmente não há como renderizar algo no servidor que não seja hidratado no cliente. Atualmente, não há como hidratar parcialmente uma página inteira, e não gerar marcadores de hidratação para ela. É tudo ou nada. A hidratação parcial é algo que queremos explorar no futuro."
    }), "\n", jsxs(_components.p, {
      children: ["Finalmente, todos os recursos precisam ser definidos na árvore ", jsx(_components.code, {
        children: "render"
      }), ". Eles são serializados automaticamente e selecionados no navegador, mas isso funciona porque os métodos ", jsx(_components.code, {
        children: "render"
      }), " ou ", jsx(_components.code, {
        children: "pipeTo"
      }), " rastreiam o progresso da renderização. Algo que não podemos fazer se eles forem criados em um contexto isolado. Da mesma forma, não há reatividade no servidor, portanto, não atualize os signals na renderização inicial e espere que eles reflitam na parte superior da árvore. Embora tenhamos limites de suspense, o SSR do Solid é basicamente de cima para baixo."]
    }), "\n", jsxs(_components.h2, {
      id: "começando-com-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#começando-com-ssr",
        children: "#"
      }), "Começando com SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["As configurações de SSR são complicadas. Temos alguns exemplos no pacote ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["No entanto, um novo iniciador está em desenvolvimento ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " que visa tornar essa experiência muito mais suave."]
    }), "\n", jsxs(_components.h2, {
      id: "começando-com-static-site-generation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#começando-com-static-site-generation",
        children: "#"
      }), "Começando com Static Site Generation"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " também vem com um utilitário simples para gerar sites estáticos ou pré-renderizados. Leia o README para obter mais informações."]
    })]
  });
}
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-cffbe964.js.map
