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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Rendering di Server",
  "children": [{
    "depth": 2,
    "value": "Hydration Script",
    "children": []
  }, {
    "depth": 2,
    "value": "Async dan Streaming SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Kekurangan SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Memulai dengan SSR",
    "children": []
  }, {
    "depth": 2,
    "value": "Memulai dengan 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: "rendering-di-server",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendering-di-server",
        children: "#"
      }), "Rendering di Server"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid menangani rendering di Server dengan mengkompilasi template JSX menjadi kode string yang akan ditambahkan dengan sangat effisien. Kita dapat melakukannya dengan menggunakan plugin babel atau dengan memasukkan ", jsx(_components.code, {
        children: "generate: \"ssr\""
      }), " ke presetnya. Untuk mengenerasi kode hydration yang cocok untuk klien dan server kamu bisa memasukkan ", jsx(_components.code, {
        children: "hydratable: true"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Runtime ", jsx(_components.code, {
        children: "solid-js"
      }), " dan ", jsx(_components.code, {
        children: "solid-js/web"
      }), " ditukar dengan non-reaktif counterparts mereka ketika dijalankan di lingkungan node. Untuk lingkungan-lingkungan yang lain kamu harus membundel kode servernya dengan mengeset kondisional eksport ke ", jsx(_components.code, {
        children: "node"
      }), ". Kebanyakan bundler-bundler punya cara masing-masing untuk melakukan ini. Secara umum, kami juga menyarankan untuk menggunakan kondisional eksport ", jsx(_components.code, {
        children: "solid"
      }), " karena kami merekomendasikan untuk tiap library mengirimkan source mereka dibawah export ", jsx(_components.code, {
        children: "solid"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Membangun SSR pastinya akan membutuhkan sedikit lebih banyak konfigurasi karena kita akan menghasilkan ke 2 bundle yang terpisah. Untuk entry klien seharusnya menggunakan ", 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: "Catatan: Kamu bisa merender dan meng-hydrate langsung dari root Document-nya. Ini memungkinkan kita untuk menggambarkan view kita secara utuh di JSX"
      })
    }), "\n", jsxs(_components.p, {
      children: ["Entry server dapat menggunakan satu dari empat pilihan rendering yang sediakan oleh Solid. Tiap pilihan akan menghasilkan output dan sebuah script tag yang nantinya akan di masukkan ke bagian ", jsx(_components.code, {
        children: "head"
      }), " dari ", jsx(_components.code, {
        children: "document"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " {\n  renderToString,\n  renderToStringAsync,\n  renderToNodeStream,\n  renderToWebStream,\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js/web\""
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 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: "// 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 (Untuk seperti 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: ["Untuk memudahkan kamu, ", jsx(_components.code, {
        children: "solid-js/web"
      }), " juga mengekspor sebuah fungsi flag ", jsx(_components.code, {
        children: "isServer"
      }), ". Ini berguna karena kebanyakan bundler dapat melakukan 'treeshake' kepada apapun yang berada di dalam flag ini atau mengimpor hanya digunakan oleh kode di bawah flag ini dari klien bundle kamu."]
    }), "\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: "// kode disini hanya jalan di server saja"
        }), "\n} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "else"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// kode disini hanya jalan di browser saja"
        }), "\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: ["Untuk bisa meng-hydrate secara progresif bahkan sebelum runtime Solid terload, sebuah script spesial harus di masukkan ke dalam halamannya. Bisa dengan cara dihasilkan dan dimasukkan melalui ", jsx(_components.code, {
        children: "generateHydrationScript"
      }), " atau disertakan sebagai bagian dari JSX dengan menggunakan 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: ["Ketika meng-hydrate dari document, memasukkan aset-aset (assets) yang tidak tersedia di klien juga dapat mengacaukan beberapa hal. Solid menyediakan komponen ", jsx(_components.code, {
        children: "<NoHydration>"
      }), " yang dimana turunannya dapat bekerja secara normal di server, tapi tidak akan dihydrate di browser."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n  {manifest.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "map"
        }), "(", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "m"
          }), ") =>"]
        }), " (\n    ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "link"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rel"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"modulepreload\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "href"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{m.href}"
            }), " />"]
          })
        }), "\n  ))}\n</", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NoHydration"
        }), ">\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "async-dan-streaming-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#async-dan-streaming-ssr",
        children: "#"
      }), "Async dan Streaming SSR"]
    }), "\n", jsx(_components.p, {
      children: "Mekanisme-mekanisme ini dibuat atas pengetahuan Solid tentang bagaimana aplikasi kamu bekerja. Dengan cara menggunakan Suspense dan Resource API di server, daripada melakukan fetching terlebih dahulu lalu me-render. Solid men-fetch bersamaan dengan me-render di server sebagaimana yang dilakukan di klien. Kode kamu dan pola-pola eksekusi akan di tulis dengan cara yang sama persis."
    }), "\n", jsx(_components.p, {
      children: "Rendering asinkron menunggu sampai semua Suspense selesai dan mengirim hasilnya (atau menulisnya ke dalam sebuah file pada kasus seperti \"Static Site Generation\")."
    }), "\n", jsx(_components.p, {
      children: "Streaming memulai flusing konten synchronous ke browser dengan langsung me-render Suspense Fallback kamu di server dan mengirimkannya ke klien. Lalu saat data asinkron selesai dimuat di server dia akan mengirimkan data ke stream yang sama, lalu klien menyelesaikan Suspense dimana browser menyelesaikan pekerjaannya dan mengganti fallback dengan konten aslinya."
    }), "\n", jsx(_components.p, {
      children: "Keuntungan dengan cara ini:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: "Server tidak harus mengunggu sampai data asinkron merespon. Aset-aset (Assets) dapat langsung dimuat terlebih dahulu di browser, dan user dapat langsung melihat kontennya lebih cepat juga."
      }), "\n", jsx(_components.li, {
        children: "Dibandingkan dengan \"client fetching\" seperti JAMStack, pemuatan data dimulai di server secara langsung dan tidak perlu menunggu untuk Javascript klien terload."
      }), "\n", jsx(_components.li, {
        children: "Semua data telah diserialisasikan dan di pindahkan dari server ke klien secara otomatis."
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "kekurangan-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#kekurangan-ssr",
        children: "#"
      }), "Kekurangan SSR"]
    }), "\n", jsx(_components.p, {
      children: "Solusi \"Isomorphic SSR\" Solid sangat kuat dimana kamu dapat menulis kode kamu kebanyakan dalam kode basis tunggal (single code base) yang berjalan dengan serupa di kedua lingkungan. Namun ada beberapa ekspektasi yang diharapkan dari hydration. Sebagian besar adalah, tampilan yang telah terender di klien akan sama dengan yang terender di server. Tidak perlu sampai dalam hal seperti teksnya, yang penting struktur markupnya harus sama."
    }), "\n", jsx(_components.p, {
      children: "Kami menggunakan penanda-penanda yang terender di server untuk mencocokkan elemen dan \"resource locations\" di server. Untuk alasan ini klien dan server harus punya komponen-komponen yang sama. Ini biasanya bukanlah masalah, mengingat Solid merender dengan cara yang sama di klien dan server. Tetapi saat ini belum ada cara untuk merender sesuatu di server yang tidak akan terhydrate di klien. Saat ini, belum ada cara untuk meng-hydrate secara partial seluruh halaman, dan tidak menghasilkan penanda hydration untuk itu. Bisa dibilang, Hydrate semuanya atau tidak sama sekali. Partial Hydration adalah sesuatu yang kami ingin untuk selidiki lebih dalam di masa yang akan datang."
    }), "\n", jsxs(_components.p, {
      children: ["Terakhir, semua resources harus di definisikan di dalam ", jsx(_components.code, {
        children: "render"
      }), " tree. Mereka secara otomatis diserialisasi dan diambil di browser, tapi itu bekerja karena method ", jsx(_components.code, {
        children: "render"
      }), " dan ", jsx(_components.code, {
        children: "pipeTo"
      }), " melacak progres dari rendernya. Sesuatu yang tidak bisa kita lakukan jika mereka dibuat di konteks yang terisolasi. Sama halnya dengan tidak ada reaktifitas di server jadi jangan memperbarui signals di render awal dan mengharapkan mereka ter-refleksi di tree yang lebih atas. Meskipun kita memiliki batasan Suspense, SSR Solid pada dasarnya dari atas ke bawah."]
    }), "\n", jsxs(_components.h2, {
      id: "memulai-dengan-ssr",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#memulai-dengan-ssr",
        children: "#"
      }), "Memulai dengan SSR"]
    }), "\n", jsxs(_components.p, {
      children: ["Mengkonfigurasi SSR memang sedikit sulit. Jadi kita mempunyai beberapa contoh di package ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/packages/solid-ssr",
        children: "solid-ssr"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Tetapi, starter baru sedang dalam pembuatan ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid-start",
        children: "SolidStart"
      }), " yang bertujuan untuk membuat semuanya lebih mudah dan lancar dilakukan."]
    }), "\n", jsxs(_components.h2, {
      id: "memulai-dengan-static-site-generation",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#memulai-dengan-static-site-generation",
        children: "#"
      }), "Memulai dengan 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"
      }), " juga mempunyai sebuah utility sederhana untuk mengenerate static atau sites yang telah di render. Baca README-nya untuk informasi yang lebih banya."]
    })]
  });
}
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-c52279ff.js.map
