<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ivan B</title>
    <description>The latest articles on DEV Community by Ivan B (@apla).</description>
    <link>https://dev.to/apla</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F845912%2Faeb638bd-d885-46fe-a7fe-68208e542cb2.jpeg</url>
      <title>DEV Community: Ivan B</title>
      <link>https://dev.to/apla</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/apla"/>
    <language>en</language>
    <item>
      <title>Serving static files with Node.JS</title>
      <dc:creator>Ivan B</dc:creator>
      <pubDate>Tue, 12 Apr 2022 21:11:32 +0000</pubDate>
      <link>https://dev.to/apla/serving-static-files-with-nodejs-3jg4</link>
      <guid>https://dev.to/apla/serving-static-files-with-nodejs-3jg4</guid>
      <description>&lt;h2&gt;
  
  
  Serving static files with Node.JS
&lt;/h2&gt;

&lt;p&gt;Node.js have an internal &lt;code&gt;http&lt;/code&gt;/&lt;code&gt;https&lt;/code&gt; module to create a web server. But almost nobody uses &lt;code&gt;http.Server&lt;/code&gt; as is, the majority of users are using &lt;code&gt;Express.js&lt;/code&gt; either directly or indirectly, as a part of a framework like &lt;code&gt;Next.js&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://expressjs.com" rel="noopener noreferrer"&gt;Express.js&lt;/a&gt;, with its long-lived version 4 is famous for its somewhat low performance. Other projects like &lt;a href="https://www.fastify.io" rel="noopener noreferrer"&gt;fastify&lt;/a&gt; or &lt;a href="https://github.com/lukeed/polka" rel="noopener noreferrer"&gt;polka&lt;/a&gt; have benchmarks outperforming &lt;code&gt;Express.js&lt;/code&gt;. I don’t know why &lt;code&gt;Express&lt;/code&gt; is slower, maybe because of regex processing of routes? If you’re using parametric routes like &lt;code&gt;/users/:userid/entity&lt;/code&gt; and have no regexp routes, then replacing &lt;code&gt;Express.js&lt;/code&gt; with &lt;code&gt;fastify&lt;/code&gt; or &lt;code&gt;polka&lt;/code&gt; will add a performance boost to your app. They are not direct replacements, but you can convert code if you really need that boost. In the article below benchmarks shows huge improvement, but in reality, your code will be a limiting factor to your app performance, and you are unlikely notice any improvement.&lt;/p&gt;

&lt;p&gt;While writing this article, I tested many configurations: node http, node http + nginx, node http with unix socket + nginx, nginx keepalive for previous configuration. Even with very short response, protocol overhead not so big to give any performance benefits.&lt;/p&gt;

&lt;p&gt;Along with dynamic content, node.js web servers can, obviously, serve static files. Performance-wise, it is not the best way to serve static files. Using a separate proxy server like &lt;a href="https://www.nginx.com" rel="noopener noreferrer"&gt;nginx&lt;/a&gt; is much better for that purpose. Linux systems have several technologies to optimize such tasks. &lt;code&gt;sendfile&lt;/code&gt; allows you to stream file contents to the socket using operating system routines and buffers.&lt;br&gt;
&lt;code&gt;mmap&lt;/code&gt; can be used to map file contents to the memory and speed up reading purposes. In addition to the system calls above, Nginx can use its own caching mechanisms. As your project grows, you may use AWS/Azure/Google/Cloudflare/whatever CDNs to distribute static files for users in different regions. This way you’re trading the cost of running your compute nodes for cheaper CDN bandwidth.&lt;/p&gt;

&lt;h3&gt;
  
  
  Serving static content
&lt;/h3&gt;

&lt;p&gt;Let’s get back to the coding. While you’re writing code for your server, it’s probably easier to include static file serving into web server code. And, probably, this should not affect your server performance. Let’s try!&lt;/p&gt;

&lt;p&gt;All code snippets and test scripts are available on my GitHub repo &lt;a href="https://github.com/apla/node-static-server-test" rel="noopener noreferrer"&gt;https://github.com/apla/node-static-server-test&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbv2fcvl2jhwnmgof6kqz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbv2fcvl2jhwnmgof6kqz.png" alt="node serve static express polka fastify"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Servers with only dynamic routes (higher bars) and with added file serving routine (lower).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Code for static file serving adopted from those pages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://expressjs.com/en/starter/static-files.html" rel="noopener noreferrer"&gt;https://expressjs.com/en/starter/static-files.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://expressjs.com/en/resources/middleware/serve-static.html" rel="noopener noreferrer"&gt;https://expressjs.com/en/resources/middleware/serve-static.html&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/lukeed/polka/blob/master/examples/with-serve-static/index.js" rel="noopener noreferrer"&gt;https://github.com/lukeed/polka/blob/master/examples/with-serve-static/index.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/fastify/fastify-static" rel="noopener noreferrer"&gt;https://github.com/fastify/fastify-static&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why web server performance suffers from file serving middleware? Chaining middleware is a way to write asynchronous code the same way as old synchronous code was written decades ago. Chained middlewares dissect request bit by bit and made those bits available before starting the main URL handler in the app. But everything comes with a cost. Mapping URLs to the file system, checking session from cookie against a database, parsing request body, and storing uploaded files in the filesystem consume resources. As an application developer, you can choose proper way, when you use middleware as a request processing atoms depending on URL. Or Lazy way, where most middlewares are just generic request parser/validator/something else&lt;br&gt;
and used like &lt;code&gt;app.use(middleware)&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Such a lazy approach leads to running every application middleware before processing every request.&lt;/p&gt;

&lt;p&gt;As you can see on the chart, I’ve added file serving middleware and they run before request. To send file contents to the user, the serving routine should make sure the file exists. So, for every request web server checks if there is file exists. &lt;/p&gt;

&lt;h3&gt;
  
  
  Filesystem callback
&lt;/h3&gt;

&lt;p&gt;But what do I really want, when I add file serving middleware into my app? I want my dynamic routes processed as usual, but, &lt;em&gt;if none matches&lt;/em&gt;, the server should check for the path in the filesystem. Only as a fallback. &lt;/p&gt;

&lt;p&gt;&lt;code&gt;Express.js&lt;/code&gt; doesn’t have such a handler, but it processes &lt;code&gt;use&lt;/code&gt; middlewares as registered by use method. &lt;code&gt;polka&lt;/code&gt; calls all &lt;code&gt;use&lt;/code&gt; middlewares at request start, but have &lt;code&gt;onNoMatch&lt;/code&gt; handler. &lt;code&gt;fastify&lt;/code&gt; server page mentions &lt;a href="https://www.fastify.io/docs/latest/Reference/Server/#setnotfoundhandler" rel="noopener noreferrer"&gt;setNotFoundHandler&lt;/a&gt; with &lt;code&gt;preValidation&lt;/code&gt; hook on &lt;a href="https://www.fastify.io/docs/latest/Reference/Lifecycle/#lifecycle" rel="noopener noreferrer"&gt;lifecycle page&lt;/a&gt;. But I could not find a way to use &lt;code&gt;fastify-static&lt;/code&gt; with &lt;code&gt;preValidation&lt;/code&gt; hook.&lt;/p&gt;

&lt;p&gt;Results:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2z1yrshpprw5fnbwg42.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs2z1yrshpprw5fnbwg42.png" alt="node serve static fixed express polka fastify"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;File handlers push at the end of middleware list (express) or to special &lt;em&gt;if none matches&lt;/em&gt; handler (polka). No solution for fastify.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;As you can see, proper middleware usage can benefit your app with faster response times and lower system load. Maybe it’s time to check other &lt;code&gt;use&lt;/code&gt;d middlewares and move form validation, body parsing, and other specific middlewares to the URLs where is needed?&lt;/p&gt;

&lt;h3&gt;
  
  
  Existing static middleware
&lt;/h3&gt;

&lt;p&gt;While browsing source files, I discovered some overengineered static handlers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/expressjs/serve-static/blob/master/index.js" rel="noopener noreferrer"&gt;https://github.com/expressjs/serve-static/blob/master/index.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/fastify/fastify-static/blob/master/index.js" rel="noopener noreferrer"&gt;https://github.com/fastify/fastify-static/blob/master/index.js&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/lukeed/sirv/blob/master/packages/sirv/index.js" rel="noopener noreferrer"&gt;https://github.com/lukeed/sirv/blob/master/packages/sirv/index.js&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At least two of them use &lt;code&gt;send&lt;/code&gt; package&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/expressjs/serve-static/blob/master/index.js" rel="noopener noreferrer"&gt;https://github.com/expressjs/serve-static/blob/master/index.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;serve-static&lt;/code&gt; is default for &lt;code&gt;Express&lt;/code&gt; and &lt;code&gt;fastify-static&lt;/code&gt; is default for &lt;code&gt;fastify&lt;/code&gt;; those packages are much slower than a real proxy. They must be used only for testing and light load scenarios, but with a light load, you’re not needed &lt;code&gt;ETag&lt;/code&gt;, &lt;code&gt;Cache-Control&lt;/code&gt; and &lt;code&gt;Max-Age&lt;/code&gt; headers and other engineering efforts to optimize file serving. &lt;code&gt;sirv&lt;/code&gt; package does even more. It caches file stat in memory, without revalidating when the file changes. I described why those efforts it is not needed at the beginning of this article. You can trust me, or you check it out for yourself.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxc0zr0t3daxywtzmsatp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxc0zr0t3daxywtzmsatp.png" alt="node serve static express polka nginx"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Express, polka, and Nginx comparison on 1K file. RPS values differ from previous charts because benchmarks performed on slower Linux VPS. I did it on purpose to limit all servers to using only one available CPU core.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Before writing this article I’ve &lt;a href="https://www.reddit.com/r/node/comments/cu74cz/explain_me_serving_static_files_in_express_in_an/" rel="noopener noreferrer"&gt;seen&lt;/a&gt; &lt;a href="https://hashnode.com/post/why-is-it-not-recommended-to-serve-static-files-from-nodejs-ciibz8flv01duj3xt4lxuomp3" rel="noopener noreferrer"&gt;many&lt;/a&gt; &lt;a href="https://stackoverflow.com/questions/9967887/node-js-itself-or-nginx-frontend-for-serving-static-files" rel="noopener noreferrer"&gt;questions&lt;/a&gt; it is good or not to use Node.JS as http file server. And I have no definitive answer on how much difference I will have. I always used Nginx before node.js to serve static in world-facing services. &lt;/p&gt;

&lt;h3&gt;
  
  
  More bad examples
&lt;/h3&gt;

&lt;p&gt;Take a look at Nest.js web server. When the file serving option is turned on, it not only slows down your app because &lt;a href="https://github.com/nestjs/serve-static/blob/master/lib/loaders/express.loader.ts" rel="noopener noreferrer"&gt;filesystem checks for every request&lt;/a&gt; but also using &lt;a href="https://github.com/nestjs/serve-static/commit/532ca9047bc40efeb00f5f0aae3ab7f194097c9b" rel="noopener noreferrer"&gt;synchronous fs.stat&lt;/a&gt; to check if the file exists.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;You definitely should not have to use node.js for static files in production. And it is better to use that functionality only in development because on every unknown dynamic route your web server will check the filesystem. But the main point of this article is that wrongly placed middleware can hurt the performance of your app.&lt;/p&gt;

&lt;h3&gt;
  
  
  P.S.: Best performance at any cost
&lt;/h3&gt;

&lt;p&gt;If you want the best performance at any cost, take a look at uWebSockers.js.&lt;br&gt;
This is very fast web server, developed by Alex Hultman.&lt;/p&gt;

&lt;p&gt;On my benchmark uWebSockets.js can handle 74527.95 requests per second with single process, while cluster of two polka nodes just 63141.36. Additional performance can be squeezed from node &lt;code&gt;http&lt;/code&gt;, but load balancing is a &lt;a href="https://blog.cloudflare.com/the-sad-state-of-linux-socket-balancing/" rel="noopener noreferrer"&gt;known linux problem&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;File serving doesn't need any workarounds because &lt;a href="https://github.com/uNetworking/uWebSockets/blob/master/misc/READMORE.md" rel="noopener noreferrer"&gt;of good routes handling&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Pattern matching&lt;/p&gt;

&lt;p&gt;Routes are matched in order of specificity, not by the order you register them:&lt;/p&gt;

&lt;p&gt;Highest priority - static routes, think "/hello/this/is/static".&lt;br&gt;
Middle priority - parameter routes, think "/candy/:kind", where &amp;gt;value of :kind is retrieved by req.getParameter(0).&lt;br&gt;
Lowest priority - wildcard routes, think "/hello/*".&lt;br&gt;
In other words, the more specific a route is, the earlier it will match. This allows you to define wildcard routes that match a wide &amp;gt;range of URLs and then "carve" out more specific behavior from that.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But static serving performance is not so good (10K file):&lt;/p&gt;

&lt;p&gt;polka-cluster 17778.46 RPS&lt;br&gt;
uwf-fixed 9023.0 RPS&lt;/p&gt;

&lt;p&gt;I have not added this server to compare because the author has his reasons and way of doing things. For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npm drama: npm wouldn't allow developer to delete previous versions of his package that had bugs and security issues so he got angry and released an empty package with a patch version. npm tagged &lt;code&gt;latest&lt;/code&gt; latest non-empty package because people complain after suddenly webserver stopper to work. After that, developer deprecated the package (&lt;a href="https://www.reddit.com/r/node/comments/91kgte/uws_has_been_deprecated/" rel="noopener noreferrer"&gt;removed reddit post&lt;/a&gt;); &lt;a href="https://medium.com/@rockstudillo/beware-of-uwebsockets-js-b51c92cac83f" rel="noopener noreferrer"&gt;https://medium.com/@rockstudillo/beware-of-uwebsockets-js-b51c92cac83f&lt;/a&gt;
&lt;a href="https://alexhultman.medium.com/beware-of-tin-foil-hattery-f738b620468c" rel="noopener noreferrer"&gt;https://alexhultman.medium.com/beware-of-tin-foil-hattery-f738b620468c&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/uNetworking/uWebSockets.js/discussions/171" rel="noopener noreferrer"&gt;nodejs drama&lt;/a&gt;: developer doesn't want to comply with existing nodejs interfaces with it's own nodejs package. «What Node.js does with their streams has no significance to this project. If you see similarities - good - but that doesn't mean anything more than that there are similarities. The entire premise, the hypothesis of this project since day 1 has always been and will continue to be: "Node.js is doing things unreasonably inefficient." In other words - the difference between this project and Node.js is no act of random.»&lt;/li&gt;
&lt;li&gt;another npm drama: &lt;a href="https://github.com/uNetworking/uWebSockets.js/discussions/413" rel="noopener noreferrer"&gt;https://github.com/uNetworking/uWebSockets.js/discussions/413&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Freedom truckers convoy icon on Github profile. Does he support only AntiCovid hysteria or horn punishment for Ottawa citizens too?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;To me, this developer is in the good company of authors of &lt;code&gt;leftpad&lt;/code&gt;, &lt;code&gt;event-stream&lt;/code&gt;, &lt;code&gt;node-ipc&lt;/code&gt;. I don't trust &lt;code&gt;uWebSockets.js&lt;/code&gt; author and I will never use it in my projects.&lt;/p&gt;

</description>
      <category>node</category>
      <category>performance</category>
    </item>
  </channel>
</rss>
