Nils
TTCTheo's Typesafe Cult
•Created by Nils on 6/23/2024 in #questions
Replacing Context with Data Access Layer
Hi! I'm a dev with 6-7 months of React/Next experience. I'm working on a small B2B SaaS app where users can be part of multiple teams. Each team in turn can have multiple projects.
I recently read this article by the Next.js team: https://nextjs.org/blog/security-nextjs-server-components-actions. I realized I was doing a lot on the client side, and I decided to move as much as I could to the server-side, to adhere to the recommended Data Access Later approach and using Data Transfer Objects to clean, verify access, and pass data to the client side. This is the pattern I'm trying to implement:
"server-only" components: fetch, verify, clean, and return data as DTOs --> server components (page.tsx mostly): fetch DTOs based on current user's id or route slug, and pass data to client as props --> client components: render ui based on data passed as props, and add interactivity
For dynamic routes like
/dashboard/teams/[slug] I have no problem grasping how to do it. I just use the slug to get the relevant data and verify user access. But for routes like /dashboard/home where I want to display a grid of cards for a users projects in a specific team I'm not sure.
I have been using useContext to keep track off and serve the relevant data based on which team the user has as their currently selected team (there's a team selector drop down client component in the sidebar/navbar), but I would like to not rely on context if I can to keep as much as I can on the server-side.
ASK: If anyone have any tips on how to easily track and access which team is the users currently selected team, without using context, I would really appreciate it.
P.S. I have not yet pushed any update to prod, after trying to make this transition, so the "old" version can be found here: https://github.com/NilsWestgardh/briefbuddy
Thanks!
Nils10 replies