Dynamically Rendering with Node.js Emails is Slow

[flolu]

I want to use Maizzle to dynamically render emails with Node.js.
For example to include the username in the content.

Is there a recommended approach to do this? Because my current implementation is very slow:

app.get('*', async (req, res) => {
  const template = await fsPromises.readFile(
    path.join(basePath, 'src/templates', `${req.path}.html`),
  )

  const configPath = path.join(basePath, './config.production')
  const {html} = await Maizzle.render(template.toString(), {
    maizzle: require(configPath),
  })

  res.send(html)
})

...rendering one email on my Kubernetes cluster takes 18 seconds.
I guess it's because TaildwindCSS needs to be compiled every time.

There must be a better way?!

[flolu]

For now I am using a slightly ugly workaround:

template.html

<div>@{{username}}</div>

Will compile to

<div>{{username}}</div>

when running maizzle build production

And in my Node.js I just do

template.replace('{{username}}', 'some_user_name')

[cossssmin]

Wow 18 seconds definitely doesn't sound right.

Can you please let me know:

• Maizzle version
• contents of your template and layout files
• what were you doing with {{username}} before deciding to go with @{{username}} (does that data come from somewhere, maybe that's the cause of the delay?)

Ideally if you could provide a repo, even a private one, it'd be much easier for me to help.

[cossssmin]

Also, check the gotchas, you should provide a Tailwind config and environment name if you want it to work as the maizzle build command does.

[naumf]

For me it was caused by the latest version that comes with tailwind JIT (maybe it affects older versions too) if the purge option in tailwind.config.js is set to an array.
https://github.com/maizzle/framework/releases/tag/v3.4.0
It solves if purge is omitted or set to undefined when templates are rendered via Maizzle.render, so rendering time goes from ~15s to ~2s.
When rendered via maizzle's cli serve or build commands, the purge option is set as per the example and the rendering time is pretty fast.

[cossssmin]

For me it was caused by the latest version that comes with tailwind JIT (maybe it affects older versions too) if the purge option in tailwind.config.js is set to an array.

Yeah, mentioned this here in #422 (comment).

You need env: 'production' in the maizzle object so that process.env.NODE_ENV is set to production and Tailwind purging works properly (even in array syntax).

Try this for example, it should log a number <2000 (ms):

// render-test.js

const Maizzle = require('@maizzle/framework')

const start = new Date()

Maizzle.render(
  `your html`,
  {
    maizzle: {
      env: 'production', // sets NODE_ENV = production
      inlineCSS: {
        enabled: true,
      },
    },
    tailwind: {
      css: '@tailwind utilities;',
      config: require('./tailwind.config'),
    }
  }
)
.then(() => console.log(new Date() - start))

$ node render-test

[naumf]

You need env: 'production' in the maizzle object so that process.env.NODE_ENV is set to production and Tailwind purging works properly (even in array syntax).

Yes, it works.
Thanks.

[cossssmin]

@flolu does this solve your issue?

[flolu]

@cossssmin I solved it like this: https://github.com/flolu/maizzle-node-example
It's super fast because all templates are already built.

[claudiu-clearpoint]

With the Maizzle version 3.6.1, env: 'production' and without purge or with but undefined or array and is rendering it in 5 sec which is less than 18sec but is still slow.
I also noticed the warnings:
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.

[cossssmin]

If you use Tailwind's JIT, you need to specify the purge key. The warnings are coming from Tailwind, you can disable JIT if you prefer.

[claudiu-clearpoint]

can you use nodejs Maizzle.render function without mode jit? that would be great, all examples were using jit. maybe will be good to have a more detailed documentation and examples for render

[cossssmin]

You can pass a Tailwind config object to the render function, inside of which you can disable JIT:

https://maizzle.com/docs/nodejs/#options

[claudiu-clearpoint]

without mode jit will be 23 sec. probably the 5 sec is the best performance for the render function but because is too long, the alternative solution of the render function from flolu seems to be the only solution as it will be under 1 sec