Node/React: Serve static json file - node.js

On my website I have some categories in the database which don't change often. I am using the NextJS framework. In order to decrease the load time and make category control load faster I am thinking of putting categories in a json file under /static/data/categories.json and let React fetch that json file instead of making a database call. I have read about multiple approaches to importing static json files including json-loader. However, I am thinking of making an api call something like the following from React once on the home page and store the contents in redux state so that I could use them wherever I need. My intention here is whenever categories are modified, I update categories.json and the client will fetch the updated json file. Deployment downtime is not an issue for me.
const categories = yield call(request, `${BASE_URL}/static/data/categories.json`, options);
My questions are:
Is this a right approach to load a json file from the server keeping in mind I would want to update the file every few months without the need to redeploy the whole website.
Can a json file become a bottleneck if thousands of concurrent users try to access it. I am using express with nginx. Would using express.static help at all?
Thanks in advance.

Related

Serving and processing large CSV and XML files from API

I am working on a node web application and require a form to enable users to provide a URL containing a (potentially 100mb) large CSV or XML file. This would then be submitted and trigger the server (Express) to download the file using fetch, process it and then save it to my Postgres database.
The problem I am having is the size of the file. Responses from the API take minutes to return and I'm worried this solution is not optimal for a production application. I've also seen that many servers (including cloud based ones) have response size limits on them, which would obviously be exceeded here.
Is there a better way to do this than simply via a fetch request?
Thanks

How to deal with data which is very little that I don't want to save in database?

The scenario is:
I am working on a express.js app with mongoDB and EJS.
There is a URL/ link on a page which I want to change, let's say using
a form.
I am already using user model to retrieve and update user data.
What I can do is save that link in a collection in mongoDB i.e. create
a model.
But, I think it's not good to create a model for just a link and get
it to render on EJS.
What should I do any suggestions? Any tricks?
*No need to read if you already know what I should do.
I tried something which is not a good practice and sometimes causing big issues.
I have added a JSON file in public directory to serve.
I am reading this file to get the link on client side.
when I want to change the link, I submit new link using a form and on server
side overwrite the content of that file (JSON file present in public directory).
so next time that file will be served with changed content.
I tried overwriting the contents of that file(using "fs") synchronously as well as asynchronously but because that may be sometimes web page stucks for a second, but it is not crashing the app.
may be this was silly, please suggest if you know anything i should do.
*NOTE: Sorry, if this question is inappropriate for StackOverflow. But I am struggeling to find any solution.

Edit JSON file from a React App - Page Builder Concept

I need to build a page builder where we want to drag and drop elements to a screen which become a config json object. Then I have to save that config object into a config.json file in the project folder (or somewhere where I can load it when re-rendering the app). We want live reload when editing the pages via this page builder.
The FE drag and drop app is built with React, and I can reach the point where I have the JSON object in memory.
How do you recommend me to do the architecture this for the BE side?
Is is possible to expose an API endpoint (with Express for example), and save the json file somewhere into the React App "/src" folder? or I can edit only files in "/public" folder?
What if I refactor my FE React app into a Next.js app? If Next is rendered in the server, does it mean that I can do the config file editing just before it gets rendered?
Is it better to create an independent Express App where I save all the config.json files? and then exposing them via API endpoints both for editing and reading?
Thanks in advance!
From your question I see that you are developing a app similar to wordpress where the users can easily create a page using drag and drop of elements. So here a configuration is need to persist the placement of elements.
I read all the three approaches mentioned by you and it seem the third approach will help you. You can run a express app and use a db to store the config setting as I find storing it in the file is not a good practice. Once the editing is complete you can make an api call to post the data to db and similarly while reading you can pull the data from db using api call.

Is it more efficient on a server to load HTML templates from a file or from a Mongodb record?

My current setup is on a NodeJS server and loads HTML templates from files. I'm making some changes to my coding, and I'm wondering if part of that change should be to move the templates from individual files to database records.
it depends: whether you need the end-user to change them or not,
for example, I was having static templates for sending emails, and I had to save them on the DB, and create a way for the user to change them without touching the code, but if there is no action on them then you can put them on the node server.
another approach is using S3 instead of DB for the static files.

Serve custom javascript to browser via Node.js app

I developed a small node.js app in which I can configure conditions for a custom javascript file, which can be embedded in a webpage, and which modifies the DOM of that page in the browser on load. The configuration values are stored in MongoDB. (For sake of argument: add class "A" to DOM element with ID "B" )
I have difficulties to figure out the best way to serve requests / the JavaScript file.
Option 1 and my current implementation is:
I save a configuration in the node app and a distinct JavaScript
file is created for that configuration.
The page references that file which is hosted and served by the server.
Option 2 and where I think I want and should go is:
I saves a configuration (mongodb) NO JavaScript file is created Pages
a generic JavaScript link (for instance: api.service.com/javascript.js)
Node.js / Express app processes the request, and
returns a custom JavaScript (file?) with the correct values as saved in mongodb for that configuration
Now, while I believe this is the right way to go about it, I am unsure HOW to go about it. Any ideas and advise are very welcome!
Ps: For instance I wonder how best to authenticate or identify the origin, user and requested configuration. Shall I do this like: api.service.com/javascript.js&id="userID" - is that good practice?
Why not serve up a generic Javascript file which can take a customized json object (directly from mongodb) and apply the necessary actions? You can include the json data on the page if you really need to have everything embedded, but breaking up configuration and code is the most maintainable approach.

Resources