Home > database >  ReactJS: which is better CDN or NPM?
ReactJS: which is better CDN or NPM?

Time:09-19

I'm a beginner web developer, I want to build a professional website, and I want to make it a single-page application using ReactJS, but I'm confused about using CDN or NPM. Could you please help me?

CodePudding user response:

I would say there are two very different concepts. Serving JavaScript libraries via CDNs was very common and popular in the golden age of JQuery (around 2010) and it is still valid and used today, but it has its limitations.

CDNs:

Much, much simpler – and much more limited solution. You are fetching the library code from someone elses server, and the number of libraries being served this way is probably quite limited. Whenever their server goes down, your app goes down. But I would say it is a good point to start.

NPM (or other package managers):

For starters, the number of available modules is vastly larger comparing to CDNs (also more atomic – there are lot of packages containing just a single function). You install the module on your computer and use it in your code (so it will run on your server). But you would need to use a bundler to put them together – and the learning curve is quite steep here. The need for bundlers will probably fade away sometime in the future, because modern browsers can handle modules natively – but it would take some time for the ecosystem to adapt.

Bottom line: Imagine that you are hotlinking an image from wikipedia on your website (<img src="https://wikipedia.com/…>). That is an analogy of CDN. If you have an image on computer in your living room (or your server somewhere), than it is the analogy of an NPM module. But unlike JavaScript modules, images (luckily) don't need to be bundled together.

If you are a beginner, I would suggest to start with CDN and in the meantime, get some grasp of knowledge about bundling the code. Take a look at Vite, probably.

CodePudding user response:

For ReactJS, the best way to fetch packages is npm. npm is a great tool to manage dependencies in your app using a module bundler.

  • Related