What are the best practices for front-end and back-end development? Could someone offer some advice?

[wasonCheung]

Two front-end modules: one is the admin panel for administrators, which typically does not require SSR; the other is the front-end pages for users, with some pages requiring SSR.The official integration with Vite is quite deep. However, I do not wish to employ a multi-entry approach to build two frontends. How might I proceed? Can I restructure the project without adverse effects?

[lfjsa]

Using Adonis for the BE, React on the FE, and Inertia to wire things up I use SSR for everything. Much of the UI state is stored in the URL and the backend sends the data accordingly.

Some helpful techniques for managing fancy CSR-looking UIs

• Pair a modal with Inertia's <WhenVisible /> component. The data within is only fetched once the modal is open. Plays well in combination with the native HTML popover API and, for a slightly different use case, the <details /> and <summary /> elements.
• Implement a modal rendering a resource by adding a ?resource-in-panel=:resourceId query param to the URL and send the resource as an optional Inertia prop. Say you want to render a task as a modal above a task list, set the link in the task list to /tasks?taskId=:taskId (or similar), then send the matching task data in a task: task | null field in the Inertia response. Is it set? Render the modal, else do nothing.
• If required, use Inertia's partial reloads to limit the load on the BE when using the above techniques. No need to fetch the full task list again when all you need is the task detail.
• Add extra swooshing flourishes using view transitions

I don't know whether this counts as "best practice" but the above works very well and adds nothing new to the stack.