Load some data from a file once only and use it in root.jsx

[meglio]

I have a file I need to load data from and use it in root.jsx.

I managed to do it with using export function loader() and useLoaderData() in that file. However, it reads from the file on every page render.

Is there a way to make it read the file once only upon server startup, and then use that data throughout the lifetime of the application? A. la. putting the values into remix.config.js and then accessing them somewhere in the application.

Note: using environment variables instead of a file is not an option.

[kiliman]

If it's a JSON file, you can import it directly, but you should do it from a *.server file so the file doesn't get bundled with the client.

However, if you need to load a regular file, here's a pattern that should work.

// app/data/getData.server.ts
import * as fs from "fs";

let data: string;

declare global {
  var __data__: string;
}

// store data on global in development mode
// to survive purge of require cache
if (process.env.NODE_ENV === "production") {
  data = readData();
} else {
  if (!global.__data__) {
    global.__data__ = readData();
  }
  data = global.__data__;
}

function readData() {
  let contents = fs.readFileSync(`${process.cwd()}/app/data/data.json`, "utf8");
  return JSON.parse(contents);
}

export function getData() {
  return data;
}

// app/routes/root.tsx
import { getData } from "~/data/getData.server";

export const loader = async () => {
  const data = getData();
  const user = data[0];
  return json({ user });
};

[meglio]

@kiliman using global did not help - the file is still read on every request:

import {parse_ini_string} from './utils';
import fs from "fs";

const CONFIG_SYMBOL = Symbol('MY_APP_CONFIG');

function get_ini_config() {
    console.log('Loading config.ini file...');

    const config_file = '/config.ini';

    try {
        const ini_string = fs.readFileSync(config_file, 'utf8');
        const ini_parsed = parse_ini_string(ini_string, true, true);
        return ini_parsed;
    } catch (e) {
        return {error: e.message}
    }
}

global[CONFIG_SYMBOL] = global[CONFIG_SYMBOL] || get_ini_config();

export function get_config() {
    return global[CONFIG_SYMBOL];
}

[meglio]

UPD. Symbol.for() instead of Symbol fixed it. Now works. Thank you!

[meglio]

@kiliman I've been passing this data from the server to the client through the root loader data. However, when I tried to use it in the root ErrorBoundary, it didn't work - because the root loader data is null in the root ErrorBoundary.

If I read my config file and use it directly on the server side only, and then rely on the loader data on the client side, then there is a hydration mismatch problem.

Any ideas?