mihaaai Comments - Answer Overflow

mihaaai

Explore posts from servers

•Created by mihaaai on 9/2/2024 in #support

How to trigger server function for SSR when transitioning routes?

Thanks for the help, indeed using the slug as an argument to getInitialProps solved the problem, not everything works as expected! I've been reading about not using the use* functions on the server but damn, the docs are so much empty... Kudos! 🙏

7 replies

SSolidJS

•Created by mihaaai on 9/2/2024 in #support

How to trigger server function for SSR when transitioning routes?

NavigatorItem.tsx This is one of the navigation components that is mounted right inside the <Router> but not inside the [slug].tsx page

import { useNavigate } from "@solidjs/router";

const NavigatorItem = () => {
  const navigate = useNavigate();
  return <div onClick={() => navigate("/path/to/another-slug", { replace: true })}>...</div>
}

import { useNavigate } from "@solidjs/router";

const NavigatorItem = () => {
  const navigate = useNavigate();
  return <div onClick={() => navigate("/path/to/another-slug", { replace: true })}>...</div>
}

app.tsx The Root:

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { MetaProvider, Title } from "@solidjs/meta";
import { Suspense } from "solid-js";

import NavigatorItem from "~/components/Header/NavigatorItem";
import "./app.css";

const App = () => {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>App</Title>

          <NavigatorItem />
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
};

export default App;

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { MetaProvider, Title } from "@solidjs/meta";
import { Suspense } from "solid-js";

import NavigatorItem from "~/components/Header/NavigatorItem";
import "./app.css";

const App = () => {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>App</Title>

          <NavigatorItem />
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
};

export default App;

The problem is that getInitialProps() gets triggered only on full refresh or first load, if I click on <NavigatorItem /> the route changes but the content isn't fetched for the new slug

7 replies

SSolidJS

•Created by mihaaai on 9/2/2024 in #support

How to trigger server function for SSR when transitioning routes?

Sure: /path/to/[slug].tsx This is the page itself

import { cache, useParams } from "@solidjs/router";
import { getApiEndpoint } from "~/lib/websocket";

export const getInitialProps = cache(async () => {
  "use server";
  const params = useParams();
  // make call to backend with params.slug
  const res = await apiService.fetch(url);
  const info = await res.json();

  if (res.status === 200) return info;
  return {};
}, "slug");

// Adding this or not doesn't make difference
export const route = {
  load: () => getInitialProps(),
};

const Slug = () => {
  const info = createAsync(async () => await getInitialProps());
  return <div>{info().user}</div>
}

export default Slug

import { cache, useParams } from "@solidjs/router";
import { getApiEndpoint } from "~/lib/websocket";

export const getInitialProps = cache(async () => {
  "use server";
  const params = useParams();
  // make call to backend with params.slug
  const res = await apiService.fetch(url);
  const info = await res.json();

  if (res.status === 200) return info;
  return {};
}, "slug");

// Adding this or not doesn't make difference
export const route = {
  load: () => getInitialProps(),
};

const Slug = () => {
  const info = createAsync(async () => await getInitialProps());
  return <div>{info().user}</div>
}

export default Slug

7 replies

SSolidJS

•Created by mihaaai on 7/12/2024 in #support

How to use `createResource` value to initialize another signal on the client?

Thanks a lot for the suggestion, it worked flawlessly 😄

3 replies

Gaming

Programming