Prerender does not work for litElement

Hi netlify teams. I’m currently interested that you have built in prerender feature as it will improve my SPA site’s SEO. Sadly, I’ve got problem on how to use prerender properly, as it shows blank page on any bot crawler. I’ve tried it using chrome dev tools, google console, and curl as twitter bot and got blank page on all of them.

My sites:

  1. https://www.krismaperkasa.com (production, prerender currently off)
  2. https://kpe-beta.netlify.app (staging, prerender on)

Stack that I use:

  1. library: LitElement (polymer-project.org)
  2. bundler: Parcel (parceljs.org)
  3. hosting: netlify
  4. source code: Krisma-Perkasa-Engineering/landing-page: Landing page for Krisma Perkasa Engineering (github.com)

This is screen shot from google console preview when prerender is on:

This is screen shot from google console preview when prerender is off:

Prerender is off

I’ve also test using netlify/prerender locally and got blank page on browser and got a lot of 400 on assets.

My suspect is prerender can not load any assets including javascript as it use relative path generated by parcel js.

Could you help me to make prerender work on my site? Thank you.

Hi, @3mp3ri0r. Our guide for how to debug prerendering is here:

The support guide explains how to run the prerender service locally so you can debug what your site is doing.

Note, our support team cannot debug why your custom code behaves this way. We can debug the prerendering service itself but our scope of support doesn’t cover debugging your site code. There is more about what our technical support does and does not cover here:

Now, this question is still definitely welcome here. Some other member of this forum may have the resources to debug the site code. I just wanted to explain what the limits are for the technical support provided by the support team at Netlify.

If there are questions about anything in this reply - for example, the scope of our support, the prerender service itself, or the support guide I linked to above - please let us know and our support team will be happy to answer.

Hi @luke, thanks for reply. I’ve follow that instruction to debug, but the problem is netlify prerender could not get static files. The workaround I found is to setup middleware based on here, but I can’t do that since netlify set up all the webserver things. Could you inform any other things that I can do?

The only other solution I know of would be to modify your site’s javascript so that it correctly prerenders.

I don’t know a thing about Parcel but this appears this might be helpful:

Hi @luke, tanks for the suggestion. The link you’ve just given used to render page on build using prerender method. That part should be done by prerenderer like netlify prerender. I can’t and won’t use that approach.

From your point of view, there are problems with my javascript. I don’t see any issue here when opening my page using chromium based browser, which is also used by netlify prerender (chrome headless).

Any otger suggestion?

Hi @3mp3ri0r ,

Let’s take a step back. The reason your page gets a “blank page” with prerender is because it likely uses some javascript that is not compatible with the version of Chrome that prerender is running. I know, you’ve already said “it works with your chrome”. Great! Our version is clearly different :slight_smile:

Our advice is going to be what Luke gave you - fix your page so it prerenders, and use our prerendering. That’s the beest The best way is to run locally, so you can see the error messages that chrome throws while it tries to render your page. The version of chrome our prerender runs in production, that is :slight_smile: As a reminder, though the link was in the doc Luke shared, this is how to run locally:

If you want a different solution, no problem! But, that solution will be beyond the scope what our staff can help you with, since we cannot advise directly on your source code, as Luke described. If you need help at that level, hopefully someone not on our staff will step up to help :slight_smile: