All language subtitles for 007 Running Server-side Code & Using the Filesystem_Downloadly.ir_en

So we added get static props

with some dummy code,

but at the moment we're really just,

not doing anything that would require

us to add that function.

We could just prepare dummy data like this

in the component function as well.

Well, of course I started with such a simple example to

just get started with get static props.

A more realistic example would be that we have a data file

like this dummy backend Json file

from which we wanna load data.

But we do wanna load the data when the page is prepared.

We don't wanna reach out

to that file through a HTTP request

or anything like that from the client site.

And therefore will now utilize the fact that any code inside

of get static props is executed on the server site so to say

with server site capabilities.

And that means that we can now, for example,

work with the file system.

For this I'll add import at the top

and I'll import Fs from Fs.

Now this imports the file system module from node JS.

This is not a third party package

which we needed to install.

It's one of the core node JS modules instead.

And working with the Fs module,

would fail if you try to do it on the client site,

because browser site Java script

can't access the file system.

And especially not our project file system here

because the entire project is not served to our visitors.

But we can import this year nonetheless

and use the file system module inside of get static prompts.

So we can use Fs here.

And next JS is very clever

and sees which imports you only use in get static props

or similar functions, which we'll learn about later.

And then those imports are basically stripped out

of the client site code bundle.

So when the code for the client site,

the react app code for the browser site,

when that is prepared, that import will not be part of it.

Next JS will ignore it for the client site,

it will split your code in a clever way.

So to component code in general will be part

of the client site code, this import and this code won't be.

And now we can use Fs to get access to this

dummy backend json file with the read file

or to read file sync function,

read file sync synchronously reads the file

and blocks the execution until it's done.

Read file on the other end wants a call back to continue.

And we can actually also import

the file system from Fs/promises,

which is a special version of this note JS module

that uses promises.

And when we do so read file actually returns a promise.

And since this is an async function

we can then just a wait this.

Now read file just needs a path

to the file which you wanna read.

So we can construct this path here and this path

or let's name it file path,

this path should lead to the dummy backend Json file.

Now to construct this path, we can import another module

from node JS the path module from path.

And that's a module with helpful

functionalities for building paths.

Now, here we can use path and execute to join method

to build a path that can be consumed by read file.

And here I wanna start from

inside the current directory and then basically work my way

to this data directory and the dummy backend Json files.

Now for this, we basically wanna dive into the data folder

and then grab this dummy backend Json file.

And to do this, we, first of all needs to tell path join

in which path we're starting

and we can get to current working directory

by using another node JS object or concept.

And that's the process object

which is globally available in node JS.

And then on process, we can execute the CWD method

which stands for current working directory.

And this gives you the current working directory

off this code file when it's executed.

Now, the important thing here is that this current

working directory will not be the pages folder.

Instead when this file is executed,

next JS will be executing it,

and it will basically treat all the files as if they sit

in our root project folder.

So the current working directory

will be the overall project folder

instead of the pages folder.

That's important to know.

So with that, we tell node JS

or the path joined methods to be precise,

that we start in this overall project directory.

Then we add a comma.

And the next argument is data

because we wanna dive into the data folder.

We wanna build a path which starts

at the current working directory.

So to project directory and then dives

into the data directory.

And then we add another argument.

We can add an infinite amount of arguments here,

which holds the file name we wanna use.

So in this case, dummybackend.Json

This now builds an absolute path to this file,

and that's now the path which we pass to read file.

So this will now read this file.

So with that, we get our Json data from that Json file

and now to get our actual data

we can call Json pars on the Json data.

Json is a globally available object just

as it is on the browser site

you can use it in node JS as well

and this (indistinct) Json data

it converts it into a regular JavaScript object.

And now that data will be an object with a product key,

which holds an array.

So now we can return our props,

which are now based on that data

and the products, which are part of my props

are now data.products.

So the products I fetched from this file are now passed

as a value to products here in this object

and our data for all ultimately passed (indistinct)

props to dis component function

when next JS executes disfunction for us.

But it will first of all, go through that function.

And hence, now if we save everything

and you reload local hosts free thousand,

you'll see free products here.

Again, if you viewed a page source,

you see that all the data is there right from the start.

Here it is,

so it was pre rendered

And was pre-rendered with help of get static props

which now executes a bunch of server site code

that never reaches the client.

It's only executed when next JS pre renders our page.