Memory Leak issue in regards to SSR

Upon installing frontity locally with:

• npx frontity create my-first-frontity-project,
• choosing any of the two default themes
• Installing dependencies with npm install
• starting it with npm run build && npm run serve

It seems as if the node application can’t garbage collect all the memory allocated during requests. It happens naturally when the site is called, but can be seen a bit more clearly when testing with siege, with the following command: timeout 30s siege http://localhost:3000/ The memory spikes up, as expected for a stress test, but then settles on the following values: 279mb -> 330mb -> 381mb -> 430mb, and refuses to go down any further.

I thought it was only the case with my theme, since the docker instance it’s running in would periodically run out of memory - but upon removing all prefetching for SSR, it stopped, and it also seems to be happening with the default themes.

For better local testing, I’ve also tried it with this (added to the package.json) "inspect": "frontity build && node --inspect ./node_modules/frontity/dist/src/cli/index.js serve", which enables me to use the nodejs debugger in chromium, but I can’t really make sense of the memory dumps there, except that they steadily increase in size.

Locally, I’m running:

System:

• OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
• CPU: (4) x64 Intel® Core™ i5-2540M CPU @ 2.60GHz
• Memory: 562.04 MB / 11.48 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 16.11.1 - ~/.nvm/versions/node/v16.11.1/bin/node
• npm: 8.0.0 - ~/.nvm/versions/node/v16.11.1/bin/npm

Browsers:

• Chrome: Not Found
• Firefox: 96.0

npmPackages:

• @frontity/core: ^1.14.3 => 1.14.3
• @frontity/html2react: ^1.7.0 => 1.7.0
• @frontity/tiny-router: ^1.4.4 => 1.4.4
• @frontity/twentytwenty-theme: ./packages/twentytwenty-theme => 1.3.3
• @frontity/wp-source: ^1.11.7 => 1.11.7
• frontity: ^1.17.1 => 1.17.1

npmGlobalPackages:

• frontity: Not Found
• npx: Not Found

I’ve tried searching the forums, but the closest thing I’ve found was this: https://community.frontity.org/t/npx-frontity-dev-aborted-core-dumped-javascript-heap-out-of-memory/1321/9 But that seems like a slightly different problem.

Thank you for your time - and thank you for Frontity, it’s been a joy to develop on so far!

[Bananicorn]

Hello @luisherranz, it’s been a while, but I’ve got some more specific news this time: Okay, so we’ve figured out our problem to an extent, but don’t have a real solution yet. It’s the menus fault Since we’ve stopped fetching our menu in the beforeSSR hook, our Server’s been running smoothly, without leaking. Of course now we have the problem that the menu isn’t here on page load, which is pretty bad for SEO, and it still blinks into existence, which isn’t all too pretty either.

I’ve put together a small example in the test repo https://github.com/Bananicorn/frontity-memory-leaking-theme, just taking the minimal code from the official examples to fetch a menu from wordpress and display it.

Steps to reproduce:

• Clone repo
• npm ci
• Set up an empty wordpress instance with the menu rest api plugin installed
• Create a menu and assign it to the menu location “menu”, preferably with a good handful of links so the leak shows faster
• Add .env file containing the link to the test-server, like this FRONTITY_SOURCE_URL=https://test.frontity.org
• Start frontend with npm run inspect
• Open chrome’s chrome://inspect and choose the remote target
• Open a bunch of tabs (30-ish) and refresh them a few times
• In the chrome inspector-window for the node process, you should be able to see a clear trend after a few cycles of refreshing and making a few heap snapshots

[luisherranz]

Oh, I guess you can create a minimal theme then. Something like:

const Root = () => (
  <div>Empty theme</div>
);

const EmptyTheme = {
  name: "empty-theme",
  roots: {
    theme: Root,
  },
};

export default EmptyTheme;