solid-ssr
Advanced tools
solid-ssrThis library provides tools to help with SSR. So far it's a simple Static Generator.
This project is still in progress. Server rendering is Async and supports Suspense including lazy components. However, client side hydration only supports lazy components. Any Suspense triggering due to data fetching during rehydration will cause loading states to be entered again. Similarly while Web Components are support, the Shadow DOM isn't yet.
Install solid-js, solid-preset-solid, and solid-ssr.
Configure babel-preset-solid with generate option 'ssr'
"presets": [["solid", { "generate": "ssr", "hydratable": true }]]
Remember to mark all of "solid-js", "solid-js/dom", "solid-ssr" as externals as no need to bundle these for server rendering entry.
renderToString in server entry for SSR:import { renderToString } from "solid-js/dom";
export default async (req) => {
// pull url off request to handle routing
const html = await renderToString(() => <App url={req.url} />);
return `<html><body>${html}</body></html>`;
});
const render = require("./lib/server"); // your server entry
// under request handler
app.get("*", (req, res) => {
const html = await render(req);
res.send(html);
})
"presets": [["solid", { "generate": "dom", "hydratable": true }]]
hydrate entry:import { hydrate } from "solid-js/dom";
hydrate(() => <App />, document.getElementById("main"));
Point to server entry and call pages.
const path = require("path")
const ssg = require("solid-ssr/static");
ssg(path.resolve(__dirname, "dist"), {
source: require("lib/server.js"),
pages: ["index", "profile", "settings"]
});
See example folder. Runs on http://localhost:8080/.
lerna run build:example --stream
lerna run start:example --stream
You can also see basic static site generation via:
lerna run export:example --stream
Demos Async server side rendering with routing using Lazy Components and Suspense. Notice how the browser skips any initial loading state as it is prerendered. useTransition smooths loading of other tabs when navigating suspending the current content for 250ms before showing any fallback. The example also includes progressive hydration although there are currently no input fields to show it off. It captures input events before hydration is complete and replays them as it hydrates when safe to, to minimize uncanny valley.
FAQs
Utilities to help with SSR
The npm package solid-ssr receives a total of 121 weekly downloads. As such, solid-ssr popularity was classified as not popular.
We found that solid-ssr demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.