Local version of Prismic.io slow wait time to load

Developing with Prismic
1

I have so far a very basic integration of Prismic with a website, without any styles, just callbacks from an About page. I am programming this based on the Awwwards course by Luis Bizarro. I am using Webpack and Express.js and for that I've opted to use cross-fetch instead of node-fetch.

The problem is: everytime I refresh the About page, I get a wait times of around 700ms to sometimes around 1600ms as shown in the images below.

What is going on with this?

Here you have the code I use to integrate things, for you guys to shine a light on what's going on here.

require('dotenv').config()
const express = require('express')
const fetch = require('cross-fetch')

const path = require('path')
const app = express()
const port = 3000

const Prismic = require('@prismicio/client')
const prismicH = require('@prismicio/helpers')

const accessToken = process.env.PRISMIC_ACCESS_TOKEN
const endpoint = process.env.PRISMIC_ENDPOINT

const handleLinkResolver = doc => {
  if (doc.type === 'about') return `/${doc.uid}`
  if (doc.type === 'home') return `/${doc.lang}`
  return '/'
}

const client = Prismic.createClient(endpoint, {
  fetch,
  accessToken,
  handleLinkResolver
})

app.use((req, res, next) => {
  res.locals.ctx = {
    prismicH
  }
  next()
})

app.use(express.static(path.join(__dirname, 'views')))
app.set('view engine', 'pug')

app.get('/', async (req, res) => {
  const meta = await client.getSingle('meta')
  const home = await client.getSingle('home')
  res.render('pages/home', { meta, home })

  // console.log(meta, home)
})

app.get('/about', async (req, res) => {
  const meta = await client.getSingle('meta')
  const about = await client.getSingle('about')
  res.render('pages/about', { meta, about })
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

image
image882Ă—198 14.5 KB

image
image878Ă—178 13.1 KB

1 Like
3

No answer?

4

Hi @amarinofr,

I apologize for the delay.

I will try to investigate this with you. Can you try to use node-fetch to check if the problem is related to cross-fetch?

5

Hi. No problem. I could but I don't know how to use node fetch with require instead of import. This is important because I am using Webpack + Express.js and am unable to do somethings if I don't use requires because my knowledge is kind of limited.

Perhaps you could show me a way to do that?

6

Alright, I will try to draft an example tomorrow, but here is what I found.

The author has added a workaround:

Workaround

Seems to work with both module load formats in node-fetch 1.7.3

And well as

7

Ok, so I tried these (even with the version 1.7.3 as well) and the results are the same - somewhere around 700ms and 1200ms for the most part and sometimes it goes even to 2500ms in rare cases. So I think we can rule out the cross-fetch option.

8

Have you tied to publish/host your website to see if this is only a local issue.

9

No sir @Fares I didn't try that. But I tried right now using an older version using Prismic.DOM which I developed somewhere around December 2021. It was another iteration of the project, which then I redesigned and restarted from zero last week.

I went back and used the implementation I had with the new fields I have in Prismic and even though the response times are slow (they fluctuate between 500 and 600ms. Only once so far in the order of the 900ms, but always below 1000ms.), they are much much better.

But of course that can't be a solution, using an older version of the API. And also, I really like the way things are in the present with the Prismic API.

10

@Fares today is even worse.

image
image552Ă—551 34.8 KB

11

It is kind of hard to reproduce the issue on my side, and it is important to do so to be able to help.

It would be beneficial if you could host your website somewhere so that I can test it as the code
that you have shared shouldn't cause this issue.

13

OK, here I have it hosted on Digital Ocean, still getting slow response times. http://207.154.195.177/

14

try node-fetch@2.6.7 version

15

Unfortunately that's not the problem. I tried that already and it's the same thing. Actually, what cross-fetch does is it goes and gets node-fetch and that's the version it's getting in this case, so it's not the problem. Even though it isn't the problem, I am now using node-fetch@2.6.7 because it's one less step. :slight_smile:

16

bro you know how to log slices in console :c btw are you on discord?

17

I don't. I never used slices, but you can look throughout the documentation. Sometimes it's a bit confusing but if you look long enough you'll manage to answer your questions.

18

thanks bro :slight_smile:

1 Like
19

I ended up trying Contentful last night and the response times, even though they seem to me a bit high still (in the order of the 300ms), they never go as big as the Prismic ones do, so I'm really tempted to use their option, even though I like much more using Prismic, especially because of the ease of use and it feels like it's better for bigger websites.

20

Hi, @amarinofr & @ojasshukla211,

I will reach out to our dev team to check this issue; the response time you get is not normal and might be related to some wrong implementation from your side.

A related note that I would like to mention is that have you thought of using a static website builder framework such as Next.js, Nuxt.js, or Gatsby with Prismic?

A statically built website runs way faster than a simple Node.js one

21

Also @amarinofr, can you share with me (in a private message) a zip file of your project code to try to investigate the issue?

22

I didn't, no. Especially because in my daily life I use mostly Wordpress and also I feel like this way I get my projects cleaner and it's something less to learn. Also more future proof using basic Javascript.

1 Like