1 00:00:01,250 --> 00:00:05,270 We've now taken a look at the four different pages that we're gonna create for this react application. 2 00:00:05,270 --> 00:00:08,570 Remember over time we're going to add in a couple more pages to this thing. 3 00:00:08,570 --> 00:00:13,350 For all that ticketing features and aspects but right now our backend only supports authentication. 4 00:00:13,450 --> 00:00:17,150 So it is going to build out the react out to support authentication. 5 00:00:17,210 --> 00:00:17,510 All right. 6 00:00:17,600 --> 00:00:21,310 So quick discussion on how we're going to actually build this thing. 7 00:00:21,440 --> 00:00:22,620 Now on this diagram right here. 8 00:00:22,640 --> 00:00:24,640 This is a diagram we had seen previously. 9 00:00:24,650 --> 00:00:29,690 This is how a normal traditional react application works in a development setting. 10 00:00:29,690 --> 00:00:35,150 So in a development setting we'll be running some kind of normal react app or really a create react 11 00:00:35,150 --> 00:00:40,850 app development server anytime a user types in a your l to their browser that's gonna point them to 12 00:00:40,850 --> 00:00:42,050 our ReACT application. 13 00:00:42,050 --> 00:00:46,850 We're going to probably end up making at least two requests but usually probably end up making three 14 00:00:47,530 --> 00:00:53,240 the very first requests is going to fetch us an HMO file that is pretty much empty except for some very 15 00:00:53,240 --> 00:00:55,000 basic script tags inside of it. 16 00:00:55,340 --> 00:01:00,350 The browser will load up an ACL file it's going to see that some different script tags are listed inside 17 00:01:00,350 --> 00:01:00,720 there. 18 00:01:00,800 --> 00:01:05,840 And so the browser will make a up request possibly several requests to get some additional JavaScript 19 00:01:05,840 --> 00:01:11,810 files that will be made to the create react app development server that's going to respond with the 20 00:01:11,900 --> 00:01:14,180 JavaScript files that the browser is asking for. 21 00:01:14,360 --> 00:01:18,950 The browser will then execute all that JavaScript code or react application will startup and the react 22 00:01:18,950 --> 00:01:23,360 app will possibly decide that it needs to make some follow up requests to get some data. 23 00:01:23,360 --> 00:01:29,480 And so it might make a request to say the order service to get a list of orders the order service will 24 00:01:29,480 --> 00:01:33,860 then respond with that data and then the react Apple take that data and render some actual content on 25 00:01:33,860 --> 00:01:34,990 the screen. 26 00:01:35,000 --> 00:01:42,830 So again at least two probably three or more requests just to show some content to a user rather than 27 00:01:42,830 --> 00:01:44,580 taking this traditional approach. 28 00:01:44,600 --> 00:01:50,210 We're going to be using server side rendering instead in a server side rendering approach the browser 29 00:01:50,210 --> 00:01:55,430 is going to make a request to our next J.S. development server next to us is the framework we're going 30 00:01:55,430 --> 00:01:58,900 to use to implement the server side rendering stuff very easily. 31 00:01:59,210 --> 00:02:04,940 The next J.S. development server is then going to internally make a couple of requests off to different 32 00:02:05,060 --> 00:02:07,460 services to fetch some data. 33 00:02:07,580 --> 00:02:11,660 So it might make a request over to the order service or the ticketing service to get a list of orders 34 00:02:11,690 --> 00:02:17,430 ticketing whatever else the next JSC development server is then going to take that data it's going to 35 00:02:17,430 --> 00:02:23,850 build out a full H2 e-mail document a document that has a ton of content rendered into it though perhaps 36 00:02:23,850 --> 00:02:29,390 some HD e-mail to list out some orders or some other list out some tickets or whatever else it thinking 37 00:02:29,400 --> 00:02:32,460 and take that H.S. Mel and send it back to the user's browser. 38 00:02:32,460 --> 00:02:39,340 All in one single request so there's several reasons we are making use of server side rendering here. 39 00:02:39,420 --> 00:02:45,300 The first reason and to be blunt the most the most important reason for the context of this application 40 00:02:45,300 --> 00:02:49,300 is I want to show you how to setup server side rendering in the context of micro services. 41 00:02:49,320 --> 00:02:51,870 That's really why we are using next J.S. here. 42 00:02:52,110 --> 00:02:54,060 But there's several other reasons to do this. 43 00:02:54,060 --> 00:02:58,710 First off a user is going to see some content appear on the screen much more quickly. 44 00:02:58,710 --> 00:03:03,150 Number two a user is going to be able to see content more quickly particularly if they're on a mobile 45 00:03:03,150 --> 00:03:03,890 device. 46 00:03:03,900 --> 00:03:08,610 So if a user is on a mobile device they might not be able to load up all the javascript effectively 47 00:03:08,610 --> 00:03:11,130 or in any timely fashion. 48 00:03:11,190 --> 00:03:17,780 If we have a lot of complicated stuff going on the screen and finally server side rendered applications 49 00:03:17,780 --> 00:03:21,150 tend to fare a lot better with search engine optimization. 50 00:03:21,180 --> 00:03:26,330 So these are all fantastic reasons to implement server side rendering inside of a kind of ticket purchasing 51 00:03:26,330 --> 00:03:29,030 or e-commerce type application. 52 00:03:29,030 --> 00:03:29,270 All right. 53 00:03:29,270 --> 00:03:33,410 So now that we've got a quick reminder on how we're gonna implement all this one we're paused connecting 54 00:03:33,410 --> 00:03:37,760 on that next video and we're gonna do some initial setup of next J.S. inside of our project.