Issues with Static Prerendering

Issues
1

I’ve tried using the Static Prerendering feature and I’m currently facing some issues.

I’m running a Next.js app following the instructions in the documentation and troubleshooting with this forum discussion

Error 1: Importing Router from @xdn/core/router

const { Router } = require('@xdn/core/router');

This gives an ESLint error: ‘@xdn/core’ should be listed in the project’s dependencies, not devDependencies. according to the import/no-extraneous-dependencies rule.

I’m not sure what effect this has on other issues.

Error 2: Running the script: xdn:start with regards to xdn.config.js

const { Router } = require('@xdn/core/router');

module.exports = new Router().prerender([{ path: '/' }, { path: '/states' }]);

Starting the server with the xdn:start command

  1. If the server was already running when the xdn.config.js was updated, the pages marked for prerendering works as usual, no noticeable changes.
  2. If the server is started after changes to xdn.config.js, the error: XDN configuration validation failed with errors shows up (more details in the picture below)

sc-error-1
sc-error-12102×2202 784 KB

sc-error-2
sc-error-22102×1412 531 KB

This has been tested against Hardcoded Paths:

const { Router } = require('@xdn/core/router');

module.exports = new Router().prerender([{ path: '/' }, { path: '/states' }]);
2

Regarding the ESLint error, it looks like just need to add @xdn/core as a project dependency. If it already is, there must be a problem with ESlint.

Looks like there might be something invalid in your xdn.config.js. Can you post the contents here?

3

I’ve got @xdn/core.

My xdn.config.js content:

const { Router } = require('@xdn/core/router');

module.exports = new Router().prerender([{ path: '/' }, { path: '/states' }]);
4

See https://developer.moovweb.com/guides/xdn_config. The content you posted looks like it should be in your routes file instead.

1 Like
5

OK. This works. But I’m yet to see the true power of “prerendering”. Could this be because I’m already using Next.js getStaticProps?

const { Router } = require('@xdn/core/router');
const { nextRoutes } = require('@xdn/next');

module.exports = new Router()
  .prerender([{ path: '/' }, { path: '/states' }])
  .match('/service-worker.js', ({ serviceWorker }) => serviceWorker('.next/static/service-worker.js'))
  .use(nextRoutes);
6

The benefits of prerender over getStaticProps() only begin to emerge at scale. Prerender will statically render your pages in parallel as the deployment is in progress, using the full power of the serverless cloud, which can render up to 200 pages simultaneously (this may even be increased in the future.) If you have 1000s or even 10,000s of pages to statically render, this will be much faster than building it with CI (not to mention uploading the results to the cloud).

For just a few pages, prerender and getStaticProps yield basically the same experience.

7

OK. I get it now. Thanks for helping me understand.