denissant
Explore posts from servers
TTCTheo's Typesafe Cult
•Created by denissant on 4/23/2023 in #questions
Looking for a framework most well-suited for animations/transitions.
I use React and I don't like its support for animations. Code like
<div>{componentIsEnabled && <Component/>}</div> makes it hard to animate the removal of <Component/>, because when componentIsEnabled becomes false the <Component/> doesn't exist anymore.
There are libraries which fix that but I didn't like any of the APIs. I just want a built-in (built into the core UI framework) and comfortable way of doing animations.
I want to build a UI for my game (no, the actual game won't be rendered in the DOM) which will include option menus, inventory menus etc.
Please share your experience if you have had the same frustration with React and found a better framework to do animations with.
P.S. Even if I liked React, I still want to learn a new, more trendy framework because it's a personal project for which I have a ton of time.7 replies
TTCTheo's Typesafe Cult
•Created by denissant on 1/21/2023 in #questions
Passing `initialData` to react-query from `getServerSideProps` "Text content did not match" error
I have a newsfeed-like page with infinite scroll. I'm sending a request to my Laravel backend API from
getServerSideProps and passing the results to the page component with props. Then I'm passing those props to react-query's useInfiniteQuery by setting its initialData to the object I got from getServerSideProps.
This works fine but when anything changes in the database, I'm getting a "Text content did not match" error because the page source generated by NextJS doesn't match whatever is rendered client-side.
I've logged everything out and it goes like this: the browser is always getting the correct data. It receives correct data from getServerSideProps, then react-query fetches some data on the first render which is again, up-to-date data.
However the HTML generated by NextJS is not up-to-date. NextJS again receives valid data with getServerSideProps, however to generate the HTML it of course parses the page component and fetches some data with react-query. At that point it receives stale data. I've checked my Laravel logs and it always returns up-to-date data so I can't imagine what may be going wrong.
So in other words NextJS generates stale HTML because it tries to fetch data with react-query and somehow comes up with stale data. Seems like it could be caching something but why would NextJS cache a react-query call?
Any suggestions on how to debug this?1 replies
TTCTheo's Typesafe Cult
•Created by denissant on 12/2/2022 in #questions
How to add routing to a Vite VanillaJS app?
Is there a way to have native (i.e. without js) routing in a VanillaJS Vite app? I just want to have an
index.html which contains <a href=/about> that links to about.html.
I could do it with JS but I really want to keep native routing.1 replies