Headless CMSs with Next.js

Previewing Content Q&A

Scott Moss

Scott Moss

Superfilter AI
Headless CMSs with Next.js

Check out a free preview of the full Headless CMSs with Next.js course

The "Previewing Content Q&A" Lesson is part of the full, Headless CMSs with Next.js course featured in this preview video. Here's what you'd learn in this lesson:

Scott addresses questions about multi-tenancy and how CMS platforms handle simultaneous editing of the same content. He also discusses the integration of CMS platforms with Vercel's draft capabilities, implementing A-B testing with a CMS, and incremental server rendering.


Transcript from the "Previewing Content Q&A" Lesson

>> Scott Moss: Cool, any questions on that?
>> Student 1: I'm not sure if I missed this, but to see you have more than one content person wanting to see a preview, how would you delineate changes if there's maybe potential for working on a similar piece, maybe the same piece of data?

Is that possible with Contentful, for example?
>> Scott Moss: Every database handles multi-tenancy differently, so I have no idea how Contentful handles multi-tenancy. If they're more like a Google Docs type thing, if we both open up the same doc, we're both editing the same doc and we see each other's edits in real time.

If they do something like locking where if someone is writing to the database, it locks and no one else can write until the operation is done. And then you would just have to know, like you gotta hit refresh to see like, somebody just did something. I have no idea how they would do it, but the really good ones will do something very similar to Google Docs.

You'll see someone's avatar pop up, you'll see that they're working on this doc, at least you'll see that. You might not be able to see each other's edits and things like that, but you'll be able to see that at least someone is working on it. And then if they make changes, those changes they get pushed to your editor while you're on it.

So I might be working here and then a little bubble will come up, so and so just make changes click here to get the latest ones, right? So it'll get the latest ones but without discarding my changes, right? So that's something, but I would say the trend that I've been seeing is just be like Figma, just be like Google Docs.

This is a plain document, if you're getting here, we're working together. And in that way it's totally fine if we're doing it at the same time. If we're doing it separately, then it doesn't matter.
>> Student 1: Gotcha.
>> Scott Moss: Yeah.
>> Student 1: That makes sense.
>> Scott Moss: Yeah, I mean, with companies like Liveblocks, it's super easy to just add real-time collaboration to any app without any, CRDT or any of that stuff on the back end, it's super simple.

So I don't know why people just wouldn't add. If I'm an app that has some type of editing experience for Teams, I'm adding real-time. Guaranteed, there's just no way I'm not doing it, it's 2024.
>> Scott Moss: Any other questions? Yes.
>> Student 2: Do yo know of any CMS platforms that integrate directly with like Vercel's draft capabilities?

>> Scott Moss: Yeah.
>> Student 2: Would you have to manually implement that too, right back?
>> Scott Moss: That's a great question. So that's something that I wanted to,
>> Scott Moss: Figure out and connect and make all that work, but they do have they do have the SDKs that allow you to make those changes yourself.

The problem is like you really got to be bought in on that, [LAUGH] It's tough because there's just too much crossover. What Vercel is doing, it's great, if your team heavily uses pre-Vercell previews on deploy, and you guys use that for everything. Like, hey, send me the preview link and I'll check it out, I'll review your code, I'll draw on it, I'll do markup, I'll circle things.

Then yeah, it's probably worth you like adding the integration in which when you click this button on Vercel's thing, it makes a post request. Because Ccntemplate, we've just been doing the read API, they have a write API as well. So you can back and do things like that as well.

And you can see they have the integrations right here as well. It's just an MIP and it's just okay well builder also has that and so does dado and so does payload. They all have their own visual thing. So that crossover is what gets confusing because if you're a content person you're like okay, so do I go to this preview and that's when I do it or do I go to Builder and that's when I do it?

So it's not that you can't do it, it's just like should you do it? Not sure.
>> Scott Moss: No, yes.
>> Student 3: Can you do AB testing seen with the CMS.
>> Scott Moss: Of course, you do AV testing with CMS, but it's not as sophisticated as, like a real AB testing solution cuz it's not.

It's like not keeping track. It's not keeping track of things, AB testing with the CMS is it's not a place where you would like, you're not gonna create a AB test framework. If you have a AB test going, you can integrate different variations of content in an AB test that you already have.

And that's as simple as just adding a field to some variation of something that says what experiment this is, maybe what bucket ID. Whatever you're shading on, you just add a field for that and send that along with your query. So like if we had a query, let's go to our queries here.

>> Scott Moss: If we had a query here for a hero and a hero had a field on it called bucket, then we would get that bucket from a cookie from an AB test and we'd pass it in here and then we just pass the bucket along as well and we'll get that different variation.

So yeah, you could totally do it, is it useful though? I don't know because a lot of those AB testing frameworks already do this. They already have the ability to let you change things. Like some of the best AB testing frameworks are the ones that sit on the edge.

And if it's sitting on the edge, it has the ability to rewrite HTML. So if you can rewrite HTML on the edge, do you need to do this from your CMS at that point? I don't know, so all these apps are doing the same thing at this point, so it's really difficult.

And there are a lot of helicity and mess that leaned in heavily to AB testing. And I've seen it like pull back because it's like you, if you can't solve all of AB testing, then you shouldn't be doing any of it. You should just let people make variations and make the API calls, but stop trying to make the AB test yourself, because there's a lot that goes into AB testing.

When I was working at Netflix, the AB testing framework that they built there was like one of the most sophisticated piece of software I've ever seen in my life. So it's not it's not something a headless CMS wants to build from scratch. But yeah, you make a field you start on that.

There you go, there's your variation. It probably depends on the context of the AB test if it's button colors for a different. Then show this feature versus some new version of the feature. Exactly, yep, and yeah you can get down to whatever granular level you want. So far we've only been talking about assets and content, but what's stopping you from saying, let's go to an example here where we're on, on the call to actions in the, on a hero, right?

So here I am, if I go to the call to actions on a hero, this one.
>> Scott Moss: Okay, so this one has like these class names, these are just strings, I can add these in the CMS. I'm like, all right, not only can you do this, but you can change the color of this gradient, you can do whatever you want.

I can put all this in a CMS if I want it to and allow anyone to change this. And then yes, you can hook that up to an AV test as a variation, which is a button color, plus some different texts, different things like that. So the question is, again, should you, is that a good idea?

Depends on your team and my experience? No, [LAUGH] In my experience, the problem that I found out is that most non technical people don't think of data in a structured way. They think of data in a non-structured way, it's like a blog post, it's just text. They don't think of it as like, this object with this field and there's a title and a subtitle, but ahead of the CMS is mostly for structured data.

So trying to get people who think of paragraphs to now think of objects is like very difficult. So that's usually the breaker right there. So anchor modal server rendering is basically what I've been discussing Discussing earlier where I was like, you don't have to like load up all the pages.

You can just kind of get some more later on the fly. That's really easy to do in the pages directory. In the app directory, I'm pretty sure that's like in beta right now, or maybe even alpha, I don't think that's even out. So I don't think you can do the incremental stuff in the app directory right now.

You could definitely do that in the pages directory right here at ISR. Very simple, it's very powerful. So if you need that, maybe don't use app directory right now, but you can also do it yourself to be honest with app directory. You can just, you know, render the first in amount that you want, and then render the rest on demand when someone clicks on it.

So it's not, out of the question to do it, do it yourself, just, given the nature of how server components work. So it's not too crazy.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now