SolidJS•4mo ago

how to make SSG use dynamic client-side routing instead of full page refresh?

I tried pre-rendering with server.prerender.crawLinks = true in app.config.ts, but when I change pages, each page does a non-ideal full page refresh. I'm guessing this means solid-start doesn't have client-side routing in SSG mode?

21 Replies

Brendonovich•4mo ago

this should work fine, can you tell if reactivity is working on the page?

Joe PeaOP•4mo ago

It looks like its just a basic static MPA. Here's a reproduction: https://github.com/lume/showcase/tree/prerender-full-page-refresh the prerender-full-page-refresh branch After you npm run build then launch with npx five-server .output/public, when you click the nav items to change routes, it does a full page refresh. What I was hoping for is that the initial payload would be from pre-render, but then the client-side rendering and routing would take over.

Brendonovich•4mo ago

Yeah that's the expected behaviour, Start isn't an MPA framework. It usually means that hydration or just regular js execution failed at a first glance could the top level import be failing?

Joe PeaOP•4mo ago

Not sure, I don't see any errors. I put a console.log at the top of app.tsx but that never runs. Do you mean the top-level await import()? Yeah not sure, but the log before that line doen't run so looks like it doesn't get that far Could it be tripping something up in the prerender step of the build? npm run dev works well, that shows how the expected result should be I was hoping to deploy something tomorrow as a static site for free on GitHub, but worse case I'll just deploy a server.

Brendonovich•4mo ago

doing this seems to fix it

Joe PeaOP•4mo ago

Hmm, are you sure? Seems to work the same when I do that, still refreshes But also that gets a little tricky when we need to do this:

let Scene
if (globalThis.window?.document) {
  ;({Scene/*, etc*/} = await import('lume'))
}

let Scene
if (globalThis.window?.document) {
  ;({Scene/*, etc*/} = await import('lume'))
}

Brendonovich•4mo ago

yeah seems to be working, though since there's no lockfile in the repo i may have a bunch of updated dependencies

Joe PeaOP•4mo ago

Wish just regular import would work, but that has some issues to iron out, f.e. it imports some things from solid-js/web that don't exist when running in Node.js

Brendonovich•4mo ago

it might be better to do the import in a createResource so you can pause rendering with Show until it's loaded or maybe clientOnly could work

Joe PeaOP•4mo ago

yeah, it's just cumbersome because I need to set the types of the variables that I will import f.e.

import type {Scene} from 'lume'

//...
const [Scene, setScene] = createSignal<typeof Scene>()
setScene(await import('lume'))

import type {Scene} from 'lume'

//...
const [Scene, setScene] = createSignal<typeof Scene>()
setScene(await import('lume'))

or similar Hmm, really the main issue is if you just put import 'lume' at the top of the module, that breaks during build. Because in that case solid-js does not export the same things as in browser

Joe PeaOP•4mo ago

I just tried this, but still full page refresh: https://github.com/lume/showcase/commit/9596c0c77af92ef4057263774b8c2570c88dd0e6

GitHub

import lume in a component on the client on mount · lume/showcase@9...

Joe PeaOP•4mo ago

You said you changed package lock? Do I need to update deps for it to work?

Brendonovich•4mo ago

ohhh you're not using pnpm my bad

Joe PeaOP•4mo ago

Oh, how can that make a difference?

Brendonovich•4mo ago

with pnpm it just fetched all the latest versions since there isn't a lockfile for it to use