Loading JSON data in SSG mode

[arabyalhomsi]

I have this code in resume/index.page.server.tsx. I am loading a json file and passing it as prop to the client page. On the first load of the webpage, everything seems to work. However, if I refresh the page once, the contents of the resume.json are printed instead. I do not understand why this is happening. Could someone please help me understand?

import resumeJson from '#root/resume.json';
import { BasicInfo } from '#root/services/ContentLoader/types';

export async function onBeforeRender() {
  const basicInfo = resumeJson.basics as BasicInfo;

  const pageProps = {
    basicInfo
  };

  return {
    pageContext: {
      pageProps,
    },
  };
}

export const passToClient = ['pageProps'];

This problem is resolved if I do this:

import resumeJson from '#root/resume.json';
import { BasicInfo } from '#root/services/ContentLoader/types';

export async function onBeforeRender() {
  const basicInfo = resumeJson.basics as BasicInfo;

  const pageProps = {
    basicInfo: {
      phone: basicInfo.phone,
      name: basicInfo.name,
      address: basicInfo.address,
      stateImageUrl: basicInfo.image,
    },
  };

  return {
    pageContext: {
      pageProps,
    },
  };
}

export const passToClient = ['pageProps'];

[arabyalhomsi]

import React from 'react';

export { Header };

type HeaderProps = {
  phone: string;
  address: string;
  title: string;
  image: string;
};
function Header({ phone, address, title, image }: HeaderProps) {
  return (
    <>
      <header className="flex flex-row items-center justify-between">
        <Address>
          {phone} <br /> {address}
        </Address>
        <h1 className="text-6xl tracking-tighter">{title}</h1>
        <ProfilePicture staticUrl="#root/asdas" />
        {image}
      </header>
    </>
  );
}

type AddressProps = { children: React.ReactNode };
function Address({ children }: AddressProps) {
  return <address className="text-sm not-italic leading-5">{children}</address>;
}

type ProfilePictureProps = { staticUrl: string };
function ProfilePicture({ staticUrl }: ProfilePictureProps) {
  return <img className="h-32 w-32 rounded-full" src={staticUrl} />;
}

I just figured something out now that this was happening because I was giving a wrong staticUrl to the tag. Why I am not sure?

[brillout]

Seems like a user land problem. I'm not sure anyone can nor is willing to help you with your code.

Feel free to let me know if you believe there is anything VPS's docs/interface can do to improve DX.