Outline
Introduction
A History of SolidJS and How it Compares to React
SolidJS Benchmark Performance
SolidStart Motivations
C...
For further actions, you may consider blocking this person and/or reporting abuse
In case anybody is wondering, the
routeData(args: RouteDataArgs)
(RouteDataFuncArgs
insolid-router
) is passed an argument containing the routing information.SolidStart: Fetching data with a key
Thank you for the reference, this part of Solid Start in particular is just straight up magic to me right now 🪄.
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'srouteData()
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/index.tsx
defines the content for the/users
route butsrc/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 inroot.tsx
.However given:
root.tsx
acts as the layout for the/
route and the content is projected via the<FileRoutes>
component.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).
a first deep long stare at solidstart* (thank you :))
Thank you 🙏, I try to be thorough.
yet another JavaScript framework with compare table, yaaay!
Ha, if there's not a table is it even a real benchmark?
Love to see that I'm not the only one that has an interest in solid start! Nice article :)
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.
Thank You! For This Type Of Nice articles :)
Thanks for reading!
Very nice article! The Form stuff is super cool tooo maybe you should add a bit about it in the post
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.
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).
Interesting, will those provide end-to-end typesafety?
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).
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 😆.
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.
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
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.