Store static data in public folder as json file or directly in .js file?

Question

I'm busy working on a website – somewhat new to this – and I don't quite know where I should store static data: in the public folder as a separate json file, or within the .js file as an object.

In the json file, it would look something like this:

{
  "navLinks": [
    {"title": "Home", "path": "/", "number":"one"},
    {"title": "Projects", "path": "/projects", "number":"two"},
    {"title": "Education", "path": "/education", "number":"three"},
    {"title": "Blog", "path": "/blog", "number":"four"},
    {"title": "Contact", "path": "/contact", "number":"five"}
  ]
}

While in the .js file, it would be stored as an object somewhere outside of the React component:

import React from 'react';
import NavLink from './navlink';
import Burger from './burger';
import Link from 'next/link';
import { useState } from 'react';
import classNames from 'classnames';

const navLinks = {
    ...
}

function Logo({ children }) {
    return <div className="logo">
        <Link href="/">
            <a className="logo-link" href="">{children}</a>
        </Link>
    </div>
}

export default function Navbar({ navLinks }){
    const [isShowNavList, setIsShowNavList] = useState(false);

    const toggleIsShowNavList = () => setIsShowNavList(!isShowNavList);

    const navListClassNames = classNames("nav-list");

    return (
        <nav className="navbar">
            <Logo>Alé Pouroullis</Logo>
            <Burger isShowNavList={isShowNavList} toggleIsShowNavList={toggleIsShowNavList}/>
            <ul className={navListClassNames}>
                {navLinks.map((link, index) => {
                    /* order will be used to stagger the animation
                      of link content when in mobile view. It will be 
                        stored as an inline style variable in the <li> tags.*/
                    const order = index+1;

                    return (
                    <NavLink onClick={toggleIsShowNavList} key={link.title} style={{"--order": order}} exact href={link.path} className="nav-link">
                        {link.title}
                    </NavLink>)
                }
                )}
            </ul>

        </nav>
    );
}

Answer 1

In a more general sense, this appears to be a question about whether you should store data separate from the programming logic that operates on that data. There is no standard or recommended way, even within the realm of developing React components. Instead you will need to consider the benefits and drawbacks of both solutions.

Once you have thought through this, consider consulting with a teammate. Similar components might have been developed in the past, and the team already has a pre-existing pattern they follow. If that's the case, this is an easy decision. Do what they have done in the past, unless you can communicate a flaw in the design that deserves a different solution.

If no previous components have established a pattern for this, then you have some freedom to make the decision based on your own objective analysis.

Some things to consider when comparing the two solutions:

• How easy is it to update the menu items?

• Do you expect this to change?

• If menu items need to be generated dynamically in the future, how much development and testing effort would be required to hit an API endpoint for the data instead?

• How does this affect browser caching? If embedding the menu item data in the component, then changing the menu items might require repacking and deploying some number of scripts if they are bundled together. Do you want to do that for a purely data change?

• If keeping menu items in a separate file, how are cache headers on the web server configured? A static JSON file might not be included in your standard packing system for JavaScript, which tends to put version numbers in URLs as a means to circumvent browser caches.

• How will QA perceive the impact of changing a menu item in a file containing programming logic? Will they push for regression testing to guard against accidental logic changes? Remember that a good QA tester is naturally distrustful of developers.

• Why even have this in a JSON object at all? Why not hard code the menu items as HTML right in the React component?

These are all solvable problems, of course, but they are the sorts of things you need to think about before making a decision.

Answer 2

The consideration for choosing between these options is usually not one of a technical nature, but one of a higher level of application management.

For example, maybe you want to be able to add configuration files on top of a published version of your application, and if this data is part of the configuration, it can make sense to put it in a separate file so that it can easily be overwritten without touching any of the code.

Or maybe the people that are allowed to alter the configuration are not allowed to touch the code; which is another reason for separating these into different files.

However, if this data is a completely private concern only to the developers, and is not considered to be configurable after publishing; then the decision can be made purely by the developers.

In that case, I'd argue that it's a matter of "is it in the way?". A single integer is not in the way, but 50 lines worth of JSON would be; even though both technically count as the same kind of static data. I would judge this on a case by case basis.