use case feedback: mix server and web code in the same JavaScript file

[Lxxyx]

use case: mix server and web code in the same JavaScript file.

Feedback from @midwayjs/hooks

In https://github.com/midwayjs/hooks, I implemented the concept of "zero" Api, importing functions from the backend and automatically converting them to API requests at build time.

Example:

If I use module fragments, I will be able to support a mix of server code and web code in the same JavaScript file.

Benefits:

• More productive, enabling faster development of full-stack applications
• More intuitive for developers to understand if they are currently writing server code or web code
• Compiler friendly, easy to analyze and modify

Similar example: server-side rendering for https://github.com/vercel/next.js

Next.js is a very popular front-end framework in the community, with 70.3K Stars and 1.5 million monthly downloads.

Next.js implements server-side rendering by mixing server and web code in the same file, The server-side code is removed at build time with the Babel plugin to provide a browser-ready bundle.

Live Example: Next.js | Code Elimination

Since JS is a dynamic language, the build tool will not recognize all cases.
For example, when I refer to MySQL outside of getServerSideProps, the generated client bundle will also contain MySQL, which is a buggy behavior.

Using module-fragments would be a good solution to this problem.

Reference:

• https://nextjs.org/docs/basic-features/data-fetching
• https://blitzjs.com/docs/use-query