🇮🇩 Originally written in Indonesian.
This English version was AI-assisted and adapted for a more natural reading experience. It is not a literal translation.
open_
Introduction
As a Frontend Developer...
I think we've all built projects without a backend at some point.
Either because the project simply doesn't need one...
or because the backend hasn't been built yet. :)
In cases like that...
the data usually doesn't come from an API.
Instead, it's stored directly inside the project. Some people put it in data.ts or data.tsx, while others prefer separating it into a .json file.
That's actually pretty common.
Especially for portfolio websites, landing pages, company profiles, or those random side projects that somehow never get finished. As long as the data never changes... it can happily stay there until one day you suddenly feel like refactoring it.
ㄟ( ▔, ▔ )ㄏ
So...
the real question is no longer where the data is stored.
Instead...
how is that data actually processed? Statically... or dynamically?
Discussion
If the data is stored as an object or array inside data.ts, data.tsx, or a data/ folder full of TypeScript files...
I think we all know what happens.
That data simply becomes part of the application's source code.
But then...
what if the data is separated into a .json file instead?
Static Data and Dynamic Data
Before we continue...
let's make sure we're talking about the same thing.
To me, it's as simple as this.
Static data is data whose value is already determined beforehand and doesn't change while the application is running.
If the data changes one day, we have to modify the source code (or the file that stores it) and rebuild the application before those changes take effect.
Meanwhile, dynamic data is data whose value can change while the application is running, without requiring another build.
The changes can come from a server, a database, an API, or any other data source that's accessed while the application is running.
Now...
you probably already have a simple picture of the difference between the two.
What If the Data Is Stored in a JSON File?
Now...
another question usually comes up.
If the data is already stored as a .json file...
how do we actually load it?
...
At least...
there are two approaches that I see quite often.
And the funny thing is...
both of them are widely used. (￣▽￣*))
The first one...
store the JSON file somewhere like @/data/
and simply import it.
import projects from "@/data/projects.json";
That's it.
Yep.
Done.
Just like that. (￣▽￣)
You can use it like any other object or array.
The second approach...
put the JSON file inside the public folder.
Then, whenever you need it...
just fetch it.
const response = await fetch("/projects.json");
const projects = await response.json();
This approach is also pretty common.
Especially in projects that are expected to use a backend later.
Because once the data moves to an API, the way you retrieve it barely changes.
You're still making an HTTP request.
Using import
When you use import, the JSON file becomes part of the build process.
So by the time the application runs, the data is already there.
That's why you can access it just like any normal object.
Using fetch()
fetch() works a little differently.
The browser sends an HTTP request while the application is running.
And it doesn't have to be a REST API.
It can request a JSON file, an image, a video, or any other resource that's available through a URL.
Simply put...
as long as the resource is accessible over HTTP, fetch() can retrieve it.
Closing
If you think about it...
it's actually not the JSON file itself that determines whether the data is static or dynamic.
What really matters is how you use it inside your project.
The exact same file...
even with the exact same content...
can be processed differently depending on what your application needs.
And personally...
I think that's the interesting part.
Sometimes what looks like nothing more than "a place to store data" actually influences how the application treats that data.
Once your project starts dealing with sensitive information, though...
it's probably time to stop storing it in the frontend.
Because once something reaches the browser...
it's essentially public.
The rest...
well, let the backend handle it.
The frontend doesn't have to keep everything.
After all...
that's the backend's job.
(￣▽￣)
Don't forget a cup of coffee today ☕
Top comments (0)