T
TanStack•2y ago
ambitious-aqua

Handling CSS and SSR hydration

Copying from the example projects, I have a __root.tsx file that declares the well known 
<html>
  <head></head>
  <body></body>
</html>
<html>
  <head></head>
  <body></body>
</html>
Using Vite in Dev mode everything works out well. When I build for production, I face the challenge that server doesn't know the name of the assets files produced by Vite, but I can read those from the Vite manifest (I have to do this same drill also for referencing entry-client.tsx, which on the PROD bundle has a different name too. With this change, the first load of every page looks good, but if I trigger client side routing the __root.tsx component re-renders and, since the entry-client.tsx doesn't know the path of the production assets, it loses the import of stylesheets. How do you deal with such problem?
1 Reply
ambitious-aqua
ambitious-aquaOP•2y ago
I solved by re-introducing the index.html file on root. Which I read on server side and on PROD, instead of reading from root, I read the built artifact. Then from __root.tsx I don't render the whole page, but only the app inside of the body. https://github.com/giacomorebonato/fastrat/blob/main/src/routes/__root.tsx

Did you find this page helpful?