S
SolidJS4mo ago
Zed

Need help on how to make "Kind of multipage" in SolidJs

So, basically I am new to all these frameworks stuff and solidjs is my first framework. I want to ask how can I apply a kind of multipage in Solidjs, lemme explain - I want to make a project website for a lorem ipsum company and some about us and recruitment page. I dont know how to do so that when some button or link is clicked the page will shift to other page or something like that. Just like how we use to make links to other index.html files to show other pages in the website.
8 Replies
peerreynders
peerreynders4mo ago
If I understand your question correctly I see two main options. 1. Actual MPA: Astro + SolidJS 2. Client side routing: Use solid-router
Docs
@astrojs/solid-js
Learn how to use the @astrojs/solid-js framework integration to extend component support in your Astro project.
Zed
Zed4mo ago
Yeah thanks
peerreynders
peerreynders4mo ago
I want to make a project website for a lorem ipsum company and some about us and recruitment page.
Just a follow up note. What you describe would actually be better served with the Astro+solidjs solution because with solid-router (even with SSR) the javascript bundle gets bigger as the site gets bigger until such time where one has to worry about bundle splitting. Your description is more of a content site with some interactivity. Astro can generate the (content) page HTML at build time (SSG - Server Static Generation) while leaving the page navigation to the browser's native capabilities; SolidJS can be used for the more interactive bits via islands/partial hydration. All that said, it is of course your choice.
Zed
Zed4mo ago
are u stalking me (jk) cuz this is the second post u answered for me lmao just kidding lol ok
peerreynders
peerreynders4mo ago
I'm not that familar with Discourse. Your comment regarding closing the post made be wonder if that is what happened to this post. It's only then that I realized that you posted this as well. Sorry, for the intrusion.
Zed
Zed4mo ago
does its documentaion covers all the tutorial or I have to find a yt vid nah its fine
peerreynders
peerreynders4mo ago
Frankly in terms of learning you start with Astro which is actually a good way to get familiar with this web stuff. Adding SolidJS as then more of an advanced technique. If you have your sight set on just SolidJS go ahead. Its just the Ryan Carniato spends a lot of time thinking about this stuff. https://dev.to/this-is-learning/patterns-for-building-javascript-websites-in-2022-5a93
DEV Community
Patterns for Building JavaScript Websites in 2022
Deciding on the approaches and tools to use to build on web these days can be a challenging prospect....
Zed
Zed4mo ago
ok thanks
Want results from more Discord servers?
Add your server
More Posts
Possible to map of `useSubmissions` result?I was just playing with solid-router, and was curious if there was a way to map over the results of Help Me Understand SolidStart vs. Next.js CachingI'm new to meta frameworks like SolidStart and I'm learning about Next.js to understand them better.Understanding Solid Reactivity Lint ErrorIn the following component I get this lint warning: ``` The reactive variable 'handleContextMenuCommExample in solid-testing-library example not workingHello, the `can render a route with the id` test in the solid-testing-library https://github.com/sol"<A> and 'use' router primitives can be only used inside a Route." When testing component in routerI receieve this error when trying to test a component. The component is inside another component thaFailed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.I have a store: ```typescript export const [mainStore, setMainStore] = createStore<StoreType>({ couSet default location stateHi, I'm trying to have a default state object for all navigation using solid router. I tried using uWhy does adding a new field duplicate the value?https://stackblitz.com/edit/github-zon5da?file=src%2FApp.tsx When entering a value in the input fiDoes SolidStart have a function like basePath of nextjs?I want to deploy SolidStart to a domain subpath. https://nextjs.org/docs/app/api-reference/next-confDependency configuration in AstroI'm trying to add `solid-bootstrap` as a dependency in an Astro + Solid project. This results in the