diff --git a/examples/example-ssr/src/components/App.tsx b/examples/example-ssr/src/components/App.tsx index 41f1371c..f14952e7 100644 --- a/examples/example-ssr/src/components/App.tsx +++ b/examples/example-ssr/src/components/App.tsx @@ -43,6 +43,7 @@ export function App() { Home |{" "} About |{" "} Article 1 |{" "} + Article 2 |{" "} Contact diff --git a/examples/example-ssr/src/pages/ArticlePage.tsx b/examples/example-ssr/src/pages/ArticlePage.tsx index a83c68a5..de89bbcd 100644 --- a/examples/example-ssr/src/pages/ArticlePage.tsx +++ b/examples/example-ssr/src/pages/ArticlePage.tsx @@ -6,6 +6,13 @@ const componentName = "ArticlePage" function ArticlePage(props, handleRef) { const rootRef = useRef(null) + + useEffect(()=> + { + console.log("mySlug",props.mySlug) + }, [props.mySlug]) + + useStack({ componentName, handleRef, diff --git a/examples/example-ssr/src/routes.ts b/examples/example-ssr/src/routes.ts index 69cb8c21..9f4d877b 100644 --- a/examples/example-ssr/src/routes.ts +++ b/examples/example-ssr/src/routes.ts @@ -36,7 +36,10 @@ export const routes: TRoute[] = [ getStaticProps: async (props) => { const res = await fetch("https://jsonplaceholder.typicode.com/todos"); const todo = await res.json(); - return { todo }; + + const mySlug = props.params.slug + + return { todo, mySlug }; }, }, { diff --git a/src/components/Router.tsx b/src/components/Router.tsx index a77a38c9..1706de04 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -106,7 +106,7 @@ function Router(props: { middlewares?: ((routes: TRoute[]) => TRoute[])[]; langService?: LangService; id?: number | string; - initialStaticProps?: { props: any; name: string }; + initialStaticProps?: { props: any; name: string, url: string }; }): JSX.Element { /** * 0. LangService @@ -271,15 +271,17 @@ function Router(props: { const dataFromCache = cache.get(newRoute._fullUrl); // first route visited (server & client) - const isFirstRouteVisited = newRoute.name === props.initialStaticProps.name; + const isFirstRouteVisited = newRoute._fullUrl === props.initialStaticProps.url; + log("is first route visited?",isFirstRouteVisited) // In SSR context, we have to manage getStaticProps route properties from server and client if (isFirstRouteVisited) { + log("newRoute.props",newRoute.props) if (newRoute.props) { Object.assign(newRoute.props, props.initialStaticProps?.props ?? {}); } if (!dataFromCache) { - cache.set(newRoute._fullUrl, props.initialStaticProps?.props ?? {}); + cache.set(newRoute._fullUrl, newRoute.props ?? {}); } } // if NOT first route (client) diff --git a/src/core/core.test.ts b/src/core/core.test.ts index e87f5692..fe636f65 100644 --- a/src/core/core.test.ts +++ b/src/core/core.test.ts @@ -85,7 +85,11 @@ describe("public", () => { base: "/", routes: routeList, }); - expect(ssrStaticProps).toEqual({ props: { fetchData: {} }, name: "HelloPage" }); + expect(ssrStaticProps).toEqual({ + props: { fetchData: {} }, + name: "HelloPage", + url: "/hello", + }); }); }); }); diff --git a/src/core/core.ts b/src/core/core.ts index 05995bbc..82fa977a 100644 --- a/src/core/core.ts +++ b/src/core/core.ts @@ -180,7 +180,7 @@ export async function requestStaticPropsFromRoute({ langService?: LangService; middlewares?: ((routes: TRoute[]) => TRoute[])[]; id?: string | number; -}): Promise<{ props: any; name: string }> { +}): Promise<{ props: any; name: string; url: string }> { const currentRoute = getRouteFromUrl({ pUrl: url, pBase: base, @@ -205,6 +205,7 @@ export async function requestStaticPropsFromRoute({ const SSR_STATIC_PROPS = { props: null, name: currentRoute.name, + url, }; // await promise from getStaticProps