Basic system design questions for a big project
Hey, I am making a fairly ambitious app and wanted some advice on how to proceed with my system design.
Questions:
1. Is there a common way to store valuable information like a team id somewhere other than the url? (Some apps have it, some don't, I am just curious to know how they are doing this. A state management solution?)
2. For realtime functionality across multiple clients, I cannot use pusher channels with T3 because they aren't supported with trpc. Are there any other alternatives or is the most advisable course of action to just use trpc subscriptions/websockets?
3. What is the most efficient way to query data so that users have the best and most performant experience? I am assuming that most systems query their data on a "per page" basis. so when you reroute to a separate page, you query the data you want. Is this the best course of action? Will the users even feel the difference with optimized builds of nextjs?
3 Replies
Hey. I really hope, that it's more like a study project, because you're touching a few points that could lead to an ultimate footgun.
1. You can use almost anything, depending on how secure you want it to be. If you need teamID, for example, to identify the dynamic route, feel free to use URL params. On the other hand, if it grants some sort of access, you could use any state management solution, e.g. passing props or ctx or basically anything. There're a lot of videos on how to choose them for your goals.
2. Using WS on serverless is a pretty big painpoint. To me, personally, it was significantly more difficult, than while having a server. Though, you still can hook up pusher with trpc. I'll try to find an example Theo was making long ago.
3. "It depends" on a lot of things. Like, figuring out your app's data flow, the amount of data you need to query, the need in preloads, etc.
Per page basis is the most common one, I'd assume, but make sure to place data fetching as deep as it could be. Don't just yolo query everything in page.tsx if you'll have to pass it like 5 layers deep, while these layers have nothing to do with the data
Couldn't find Theo's one, but repo seems to be using Pusher and tRPC too.
https://github.com/YaroslavChuiko/GlassyChat
GitHub
GitHub - YaroslavChuiko/GlassyChat: ππ¬ A realtime chat appilication...
ππ¬ A realtime chat appilication built with using serverless tecknologes such as Pusher and PlanetScale. - YaroslavChuiko/GlassyChat
you are amazing, thank you