For a lot of JavaScript projects, such as Bootstrap (well you may argue that it is just a CSS framework, anyway this is not the point), the installation section comes two ways.
The first way is usually like this:
npm install bootstrap
and the second way is the one I know:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
My understanding is that npm is the right way to go if I am using node.js to do back-end development. Suppose I am using other backends (say, Python, Java) and JavaScript is run only on the client's browser, I should stick with the <script src=""></script> approach. Is this generally correct?
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 and I cannot use it on an HTML page without a lot of extra effort. Is this understanding correct?
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.