What's the difference between next js <Script /> component rendering strategies (afterInteracive, beforeInteractive, lazyLoad) and using normal <script /> tag with async and defer?
afterInteractive, beforeInteractive and lazyLoad handles script and decide when it's loaded (from docs). It also differ in 'place' where it loads the script. beforeInteractive loads your script in <head> of your project. afterInteractive loads your script in <body> of your project.
Basically, it's just Nextjs way to handle scripts in your app. Main difference is that you should not use script tag in head (in Nextjs) but place it anywhere else and use right strategy so Nextjs knows where to place it.