CODEWITHSUNDEEP
javascriptanchorsolid-jsstatic-site-generation
David Apple
David Apple

Reputation: 101

How to link to the same page with a different parameter in SolidJS using SSG

I am struggling to get my SolidJS app to link user pages together using Static Site Generation (SSG).

/* App.jsx */
<Routes path="/user">
  <Route path="/:id" component={ User } />
</Routes>

function User() {
  const params = useParams()
  return (
    <OtherUsers url={ "json/photo/" + params.id } />
    /* More Components here */
  )
}

function OtherUsers(props) {
  const [users] = createResource(() => server.fetchData(props.url))
  return (
    <>
      <Show when={ users() }><Show when={ users()[0] }>
        <For each={ users() }>
          {(num, key) => 
          <img src={ num.photo } />
          <a href={ "/user/" + num.id } >{ num.name }</a>
          /* More fetched content here */
          }
        </For>
      </Show></Show>
    </>
  )
}

This work as expected in the development environment npm run dev. For example, I can navigate from /user/123 to /user/456. However when constructed as a Static Site Generation (SSG) website npm run build, the anchor tag directs the browser to a page that doesn't exist. For example, /user/456 returns a 404 error when navigating from /user/123 using the <a> tag (using SSG).

I have two solutions to fix the 404 error - but the both cause SolidJS to stop updating the page when the link is clicked.

First, the <A> component.

import { A } from "@solidjs/router"
...
<A href={ "/user/" + num.id } >{ num.name }</A>

Second, the useNavigate component.

import { useNavigate } from "@solidjs/router"
const navigate = useNavigate()
...
navigate("/user/" + num.id, { replace: true })

Both of these solutions update the url in the browser and the params.id appears to update. However User() and OtherUsers() are not triggered and so nothing on the page is re-drawn.

How do I force the page to re-draw?

Upvotes: 0

Views: 1082

Answers (2)

David Apple
David Apple

Reputation: 101

You can use SolidJS to create an Static Site Generation (SSG) app without setting up a complex server. App navigation must always start at index.html because this is the only html file generated when running npm run build. Here are some guidelines.

Anchor Tags

Avoid using <a> anchor tags. They prompt your browser to reload another url causing a 404 page not found error. Instead, use the <A> component to to dynamically change the route.

Resources Signals and Effects

Avoid using the SolidJS createResource component. It does not re-trigger when the properties of it's parent component change.

/* Don't do this */
const [images] = createResource(() => server.fetchData(props.url))

Instead, use createEffect to trigger whenever the properties of the parent component change and createSignal for the data of the DOM elements that you want re-drawn.

/* Do this */
const [images, setImages] = createSignal([])
createEffect(() => {
  server.fetchData(props.url).then(json => setImages(json))
})

Upvotes: 1

lobstertheremin
lobstertheremin

Reputation: 41

However when constructed as a Static Site Generation (SSG) website, the anchor tag directs the browser to a page that doesn't exist

How do you serve your SSG site? You may need to setup redirects.

Is it viable for you to use the Hash router integration? https://docs.solidjs.com/guides/how-to-guides/routing-in-solid/solid-router#hash-mode-router

Upvotes: 1

Related Questions