SolidJS•17mo ago

SSR and routes in Solid.JS

On the Solid.JS website, it is stated that it supports server-side rendering (SSR). However, I am unable to find a straightforward method for SSR with routing. For instance, if I consider the following example:

import express from "express";
import { renderToString } from "solid-js/web";

function App() {
  return <h1>Hello World</h1>;
}

const app = express();

app.get("/", (req, res) => {
  const html = renderToString(() => <App />);
  res.send(html);
});

app.listen(3000, () => {
  console.log("Server started on port 3000");
});

import express from "express";
import { renderToString } from "solid-js/web";

function App() {
  return <h1>Hello World</h1>;
}

const app = express();

app.get("/", (req, res) => {
  const html = renderToString(() => <App />);
  res.send(html);
});

app.listen(3000, () => {
  console.log("Server started on port 3000");
});

(https://docs.solidjs.com/references/concepts/ssr/simple-client-fetching-ssr) Although this code works, it does not explain how to incorporate routing. Is there a way to make it work based on the request URL received by Express without requiring modifications to the App component?

8 Replies

mattasia•17mo ago

https://start.solidjs.com/getting-started/what-is-solidstart is probably a better place to start

SolidStart Beta Docuentation

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

tkirishimaOP•17mo ago

So there isn't any way to do that in Solid.JS ?

mattasia•17mo ago

I imagine it is possible, I would be surprised if it wasn't, but why would you want to do all the route plumbing to/from express routing yourself? is using express's route engine a necessity? otherwise https://start.solidjs.com/core-concepts/routing (all the routing magic for both server and client side all ready for you) and https://start.solidjs.com/core-concepts/api-routes for routes that are only server side

SolidStart Beta Docuentation

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

SolidStart Beta Docuentation

SolidStart Beta Documentation

Early release documentation and resources for SolidStart Beta

tkirishimaOP•17mo ago

Well, solidStart is in beta. And in solid start there are a lot of stuff that I dont need.

mattasia•17mo ago

True but express/js is ancient on the flip side of the coin is TJ even still maintaining it

mdynnl•17mo ago

https://github.com/ryansolid/solid-ssr-workbench is linked in that page. most of what you need should be there.

tkirishimaOP•17mo ago

Well, it works in JavaScript. But in TypeScript it's another story. If you do

npx degit solidjs/templates/ts my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm

npx degit solidjs/templates/ts my-app
cd my-app
npm install # or yarn or pnpm
npm run dev # or yarn or pnpm

And after that, try to create a server.tsx with something like:

import express from "express";
import { renderToString } from "solid-js/web";

function App() {
  return <h1>Hello World</h1>;
}

const app = express();

app.get("/", (req: any, res: any) => {
  const html = renderToString(() => <App />);
  res.send(html);
});
app.listen(3000, () => {
  console.log("Server started on port 3000");
});

import express from "express";
import { renderToString } from "solid-js/web";

function App() {
  return <h1>Hello World</h1>;
}

const app = express();

app.get("/", (req: any, res: any) => {
  const html = renderToString(() => <App />);
  res.send(html);
});
app.listen(3000, () => {
  console.log("Server started on port 3000");
});

And try to run the server with ts-node src/server.tsx you fall in a rabbit hole of errors. Like Unknown file extension ".tsx", and after that, you try to remove "type": "module", in package.json, but new errors are coming. It would be great to have a default template for SSR in typescript that actually work out of the box.

mdynnl•17mo ago

solid uses a custom jsx transform so the babel transform is necessary along the build pipeline it should work if babel typescript preset is thrown in there

Gaming

Programming

SSR and routes in Solid.JS