Preview/Release Feature Not Working

Prismic for Content Creators
1

Hello! My name is Johnny.

I'm currently working through some edits for one of my pages. I've been able to make a few small changes but I've been hesitant to publish bigger edits as I'm having trouble previewing edits.

I should mention that we've disabled the ability to use the Preview feature in an effort to cache Prismic pages, which has greatly improved page speed load time for our clients. Awhile ago, my team found a workaround by using the Prismic Release Feature to preview edits, but that no longer works.

I was told a fix was found but upon testing, it still isn't working.

Could you please provide help? Thanks so much.

Johnny

3

Hi @johnnynguyen,

Thanks for reaching out.
To be able to help you with this, I would need more info:

  • The technology are you using?
  • The name of your repository (you can share it in a private message if necessary)
  • A code snippet that shows the Implementation of the preview in your project.

Looking forward to your reply,
Fares

5

Hi Fares!

Thanks for getting back to me.
I'm going to recruit our tech developer, Abel Quintero, for help for this tech related stuff.

Abel, could you help answer some of Fares' questions?

Thank you both for your time on this matter!

7

Hi @johnnynguyen,

I have some questions about the ways you are handling your application.

Why would Prismic preview prevent you from caching your content? In fact, cashing your content is probably not the right way as it can cause some problems.

You know, using some technologies such as Next.js, Nuxt.js, etc.. you can statically build your website, which is way faster than Server Side Rendering.

Your content normally is being cached for you if you use our CDN.

Also can explain to me what do you mean by "using the Prismic Release Feature to preview edits", doea it means that you add your content you a release and then preview it? or you mean that you use the release ref manually to preview your content.

Note: the release ref can change and they are not static.

Looking forward to your reply,
Fares

8

Hey Fares,

Great questions! This honestly goes beyond my knowledge, so Abel should be able to help answer your questions more accurately than me...

In regards to your Prismic Release Feature edit question, historically our team had found a workaround in which we could conduct our edits and preview them using your Release feature. We'd essentially move edits to a Release Space and would preview them through that Release Space before publishing. But those edits are no longer displayed when previewed.

Abel, here's my original request for Fares, which he's referencing in his questions, for context:

"Hello!

I'm currently working through some edits for one of my pages for my company Marmoset Music. I've been able to make a few small changes but I've been hesitant to publish bigger edits as I'm having trouble previewing edits.

I should mention that our team has disabled the Preview feature in an effort to cache Prismic pages, which has greatly improved page speed load time for our clients. Awhile ago, my team found a workaround by using the Prismic Release Feature to preview edits, but that no longer works.

Could you please provide guidance or could we set up a call with your tech team? Thank you!

Best,
Johnny"

Hope some of this makes sense.

1 Like
9

Hi @Fares,

Thanks for asking these clarifying questions, and apologies for my delay in response!

  1. Tech stack
    Front end: React + Backbone.js
    Back end: Ruby on Rails + Postgres + GraphQL

  2. I'll share the repo in a private message

  3. Our implementation for PrismicPreviewEndpoint.js:

import { useEffect, useState } from "react"
import { PrismicClient, linkResolver } from "../../shared/utils/prismicConfig"

const PrismicPreviewEndpoint = () => {
  const [token, setToken] = useState("")

  useEffect(() => {
    const node = document.getElementById("token")
    const tokenParams = node.getAttribute("data")
    setToken(tokenParams)
    const fetchData = async () => {
      PrismicClient.previewSession(token, linkResolver, "/")
    }
    fetchData()
  })

  return null
}

export default PrismicPreviewEndpoint

and for our marmoset_music.js file:

prismicPreview: function() {
        getPageData("prismicPreview", "/preview")
      },

Thanks,
Abel

10

Hi @dev28,

As we have mentioned before, it seems that you are hardcoding the token (preview ref).

That is not a valid solution as the preview ref would change every time you add documents to your release or when changing documents outside a release in master.

Please note that the release ref is composed of the master Ref + release Ref.

But also can we help to understand why would having a caching system would break native Prismic preview?

11

This thread has been closed due to inactivity. Flag to reopen.