Fetching Data on the Server
I was checking out the create-t3-app docs and saw that getServerSide props was discouraged. Then what would be the better way of data that should be available on page load. For example in my current project I have a nav bar that populates the products element with data fetched from the server. When activity on page is low response time can be around 2 seconds from supabase. Instead of fetching this on client side and waiting I'd rather have the page load for a bit longer and serve all as static html. Since hosting and database are in the same location it may even speed up the full load of the page. What would be the better alternative then fetching on client side for such case?
Solution:Jump to solution
Since you're using tRPC, you could very well look into SSG and prefetching trpc queries
4 Replies
Solution
Since you're using tRPC, you could very well look into SSG and prefetching trpc queries
It wouldn't completely eliminate the loading state, but it should reduce it
There's an example of this in Chirp, Theo's t3 tutorial app
https://github.com/t3dotgg/chirp
GitHub
GitHub - t3dotgg/chirp
Contribute to t3dotgg/chirp development by creating an account on GitHub.
Thanks @uwucup that is exactly what I wanted combined with revalidation on mutate.
Follow up question if any body knows a way. Since I use this on a nav bar it is imported across many pages. Can I store and revalidate this date on server and use it in my nav bar component without having to use getStaticProps in every page that nav bar is imported?