What Are Static Assets?

[SOUND]. 0:00 At this point, our application generates dynamic content using templates, 0:04 variables and cookies. 0:08 But sometimes a server doesn't need to do anything more 0:10 complex than sending the files directly to the user. 0:13 Static files like images and 0:16 style sheets don't need to be processed by the application. 0:18 They just need to be delivered to the browser. 0:22 Let me show you how that works by setting up our 0:25 app to deliver a custom style sheet. 0:28 In case you're still confused about dynamic and 0:30 static content, let me quickly explain the difference. 0:32 When a browser makes a get request to the index route of our application, 0:38 it receives HTML. 0:43 But as we've seen, 0:45 there's no file called index.html in any of the folders in our application. 0:46 When the app receives the request it has to assemble and 0:52 render the HTML from templates and data. 0:56 This allows the application to serve customized web pages to different clients. 0:59 As you know, browsers use HTML, CSS, and JavaScript to display a web page. 1:05 The CSS and client-side JavaScript files will always be the same, 1:12 no matter who requests them, or what the application state is. 1:17 In fact, they're literally our complete files sitting on the web server in one or 1:23 more directories. 1:28 Express doesn't need to build them, like it does the HTML in our application. 1:30 For this reason, these files are called static assets. 1:36 We've been writing our Express application in JavaScript. 1:40 This is different from the client-side JavaScript our web page might use. 1:44 Our Express app and our browser app are two different environments and 1:49 play different roles in what the end-user sees. 1:53 In fact, the static JavaScript files don't even look like JavaScript to Express. 1:57 They might as well be long strings of nonsense as far as Express is concerned. 2:02 These files are just handed straight over to the browser without 2:07 even being attempted to be interpreted by Express. 2:10 The browser knows what to do with these files and 2:15 turns them into all kinds of magical user interactions. 2:18 To send images plain CCS and 2:22 JavaScript files from the server's file system to the client. 2:25 Express uses something called a Static Server. 2:28 Because these files are prebuilt and won't change on the server, passing them through 2:32 all of Express's routing and template rendering would be a waste of time. 2:37 The Static Server just sends them straight to the client 2:42 saving Express time and effort. 2:45 In the next video, we'll see how to set up Express's static sever and 2:48 send static assets to the users browser. 2:53