Comments (3)
Note 1
When navigating to admin page via clicking Admin anchor tag,
it works to my expectation, early exits component after redirect like NextJS
Note 2
If I remove the optional chain operator on res()?.name
that's rendered inside Admin component jsx, it crashes on client because res()
returns undefined
. But if you navigate to admin page via browser addressbar, the crash is ignored (logs error in terminal in dev mode).
const Admin = () => {
const res = createAsync(() => getUser());
// server does unnecessary work here when redirecting
console.log("Admin component"); // logs even after redirect
return (
<div>
<h1>admin</h1>
<p>{res().name}</p>
</div>
);
};
from solid-start.
This is by design to a certain degree. Our Async isn't blocking until where you read from the resource, not where you declare it. This avoids waterfalls that Next cannot. Similarly our resources don't throw and can be undefined. Again to be non-blocking. We are exploring space of doing blocking along the reactive graph rather than the components in Solid 2.0. But the short of this is Solid does not work like React and we need to work on our documentation.
The error behavior inconsistency on SSR + Hydration vs navigation is interesting. I'm gathering doesn't cause the server to error for some reason and then it gets skipped during hydration. That is probably worth further examination.
from solid-start.
You can avoid the rendering part by not showing the component until the resource is ready.
Add Show
as below
const Admin = async () => {
const res = await getUser();
createEffect(()=>{
if (res()) {
// won't log as by the time the component loads and redirects this won't get here
console.log('Client - Admin component');
}
});
// will log, as the resource hasn't loaded to do the redirect yet
console.log('Client and Server - Admin component');
return (
<Show when{res()}>
<div>
<h1>admin</h1>
<p>{res?.name}</p>
</div>
</Show>
);
};
from solid-start.
Related Issues (20)
- Trying to import `effect` results in parse issue. HOT 5
- [Bug?]: Something went wrong HOT 2
- [Bug?]: Redirect thrown from action cause resulting page to not see search params correctly HOT 7
- [Bug?]: Incorrect classname active on the root page (active/inactive) HOT 1
- [Bug?]: SolidStart fails to start with Daisyui and tailwindcss HOT 20
- [Bug?]: resolve type fail on `moduleResolution: "Bundler"` HOT 2
- [Bug?]: rename the index.tsx file to the name of the folder always gives a 404 HOT 5
- [Bug?]: bun create solid error on windows 11 HOT 1
- [Bug?]: Server functions that throw or return redirects when called in an action do not redirect HOT 8
- [Bug?]: Vite field in the app config has wrong types HOT 1
- [Bug?]: server function that contain await prisma function will throws error HOT 3
- [Bug?]: dup signIn import from @solid-mediaket/auth -> build error HOT 5
- [Bug?]: `Button type attribute has not been set.` in templates
- [Bug?]: createResource fails if using SSR and an exception is thrown in the wrapped function HOT 3
- [ssr]: Spreading `readOnly: false` on input applies `readonly` HOT 1
- [Bug?]: Middleware returning Response is not working properly
- [Bug?]: SolidStart aws_lambda preset unable to serve JS and CSS artifacts when deployed to AWS Lambda HOT 1
- [Bug?]: Client bundle including imports from "use server" functions HOT 2
- [Bug?]: 404 page doesn't work in cloudflare pages HOT 1
- [Feature?]: Allow `init` of projects with both `vitest` and `tailwindcss` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from solid-start.