We've now taken a look at the four different pages that we're gonna create for this react application.
Remember over time we're going to add in a couple more pages to this thing.
For all that ticketing features and aspects but right now our backend only supports authentication.
So it is going to build out the react out to support authentication.
All right.
So quick discussion on how we're going to actually build this thing.
Now on this diagram right here.
This is a diagram we had seen previously.
This is how a normal traditional react application works in a development setting.
So in a development setting we'll be running some kind of normal react app or really a create react
app development server anytime a user types in a your l to their browser that's gonna point them to
our ReACT application.
We're going to probably end up making at least two requests but usually probably end up making three
the very first requests is going to fetch us an HMO file that is pretty much empty except for some very
basic script tags inside of it.
The browser will load up an ACL file it's going to see that some different script tags are listed inside
there.
And so the browser will make a up request possibly several requests to get some additional JavaScript
files that will be made to the create react app development server that's going to respond with the
JavaScript files that the browser is asking for.
The browser will then execute all that JavaScript code or react application will startup and the react
app will possibly decide that it needs to make some follow up requests to get some data.
And so it might make a request to say the order service to get a list of orders the order service will
then respond with that data and then the react Apple take that data and render some actual content on
the screen.
So again at least two probably three or more requests just to show some content to a user rather than
taking this traditional approach.
We're going to be using server side rendering instead in a server side rendering approach the browser
is going to make a request to our next J.S. development server next to us is the framework we're going
to use to implement the server side rendering stuff very easily.
The next J.S. development server is then going to internally make a couple of requests off to different
services to fetch some data.
So it might make a request over to the order service or the ticketing service to get a list of orders
ticketing whatever else the next JSC development server is then going to take that data it's going to
build out a full H2 e-mail document a document that has a ton of content rendered into it though perhaps
some HD e-mail to list out some orders or some other list out some tickets or whatever else it thinking
and take that H.S. Mel and send it back to the user's browser.
All in one single request so there's several reasons we are making use of server side rendering here.
The first reason and to be blunt the most the most important reason for the context of this application
is I want to show you how to setup server side rendering in the context of micro services.
That's really why we are using next J.S. here.
But there's several other reasons to do this.
First off a user is going to see some content appear on the screen much more quickly.
Number two a user is going to be able to see content more quickly particularly if they're on a mobile
device.
So if a user is on a mobile device they might not be able to load up all the javascript effectively
or in any timely fashion.
If we have a lot of complicated stuff going on the screen and finally server side rendered applications
tend to fare a lot better with search engine optimization.
So these are all fantastic reasons to implement server side rendering inside of a kind of ticket purchasing
or e-commerce type application.
All right.
So now that we've got a quick reminder on how we're gonna implement all this one we're paused connecting
on that next video and we're gonna do some initial setup of next J.S. inside of our project.