Pref: preval runs multiple times during build

[fabien]

Hi @ricokahler , thanks for this plugin, it's really useful!

However, I was wondering why the preval code runs multiple times during build.

Do you know if Next.js is using multiple cores to build the output concurrently? If that's the case, I think that would account for this behavior.

[ricokahler]

ah i think you're right.

i know from writing another next plugin that next does have multiple builds process for SSG but those process might spin up after the bundle is built (e.g. it spins up multiple processes with the server bundle to pre-render those pages)

however, i know next creates at least two builds: one server, one client (lots of nuance lol)

if next uses the same process for building both bundles, i think a simple in-memory cache at the loader level should resolve this.

let me play around with and i'll let know if i make any progress!

[fabien]

Thanks for confirming my hunch! I think I'm seeing the two initial builds: one server, one client.

However, would be cool if even those could be reduced to a single execution in cases where a lot of processing is involved for some reason. Will keep an eye on this here.

PS any reason why this is still marked as @alpha?

[ricokahler]

PS any reason why this is still marked as @alpha?

uhh no reason. besides this perf concern, it's been pretty stable for my usage. i use semantic-release so all i have to do is merge alpha into main for a real 1.0. i'll do that now haha

[fabien]

@ricokahler thanks!

I'm actually having some issues now. Things appeared to be working yesterday, but I did not actually try any async code yet. It appears that I am getting the Promise itself, instead of the preprocessed data.

I'm 100% sure I have set things up correctly:

const withPlugins = require('next-compose-plugins')

const withPreval = require('next-plugin-preval/config')();
const withTranslations = require('next-translate')

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withPlugins([withPreval, withTranslations, withBundleAnalyzer]);

import preval from 'next-plugin-preval';

async function getData() {
  return {
    colors: ['yellow', 'blue', 'orange']
  }
}

export default preval(getData());

What's unclear from the documentation, is if .preval.js instead of .js is mandatory. I assume it is, but it either way, it doesn't seem to be working here.

UPDATE

The following works, although it's a bit odd that the API is so different compared to the other plugins. Unless I call withPreval as a function, it doesn't seem to work. Perhaps you can make this optional? Like next-translate? I think it can be done in a a way that preserves both apis (one to set extra config options, one to use immediately with defaults).

const withPlugins = require('next-compose-plugins');

const withPreval = require('next-plugin-preval/config')();
const withTranslations = require('next-translate');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withPlugins([withPreval(), withTranslations, withBundleAnalyzer]);

[Vadorequest]

I'm also encountering issues with async/await, it returns a promise, too.

I'll try using withPlugins to see if that might fix it. For now I'm stuck with a promise and even using await doesn't return the actual data. 🤔

---

Edit: Opened another issue: #25

[github-actions]

🎉 This issue has been resolved in version 1.3.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀