Documentation on static assets + image optimization
I now try to develop some basic website using tanstack start.
For that i need to handle static assets, such as images.
I am still relatively new to web pages development and I would really like to see how to handle static assets with TanStack Start.
What i am saying is that docs are missing for that part. I see that we have
public directory with static assets alongside src which is then copied to dist/client and .output/public folders. I could really use some clarification on why and how that happens (i am interested more in "why").
Next thing is working with images. We can use images referencing either
- imported file with "import" directive, that sits in src, then it's subject to bundling etc., for example import logo from '@/images/logo.svg and then use <img src={logo} ...
- reference as <img src="/name-of-pic-in-public-dir.jpg" .... as long as name-of-pic-in-public-dir.jpg exists in public folder
I guess in first approach (with importing) the image is subject for bundlers etc., while in public folder it remains untouched.
Then, I would like the docs to touch on image optimization. There's already small mention in docs about migrating from Next.js and replacement for Image component from next/image, but that's not direct explanation and you have to dig for it.
SUMMARY
I know that people here are rather experienced FE devs, and above for most is obvious. However, for me it is not and it would be good for TanStack to include docs about those (and could include TanStack improvements in those areas).
This will be beneficial for all users that in future will pick TanStack Start as their first technology for website development and such docs will be more complete and self contained + IMO it will attract even more users to using TanStack Start.1 Reply
unwilling-turquoiseOP•2mo ago
after digging around for a while in the area, i came to understanding that image optimization is quite separate concern from the framework . So to produce correct assets (different sizes and optimized format) can be handled entirely be external tool, like vite-imagetools
also, handling those also can be done via raw img or unpic's Image component
so after all, this image optimization subject is quite separate from tanstack start itself, however coming from Next.js one might expect image optimization solution to be built-in the framework 🙂