DEV Community

A First Look at SolidStart

ajcwebdev on November 23, 2022

Outline Introduction A History of SolidJS and How it Compares to React SolidJS Benchmark Performance SolidStart Motivations C...

Read full post

peerreynders • Nov 25 '22

In case anybody is wondering, the routeData(args: RouteDataArgs) (RouteDataFuncArgs in solid-router) is passed an argument containing the routing information.

SolidStart: Fetching data with a key

ajcwebdev • Nov 27 '22

Thank you for the reference, this part of Solid Start in particular is just straight up magic to me right now 🪄.

peerreynders • Nov 27 '22

Most of the information is with solid-router.

The file routes handle the route configuration implicitly which is where the magic comes from.

solid-router data functions are the equivalent to SolidStart's routeData() function.

The route data function is passed the routing information so that it can obtain any additional information that is needed for the page (component). The page obtains the information that was prepared by the route data function via the useRouteData function.

It took me some time to figure out this situation:

src/routes/users.tsx
src/routes/users/index.tsx

src/routes/users/index.tsx defines the content for the /users route but src/routes/users.tsx defines the layout that will be used for that content and the content is projected via the <Outlet> component. (Nested Routes).

Note that src/routes/users.tsx itself is projected via the <FileRoutes> component in root.tsx.

However given:

src/root.tsx
src/routes/index.tsx

root.tsx acts as the layout for the / route and the content is projected via the <FileRoutes> component.

peerreynders • Dec 2 '22

If you are interested some examples can be found in here:

peerreynders / solid-start-notes-basic

Basic client rendered notes app using SolidStart beta

SolidStart Notes (basic)

Overview

First exploration of SolidStart (beta 0.2.6). The app is a port of the December 2020 React Server Components Demo (LICENSE; no pg fork) but here it's just a basic client side routing implementation. It doesn't use a database but just holds the notes in server memory synchronized to the notes-db.json file. This app is not intended to be deployed but simply serves as an experimental platform.

The longer term goal is to eventually leverage island routing to maximum effect once it's more stable and documented (nksaraf already demonstrated that capability (live demo) with a non-standard branch of SolidStart).

$ npm i
added 359 packages, and audited 360 packages in 3s

37 packages are looking for funding
  run `npm fund` for details

…

View on GitHub

Damian Tarnawski • Nov 23 '22

a first deep long stare at solidstart* (thank you :))

ajcwebdev • Nov 27 '22

Thank you 🙏, I try to be thorough.

coskuntekin • Nov 24 '22

yet another JavaScript framework with compare table, yaaay!

ajcwebdev • Nov 27 '22

Ha, if there's not a table is it even a real benchmark?

anes • Nov 24 '22

Love to see that I'm not the only one that has an interest in solid start! Nice article :)

ajcwebdev • Nov 27 '22

Yeah I've been watching Solid closely for at least a year and was patiently awaiting the release of Solid Start. The community is really starting to pick up steam.

Arif Patel Dubai Preston UK • Nov 25 '22

Thank You! For This Type Of Nice articles :)

ajcwebdev • Nov 27 '22

Thanks for reading!

Shoubhit Dash • Nov 24 '22

Very nice article! The Form stuff is super cool tooo maybe you should add a bit about it in the post

ajcwebdev • Nov 27 '22

Yeah I always struggle with deciding how much to include before an article just becomes totally ridiculous in length. I'm thinking I'll have a follow up article that will include both tRPC and forms/mutations.

peerreynders • Nov 27 '22 • Edited

I think the already included createServerData$, createServerAction$ and API Routes delay the need to reach for solutions like tRPC.

Not to mention islands + islandsrouter that can provide "server-component-like" functionality (experimental source, demo).

ajcwebdev • Nov 27 '22

Interesting, will those provide end-to-end typesafety?

peerreynders • Nov 27 '22

I was getting the impression that the TS settings are still pretty loose right now as SolidStart is still in beta.

But IIRC from the Theo stream the intention is to make it typesafe (can't be sure though).

ajcwebdev • Nov 27 '22

Cool cool, thanks for the insights! Honestly, my desire to integrate tRPC has less to do with any actual technical reasons and more to do with following along with my tried-and-true Hype Based Development strategy 😆.

peerreynders • Nov 27 '22

Right, which is why it's included in the SolidStart docs.

However, in my view tRPC is a solution that largely fits the React/Next.js space or perhaps between node applications and only really makes sense when the same team is in charge of both ends anyway (background: A Brief History of Distributed Programming: RPC; also in the long term React Server Components (once fully supported) may lessen the need for tRPC).

But SolidStart already has baked in solutions for server/client communication that should fit most use cases.

tRPC would likely only come into play if the server already existed prior to using SolidStart and if islandsrouter is used that interaction could move to the server anyway as the client may only need HTML updates.

leob • Nov 25 '22

React performance pretty atrocious in these 2 tests, especially compared to Vue, while React makes you work harder (makes you jump through a lot of hoops with useMemo and whatnot, putting the burden on the programmer to manually optimize re-renders) ... Vue takes care of more stuff for you, with a smaller bundle size!

The only thing that React has going for it is that it's dominant in the marketplace, the proverbial 900 pound gorilla, but it's not the smartest ape in the family :-P

ajcwebdev • Nov 27 '22

Not sure how you came away from this article thinking that Vue is the solution to React's performance problems (instead of maybe, I dunno, Solid) but I commend your ability to arrive at whatever conclusion you want.