1
00:00:02,000 --> 00:00:04,000
Now for this section, I wanna start

2
00:00:04,000 --> 00:00:07,000
with a traditional React App.

3
00:00:07,000 --> 00:00:10,000
And I wanna come back to one of the main assets,

4
00:00:10,000 --> 00:00:13,000
One of the main reasons for using next JS,

5
00:00:13,000 --> 00:00:16,000
which I did already talk about

6
00:00:16,000 --> 00:00:19,000
in the first course section as well,

7
00:00:19,000 --> 00:00:22,000
this here is a dummy page rendered

8
00:00:22,000 --> 00:00:25,000
by a Standard React Application.

9
00:00:25,000 --> 00:00:30,000
To be precise by this React Application here.

10
00:00:30,000 --> 00:00:34,000
I just created a very simple React App with one component,

11
00:00:34,000 --> 00:00:37,000
the app component and there I fetch data

12
00:00:37,000 --> 00:00:40,000
from a dummy-backend which is adjacent file

13
00:00:40,000 --> 00:00:41,000
in my public folder,

14
00:00:41,000 --> 00:00:44,000
which is therefore served by this development server.

15
00:00:44,000 --> 00:00:46,000
And in there I got some dummy data,

16
00:00:46,000 --> 00:00:49,000
but the important thing is that I'm not loading

17
00:00:49,000 --> 00:00:52,000
the data in my JavaScript code

18
00:00:52,000 --> 00:00:55,000
by importing that file or anything like that.

19
00:00:55,000 --> 00:00:57,000
But that instead I send

20
00:00:57,000 --> 00:01:00,000
the HTTP requests to that file,

21
00:01:00,000 --> 00:01:03,000
once everything is up and running in the browser,

22
00:01:03,000 --> 00:01:06,000
and then I load data extracted,

23
00:01:06,000 --> 00:01:09,000
set my state and rendered the data.

24
00:01:09,000 --> 00:01:11,000
Now, what we see there for is

25
00:01:11,000 --> 00:01:13,000
that dummy data on the screen.

26
00:01:13,000 --> 00:01:18,000
But if we then view the page source of this file,

27
00:01:18,000 --> 00:01:22,000
we see that on there in this page source code,

28
00:01:22,000 --> 00:01:25,000
the data is nowhere to be found.

29
00:01:26,000 --> 00:01:30,000
We only got this empty div here with the id="root",

30
00:01:30,000 --> 00:01:33,000
which is the different in which our React Application

31
00:01:33,000 --> 00:01:35,000
is actually rendered,

32
00:01:35,000 --> 00:01:37,000
and we can see that rendered application

33
00:01:37,000 --> 00:01:40,000
if we inspect that page where we then see

34
00:01:40,000 --> 00:01:44,000
the actual Dom, as it's currently rendered.

35
00:01:44,000 --> 00:01:48,000
There inside of the div with the id="root",

36
00:01:48,000 --> 00:01:52,000
we do see the an ordered list with the list items,

37
00:01:52,000 --> 00:01:53,000
but that's only the Dom

38
00:01:53,000 --> 00:01:56,000
as it was rendered by JavaScript

39
00:01:56,000 --> 00:01:59,000
and by the react up deal for all

40
00:01:59,000 --> 00:02:02,000
after we loaded the this Page.

41
00:02:02,000 --> 00:02:07,000
The actual HTML content served by the server.

42
00:02:07,000 --> 00:02:09,000
So loaded by the browser initially

43
00:02:09,000 --> 00:02:13,000
is this HTML code instead.

44
00:02:13,000 --> 00:02:17,000
And that code did not include any data.

45
00:02:17,000 --> 00:02:19,000
Now that can have a couple of disadvantages,

46
00:02:19,000 --> 00:02:23,000
as I already mentioned in the first course Section.

47
00:02:23,000 --> 00:02:26,000
For example, our users need to wait

48
00:02:26,000 --> 00:02:28,000
for the data to be loaded,

49
00:02:28,000 --> 00:02:30,000
to actually see something on the Screen.

50
00:02:30,000 --> 00:02:32,000
Now here that's Super fast

51
00:02:32,000 --> 00:02:35,000
because that dummy-backend file

52
00:02:35,000 --> 00:02:38,000
is served by my local development server,

53
00:02:38,000 --> 00:02:40,000
which runs on the same machine

54
00:02:40,000 --> 00:02:42,000
as the user's here during development.

55
00:02:42,000 --> 00:02:45,000
And therefore we don't really see a difference here,

56
00:02:45,000 --> 00:02:48,000
but for real pages where we fetch data

57
00:02:48,000 --> 00:02:51,000
from some backend API,

58
00:02:51,000 --> 00:02:54,000
loading that data could take a second or so.

59
00:02:54,000 --> 00:02:56,000
And therefore, we might have a delay.

60
00:02:56,000 --> 00:02:57,000
We might have a loading spinner,

61
00:02:57,000 --> 00:03:01,000
which our users have to see before the data arrives.

62
00:03:01,000 --> 00:03:03,000
So the user experience could

63
00:03:03,000 --> 00:03:06,000
be sup-optimal when fetching data like this

64
00:03:06,000 --> 00:03:09,000
not necessarily often, it's fine,

65
00:03:09,000 --> 00:03:12,000
but it could be now an even bigger problem

66
00:03:12,000 --> 00:03:15,000
could be search engine optimization though.

67
00:03:15,000 --> 00:03:17,000
If you are building an app

68
00:03:17,000 --> 00:03:19,000
where search engines like Google

69
00:03:19,000 --> 00:03:21,000
should be aware of your content,

70
00:03:21,000 --> 00:03:26,000
you'll have a problem because this HTML code,

71
00:03:26,000 --> 00:03:28,000
which is initially sent back

72
00:03:28,000 --> 00:03:30,000
by the server to declined,

73
00:03:30,000 --> 00:03:33,000
that is what search engines will see.

74
00:03:33,000 --> 00:03:36,000
And in there we got no content at all.

75
00:03:36,000 --> 00:03:38,000
So if our content matters

76
00:03:38,000 --> 00:03:40,000
and we want search engines to see

77
00:03:40,000 --> 00:03:43,000
and index that content sending back,

78
00:03:43,000 --> 00:03:45,000
this is bad.

79
00:03:45,000 --> 00:03:47,000
Now, again, that is not a problem

80
00:03:47,000 --> 00:03:50,000
for all Websites and Web Apps.

81
00:03:50,000 --> 00:03:52,000
For example, if you have a Web App

82
00:03:52,000 --> 00:03:55,000
where users need to log in anyways,

83
00:03:55,000 --> 00:03:58,000
if you have some Admin Dashboard built with react,

84
00:03:58,000 --> 00:04:01,000
then search engines might not matter to you

85
00:04:01,000 --> 00:04:04,000
because users are not going to find your page,

86
00:04:04,000 --> 00:04:08,000
your Admin Dashboard through a search engine.

87
00:04:08,000 --> 00:04:10,000
But if you do have a content heavy app,

88
00:04:10,000 --> 00:04:12,000
like a blog or a shop,

89
00:04:12,000 --> 00:04:14,000
then you of course typically

90
00:04:14,000 --> 00:04:16,000
do want search engines to find your content

91
00:04:16,000 --> 00:04:18,000
and sending back something like this

92
00:04:18,000 --> 00:04:20,000
then is bad.

93
00:04:20,000 --> 00:04:22,000
Now I did talk about that

94
00:04:22,000 --> 00:04:25,000
in the first course section already.

95
00:04:25,000 --> 00:04:27,000
I just wanted to bring it back

96
00:04:27,000 --> 00:04:30,000
into your memory because it does matter.

97
00:04:30,000 --> 00:04:31,000
That is an issue which

98
00:04:31,000 --> 00:04:34,000
we can have with Standard React,

99
00:04:34,000 --> 00:04:37,000
and the problem is that we fetch data

100
00:04:37,000 --> 00:04:41,000
in our component after the component was loaded.

101
00:04:41,000 --> 00:04:44,000
So we fetched data from the client-site,

102
00:04:44,000 --> 00:04:46,000
we send the request to the server

103
00:04:46,000 --> 00:04:49,000
after something was rendered to the screen.

104
00:04:49,000 --> 00:04:54,000
The initial response, the initial HTML page,

105
00:04:54,000 --> 00:04:56,000
which is sent back by to server

106
00:04:56,000 --> 00:04:59,000
to declined when the user first visits the page

107
00:04:59,000 --> 00:05:02,000
does not yet contain that data,

108
00:05:02,000 --> 00:05:05,000
and that can be a problem.

109
00:05:05,000 --> 00:05:07,000
And that is something where next

110
00:05:07,000 --> 00:05:11,000
JS with its server side capabilities

111
00:05:11,000 --> 00:05:13,000
and its building features can help Us.