1 00:00:02,280 --> 00:00:07,610 Now of course we might be interested in sending back some HTML data, 2 00:00:07,620 --> 00:00:07,920 right, 3 00:00:07,920 --> 00:00:08,580 that would be 4 00:00:08,580 --> 00:00:09,990 great. 5 00:00:09,990 --> 00:00:14,030 Now of course we can do that, here when we write our response, 6 00:00:14,040 --> 00:00:21,730 we can use HTML, for example we can write Hello there like this and have our HTML tags there. 7 00:00:21,730 --> 00:00:27,440 Now if we do so, there are two things - one, we must now quit the server and restart it because we change 8 00:00:27,440 --> 00:00:28,250 the file, 9 00:00:28,260 --> 00:00:33,310 the ongoing process of course still is based on the old file when we executed the process. 10 00:00:33,390 --> 00:00:37,950 So when we changed the file, we have to quit the server and restarted during development and of course 11 00:00:37,950 --> 00:00:42,690 also after you deployed your server, if you change something in code and you want that code to have an 12 00:00:42,690 --> 00:00:46,620 effect, you upload it onto your server and restart the server, 13 00:00:46,620 --> 00:00:51,160 so onto your cloud machine and restart that server that runs there. 14 00:00:51,220 --> 00:00:55,360 Now with that, that is done but now you'll notice something else, if we reload 15 00:00:55,530 --> 00:00:56,430 you see Hello there 16 00:00:56,480 --> 00:00:59,420 there actually is displayed correctly 17 00:00:59,670 --> 00:01:04,740 but if we open the developer tools and go to the network tab and you reload the page so that you see your 18 00:01:04,740 --> 00:01:09,660 request there and you access this, you will notice that under headers here, if you have a look at the 19 00:01:09,660 --> 00:01:16,590 response headers, so the headers that were part of the response sent back by the server, we say nothing 20 00:01:16,590 --> 00:01:19,060 about the kind of data that this actually is. 21 00:01:19,110 --> 00:01:25,860 Now the browser here actually renders this correctly as HTML in the DOM but this is not something we 22 00:01:25,860 --> 00:01:27,150 should take for granted, 23 00:01:27,180 --> 00:01:32,790 This is a smart guess by the browser here because it sees that our content seems to contain some HTML 24 00:01:32,880 --> 00:01:36,600 content, not all browsers necessarily do that. 25 00:01:36,660 --> 00:01:44,880 Instead it is a good practice and really important to set an extra header, so to add extra metadata to 26 00:01:44,880 --> 00:01:50,610 the response header when sending back the response that explains to the browser which kind of data is 27 00:01:50,610 --> 00:01:54,420 attached because this then tells the browser what to do with that data 28 00:01:54,570 --> 00:01:57,900 and we're not relying on these smart guesses. 29 00:01:57,900 --> 00:02:04,230 Now we worked with headers before but there, we worked with headers on the requests we sent from client 30 00:02:04,230 --> 00:02:10,860 site Javascript to a backend, so we set headers on the outgoing requests, something like the content type 31 00:02:10,860 --> 00:02:12,960 of the data we attach there. 32 00:02:12,960 --> 00:02:19,320 Now we need to do the same but the other way around, we need to set headers not in the client side Javascript 33 00:02:19,620 --> 00:02:24,210 but in the server side Javascript and we can do that, on the response object, 34 00:02:24,210 --> 00:02:26,200 we got a set header method. 35 00:02:26,250 --> 00:02:32,040 This takes two arguments where the first argument is the header identifier and the second argument is 36 00:02:32,040 --> 00:02:36,450 the value for that header and there for example, we can set the content type. 37 00:02:36,450 --> 00:02:39,540 We worked with that before on client side Javascript, 38 00:02:39,540 --> 00:02:46,980 it also is a header we can set on the server side though and set this to text/html. 39 00:02:47,010 --> 00:02:54,630 This is the standardised identifier for saying hey we got HTML text data attached to the outgoing 40 00:02:54,630 --> 00:02:55,290 response, 41 00:02:55,350 --> 00:03:00,440 so it's a text, it's a string but it is HTML which is in the text. An alternative by the way 42 00:03:00,450 --> 00:03:01,860 would be text/plain 43 00:03:01,860 --> 00:03:07,290 and let me do that first to show you the difference. With text/plain we're saying this is normal text, 44 00:03:07,470 --> 00:03:14,010 don't parse it as HTML. If we do that and we restart the server and we reload this page, you see 45 00:03:14,010 --> 00:03:21,070 now the tags here are output as text because the browser is not guessing, because we're telling it that 46 00:03:21,100 --> 00:03:26,300 the data we're getting here is of text/plain and therefore the browser is not guessing whether it should 47 00:03:26,300 --> 00:03:31,410 render it, instead it knows I should not render it as HTML because you were telling me it's plain text 48 00:03:31,410 --> 00:03:38,790 and therefore it displays it just as a text node. We can of course now change this to HTML, restart the 49 00:03:38,790 --> 00:03:45,600 server and now reload and we're back to what we had before but now in a cleaner way because now we explicitly 50 00:03:45,600 --> 00:03:52,410 set this response header and tell the browser hey this is HTML content, please render it as such and 51 00:03:52,560 --> 00:03:55,140 all browsers will then do that. 52 00:03:55,140 --> 00:03:58,890 So this is actually how we should send back our HTML code here.