My understanding is that npm is the right way to go if I am using node.js to do back-end development.

That used to be true, but these days lots of web projects have a build step using a bundler (Webpack, Rollup, Vite, Parcel, ...) and those bundlers can bundle web-compatible npm packages into your client-side code, creating optimized files (including the relevant parts of those npm packages) that you then use as your frontend code.

The script solution is the fundamental way you do this without a bundler.

Another closely related question is about the use of import statement, such as import bootstrap from 'bootstrap'. My understanding is that this syntax only works for the node.js backend...

That's no longer true, although you need a path on the module specifier (from "./somefile.js") or an import map (new, experimental, but maturing) when using this in browser-based code. All modern browsers support modules natively now.

These two styles correspond to two different approaches of web developement.

The "first way" (npm install etc...) makes sense as a part of a "build step" where you will use a tool to build the files exposed to internet. This is suitable for big projects with a lot of source file, where you will need linting, refactoring, etc... If you want to go this way, it's not "a lot of effort" for a single project, but there is a lot to learn. You can start with the webpack doc.

The "second way" (<script ...) will allow you to directly specify the resources to load, without a "build step". This is suitable for smaller projects with a few files. It comes with the benefits that the files exposes via mainstream CDNs like cdnjs are probably already cached due to being used by other websites.