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 and Streaming SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "SSR Caveats",
    "children": []
  }, {
    "depth": 2,
    "value": "Getting Started with SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Getting Started with 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: "server-side-rendering",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#server-side-rendering",
        children: "#"
      }), "Server Side Rendering"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid handles Server rendering by compiling JSX templates to ultra efficient string appending code. This can be achieved through the babel plugin or preset by passing in ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), ". For both client and server you need to pass in ", jsx(_components.code, {
        children: "hydratable: true"
      }), " to generate the hydration compatible code."]
    }), "\n", jsxs(_components.p, {
      children: ["The ", jsx(_components.code, {
        children: "solid-js"
      }), " and ", jsx(_components.code, {
        children: "solid-js/web"
      }), " runtimes are swapped for non-reactive counterparts when running in a node environment. For other environments you will need to bundle the server code with conditional exports set to ", jsx(_components.code, {
        children: "node"
      }), ". Most bundlers have a way of doing this. In general we also recommend using the ", jsx(_components.code, {
        children: "solid"
      }), " export conditions as well as it is recommend that libraries ship their source under the ", jsx(_components.code, {
        children: "solid"
      }), " export."]
    }), "\n", jsxs(_components.p, {
      children: ["Building for SSR definitely takes a bit more configuration because we will be generating 2 separate bundles. The client entry should use ", 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: It is possible to render and hydrate from the Document root. This allows us to describe our full view in JSX."
      })
    }), "\n", jsx(_components.p, {
      children: "The server entry can use one of the four rendering options offered by Solid. Each produces the output and a script tag to be inserted in the head of the 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  renderToStream\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: "// Synchronous string rendering"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " html = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToString"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Asynchronous string rendering"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " html = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "await"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "renderToStringAsync"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// Stream rendering"
        }), "\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: "// Web streams (for like 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: ["For your convenience ", jsx(_components.code, {
        children: "solid-js/web"
      }), " exports an ", jsx(_components.code, {
        children: "isServer"
      }), " flag. This is useful as most bundlers will be able to treeshake anything under this flag or imports only used by code under this flag out of your client bundle."]
    }), "\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: "// only do this on the server"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// only do this in the browser"
        }), "\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: ["In order to progressively hydrate even before Solid's runtime loads, a special script needs to be inserted on the page. It can either be generated and inserted via ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " or included as part of the JSX using the ", jsx(_components.code, {
        children: "<HydrationScript />"
      }), " tag."]
    }), "\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: ["When hydrating from the document, inserting assets that aren't available in the client run can also mess things up when not under the ", jsx(_components.code, {
        children: "<head>"
      }), " tag. Solid provides a ", jsx(_components.code, {
        children: "<NoHydration>"
      }), " component whose children will work as normal on the server, but not hydrate in the browser."]
    }), "\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-and-streaming-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#async-and-streaming-ssr",
        children: "#"
      }), "Async and Streaming SSR"]
    }), "\n", jsx(_components.p, {
      children: "These mechanisms are built on Solid's knowledge of how your application works.\nIt uses Suspense and the Resource API on the server, instead of fetching ahead and then rendering.\nSolid fetches as it renders on the server just like it does on the client.\nYour code is written exactly the same way."
    }), "\n", jsx(_components.p, {
      children: "Async rendering waits until all Suspense boundaries resolve and then sends the results (or writes them to a file in the case of Static Site Generation)."
    }), "\n", jsx(_components.p, {
      children: "Streaming starts flushing synchronous content to the browser immediately. Initially, it renders your Suspense fallbacks on the server and sends them to the client.\nThen, as the async data finishes loading on the server, we send the data and HTML over the same stream to the client.\nThe browser finishes the job, resolves the Suspense, and replaces the fallback with real content."
    }), "\n", jsx(_components.p, {
      children: "The advantage of this approach:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Server doesn't have to wait for async data to respond. Assets can start loading sooner in the browser, and the user can start seeing content sooner."
      }), "\n", jsx(_components.li, {
        children: "Compared to client fetching like JAMStack, data loading starts on the server immediately and doesn't have to wait for client JavaScript to load."
      }), "\n", jsx(_components.li, {
        children: "All data is serialized and transported from server to client automatically."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "ssr-caveats",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ssr-caveats",
        children: "#"
      }), "SSR Caveats"]
    }), "\n", jsx(_components.p, {
      children: "Solid's Isomorphic SSR solution is very powerful in that you can write your code mostly as single code base that runs similarly in both environments. However there are expectations that this puts on hydration. Mostly that the rendered view in the client is the same as it would be rendered on the server. It doesn't need to be exact in terms of text, but structurally the markup should be the same."
    }), "\n", jsx(_components.p, {
      children: "We use markers rendered in the server to match elements and resource locations on server. For this reason the Client and Server should have the same components. This is not typically a problem given that Solid renders the same way on client and server. But currently there is no means to render something on the server that does not get hydrated on the client. Currently, there is no way to partially hydrate a whole page, and not generate hydration markers for it. It is all or nothing. Partial Hydration is something we want to explore in the future."
    }), "\n", jsxs(_components.p, {
      children: ["Finally, all resources need to be defined under the ", jsx(_components.code, {
        children: "render"
      }), " tree. They are automatically serialized and picked up in the browser, but that works because the ", jsx(_components.code, {
        children: "render"
      }), " methods keep track of the progress of the render. Something we cannot do if they are created in isolated context. Similarly there is no reactivity on the server so do not update signals on initial render and expect them to reflect higher up the tree. While we have Suspense boundaries Solid's SSR is basically top down."]
    }), "\n", jsxs(_components.h2, {
      id: "getting-started-with-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#getting-started-with-ssr",
        children: "#"
      }), "Getting Started with SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["SSR configurations are tricky. We have a few examples in the ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), " package."]
    }), "\n", jsxs(_components.p, {
      children: ["However, a new starter is in the works ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " that aims to make this experience much smoother."]
    }), "\n", jsxs(_components.h2, {
      id: "getting-started-with-static-site-generation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#getting-started-with-static-site-generation",
        children: "#"
      }), "Getting Started with 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"
      }), " also ships with a utility for generating static or prerendered sites. Read the README for more 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-1f413313.js.map
