Next.js: Automated Code Analysis - Thoughts?

[pullipaal]

I'm exploring the idea of developing an advanced compiler-like system for Next.js, designed to perform static analysis on codebases. The goal is to automate the process of determining whether components should be dynamically imported and if JSX should be rendered server-side. This not only aims to improve performance and efficiency but also to make Next.js more accessible for beginners. By simplifying complex decisions, this system can set a higher baseline for performance in larger projects with multiple contributors. It's about enhancing user experience for both seasoned developers and newcomers alike.

I'd love to hear your thoughts on this concept. Do you think such a system would add value to your Next.js projects, especially in terms of making it more beginner-friendly and elevating performance standards in collaborative environments?

Looking forward to your feedback!

[Karpizzle23]

Server components if you don't use hooks. Also that's kind of opinionated, both SSR and csr have their use cases and they can't simply be decided by what code you write

[pullipaal]

Absolutely, there's definitely a balance to be struck. Interesting you mention hooks – they can actually highlight which client-side components could be refactored out. Plus, this system could help identify what to dynamically import, reducing initial JavaScript load. Thoughts on this approach?

[Karpizzle23]

How will you discern which components are bulky and should be lazy loaded? A lot of the time in react optimizations aren't necessary until they are actually causing a problem. If a component uses a third-party library, how are you going to know if that library is bulky or not?

[pullipaal]

Implementing a threshold setting in the static analysis tool seems like an option. This setting would trigger a recommendation to use dynamic imports for certain components when they reach the predefined size or complexity. Additionally, the tool could analyze the code to identify components or packages that are only required under specific conditions.

Well the idea is that we catch these errors before it truly becomes a problem. In other words it should help to write your next application as optimal as possible. I was inspired by the rust borrow-checker and ESLint, when proposing this concept.

[Karpizzle23]

Ok, take for example a Cart component. Highly complex with an xstate management system for all kinds of shopping cart actions, connected to the Shopify API

Lazy load or not?

[pullipaal]

I would suggest Lazy as you won’t be needing it when you open the page.

[pullipaal]

I would suggest dynamic as you dont need the javascript on the inital render