SolidJS

S

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

Join

redirecting from API route

Hey all! I'm trying to redirect to a page (/app) from a API get route after exchanging the token with supabase. For some reason it works when using locally and it behaves correctly, but it doesn't wotk when deployed (on Vercel). Am I doing something really wrong / missing something? I've even tried to manually return a response instead of using the redirect but the behaviour is the same....

How do I manually implement hydration for a component?

I want to add markers / hydration labels myself, so that I can render it on a server in one way, and on the client in another. The DOM is slightly different between the two and causes hydration mismatches for Solid....

Need help to convice developers to go to SolidJS

Hello, a little question, currently we want to migrate our React App to Solidjs but we have some developers who don't think the changes is relevant. Can someone have some blogs / testimony about people who have made the changes ? (Ideally how) Thanks !

What does it mean when a tags don't navigate to their href?

I have a tags with valid hrefs and they're not disabled or abything like that but sometimes when I click on them, the solid app doesn't navigate to the new route. The way I get around this is to disable scripts or to restart the dev server. How do I prevent this annoying behavior? "@solidjs/meta": "0.29.4", "@solidjs/router": "^0.15.0", "@solidjs/start": "^1.0.10",...

Solid Start offline indicator in mobile / desktop app

Hi I am looking to include <OfflineIndicator/> in my app when the user goes offline in mobile / desktop app. Is there any way I can include it on all of my routes or I have to include it myself all of them?

Different server context when using "use server"?

Hi, I was trying to create a simple game project where player lobbies would (for simplicity) be saved on the server. Then I wanted to create some RPC using the "use server" so I can for example check whether the specific lobby exists etc. But I encountered that the state of the variable differed in the RPC functions and the rest of the server context, let me show an example on random number variable. src/server/number.ts...

Is there a 'useTransition' React hook equivalent in Solid?

From what I understand, useTransition for managing concurrent rendering, where you want to prioritise rendering some UI or others. Can we achieve a similar effect in Solidjs?...

Dynamic meta <Title> not updated on routes Solid-start SSR: false

app.config.js import { defineConfig } from "@solidjs/start/config"; export default defineConfig({...

Detect when client closes a connection that is being streamed from a server function

I have a server function that, when called from the client, yields data back to the client from a generator. This data stream is supposed to be continuous over time, with the restriction that the user can make a request that stops the stream (via a server function and in-memory cache). The problem I currently am facing is that if the user disconnects (leaves the page, drops connection/internet somehow), the stream remains open (server logs verify it still attempts to send data back). Is there a...

dealing with data shared between pages

this kind of seems like a common question among meta frameworks w/ routing built in of, "how do i share data from one page to the next". in this case, the cache doesn't help as this really only dedups for a single round trip more or less the scenario i'm dealing with, which i would appreciate advice, is follows: i have a dashboard page where i fetch all of the groups the user belongs to, and i display them as cards. if the user clicks a card, it brings them to /groups/[groupId]. here i render out a heading with the group name (which of course i already fetched on the previous page) and then all the rest of the page, which takes a bit to render due to fetching im waiting on. it is a nice touch if the heading renders while the rest of the page loads via suspense. this seems like a no brainer as i already have the data i wanna show.. i just don't know the best way to get it where i need it...

weird history/url derived state behavior when using mouse back button

kind of a weird issue. basically i have a modal/dialog for which i derive open/close state from the url as the source the general idea is in a hook i grab the search params, and then return a memo'd state method that parses the params and returns whether or not the dialog is open based on that. then some open/close methods too. it was seemingly working really nicely and i thought was an elegant solution, ux and dx. however, i'm noticing that the back button i have on my mouse, when trying to go back to closed state, does not work. the modal closes on button down, and then comes back on button up....

How to include Gzip compression to Solid Start project?

Hi, I was using google lighthouse to check the page performance and it suggests to me that I should use gzip compression for json api response. Is there any easy way to include it to my app?...

Prerender not working without javascript

Hello i just made my appm using solid start and i want to do prerendering. Everything compiles but when i load the page without javascript i have an empty page still. Is this normal? Here is my app.config ```ts export default defineConfig({...

Optimistically change URL and state without waiting for async to resolve

I have a list of <A/> in the sidebar. The pages that those <A/> link to have an async data using createAsync. The whole page component is wrapped in a Suspense boundary with a spinner fallback. Current behavior: when clicking a link, the URL and the state (in this case, the activeClass prop in the <A/>) stays the same until the whole request or the async data is resolved. While navigating, the page component displays the fallback spinner as it should, not the URL and and the <A/> state doesn't update....

Multiple layouts using `Router`

Hi, I cant figure out how to do nested layouts like this ```ts <SidebarProvider> <SiderBar />...

Missing SSR component after client side navigation (help with icons library SSR)

Hey all, I'm currently building a port of phosphor icons to solid, based on their react package. I wanted to also add SSR support, but I'm not very experienced in solid start. I was thinking about separate exports, like in their react package, and bundle it with babel-solid preset using ssr true. This kinda works, as I'm not getting any hydration errors, but after changing pages on client side (home -> about -> home) the icon disappears. I'm thinking that maybe in case of Solidjs it would be better to use isServer flag. Since I don't have much experience, wanted to ask for an advise, what would be the best way to export icons with good SSR support. In client side icons I'm using context for global theming of icons (like in react version). If anyone would like to share opinion or tip, I would be thankful! 😊...

Can't start solid start project

this is my dependencies. When try npm run dev and access the localhost:3000 this throws this 11:05:49 PM [vite] Error when evaluating SSR module $vinxi/handler/ssr: |- Error: Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>. at Module.notSup (file:///E:/SolidStartjs/firstTime%20SolidStart/solid-first/node_modules/solid-js/web/dist/server.js:1136:9)...
No description

Run server code only once

I'm trying to run an embedded db in SolidStart, but every time a new route is visited the db initialization is re-run and the db data gets corrupted. Is there a way to only run the db code once and reuse it for all routes? I saw this issue in nitro which seems like it would solve it, but the code still runs for every route https://github.com/nitrojs/nitro/issues/711#issuecomment-1415819402 My db initialization in utils/db.ts looks like: ```ts import { Database } from "db"...