Develop Experience Trace#
After recently getting the hang of @tanstack/router, I couldn't help but feel that the development experience it provides is excellent. However, during deployment, I found that @tanstack/start is still "coming soon," so I switched back to developing a single page with Next.js. When using one of them, I always think about the useful features of the other framework. I noted two points, hoping that when I encounter them again, I won't hesitate and will directly choose the most suitable solution for the scenario.
When using tanstack/router, I think about the advantages of Next.js#
Parallel routes are mentioned in the documentation, but the corresponding content is still a TODO. Similarly, for modal management, using tanstack's route mask + outlet can clearly divide responsibilities. However, in the case of carrying page context (entering a child route) and then switching mask content through child routes, it becomes unmanageable on a single route. Therefore, it is necessary to clearly define the boundaries of mask usage based on routes. This has converged the extensive vertical routing structure I originally envisioned. So, it is still possible to envision some application scenarios, implement interactions, and use them.
When using Next.js, I think about the advantages of tanstack/router#
Type-safe route parameters:
- Prompt for existing route suggestions
- Parameters of the current path route
- Automatically normalize search parameters in routes
Just this one feature is crucial for the development experience. There is a lot of glue code to handle parameters during the initial page entry process. Previously, in a company project, I wrote a lot of preprocessing logic to handle search params. Now it feels too scattered, while tanstack/router's solution is comprehensive enough. Originally, I appreciated Next.js because it is quite native, almost directly using the browser's native API. Of course, there is also remix, which takes this feature to the extreme. However, under this feature, the development experience is not smooth, and many ways of logic need to be adjusted. This loses the space for simplification in specific scenarios.
I really want to integrate tanstack router's type-safe routing logic into Next.js. Or, use it as an abstract and common type-safe solution reference case.
Next, I will try deploying tanstack router + vinxi's meta-framework.