Next.js Discord

Discord Forum

Discussion about static and dynamic updateable pages

Unanswered
B33fb0n3 posted this in #help-forum
Open in Discord
B33fb0n3OP
Hey, imagine a blog post, that can be filled with any content blocks like images, texts, ...

This blog post should be served statically.

Then there is this blog page editor. Inside it, you can change the appearing of your blog post and of course the content. There is also a preview of your blog post right now.

This editor page is highly dynamic and interactive.

How to change the the highly static content (blog post) that is in the preview of the editor page, when you are on the editor page?

---- I tried ----

1. (Clientside) Building the static blog page with the data from the db. The dynamic page with the preview was there on it's own. Like the preview was rewritten from the code of the static page. The page will be updated clientside and when clicking on a save button all the edits will be saved and changed inside the database
Problem: database objects need to be created, but also updated. Bad DX. Inconsistent data.
2. (Serverside) Direct updateing the DB and revalidateTag to revalidate only the specific parts of the app. Static serving of blog post, but each setting will be fetched on it's own, to provide the changeablility from the editor page
Problem: High server usage. Many loading screens when changing variables of the elements on the page.
3. (Maybe my next try) Websockets? Maybe durable objects- thanks risky ❤️

What are your thoughts?

TL;DR:
How to change the the highly static content (blog post) that is in the preview of the editor page, when you are on the editor page?

160 Replies

Arinji
@B33fb0n3 you want realtime updates right
also well well, if it isnt my nemesis
@Arinji <@301376057326567425> you want realtime updates right
B33fb0n3OP
yes, realltime updates for the client inside the dynamic editor. So if the user toggles a switch it shouldn't wait for the server to respond, but the static preview should update
like same domain
B33fb0n3OP
no, the editor is at app.example.com and the production (static page) is on example.com (can be different from user to user) or subdomain.example.com (will be different for each user)
B33fb0n3OP
yea 💀
Arinji
ok so
i have a very very very hacky soln in mind
B33fb0n3OP
explain
Arinji
but its unbelievably hacky
ok so you know abt events?
being able to dispatch custom events
and listen for them?
B33fb0n3OP
is it one of my previos solutions (1. or 2.)?
Arinji
nah
its the js events xD
one sec
@Arinji being able to dispatch custom events
B33fb0n3OP
yea, like a websocket?
Arinji
nahhh, thats a good idea
mine is hacky
one sec
dispatchEvent
what you could do, is make an api route, which will make a get fetch request to the page with the editor page by fetching with some search params
and you can like dispatch events from those search params
its an unbelivable hacky soln
B33fb0n3OP
oh ok. Just to let you know: I am the person who also developes the static and dynamic page ^^
Arinji
like yo just need to somehow convert an api route to dispatching events from a client component
B33fb0n3OP
like a websocket?
Arinji
and once thts done, its easy to just listen to events and udate accordingly
@B33fb0n3 like a websocket?
Arinji
yea, this is just the non web socket way
if you have access to ws, use those xD
the only reason i even know abt this, is cause before i was scared of caching, so i made my own realtime events with this events hack
B33fb0n3OP
ah ok. Yea, then I guess websockets are good for the events. But what about changing the static page? When I generate the static page, I would integrate a websocket so that the events change at the correct point of the static app. But building a static page with useless stuff isn't that good, right? For the editor we need the websocket on the static page, but for page generation not 🤔
Arinji
well, just to check, there are 3 pages in question here right?
editor
preview
static
B33fb0n3OP
just two:
editor (dynamic with preview of static)
static
Arinji
and editor will do real time events to static?
not sure if thats a good idea
static is public facing ig?
B33fb0n3OP
yea, to update the preview
@Arinji static is public facing ig?
B33fb0n3OP
exactly 👍
Arinji
......
not sure if thats a good idea
the viewrs dont need to see realtime updates
they just need the finished product
edtor and preview will be dynamic
and on save, it will just invalidate the cache on static
@Arinji the viewrs dont need to see realtime updates
B33fb0n3OP
the viewer (public access) shouldn't see the realtime updates. Only after the user (editor) is done, the viewer can see the changed stuff
@Arinji edtor and preview will be dynamic
Arinji
couldnt you do this then?
@Arinji and on save, it will just invalidate the cache on static
B33fb0n3OP
that's a good idea. Maybe that's possible with draftmode, because it ignores every cache
Then I don't need to create an extra preview page
wait whats draftmode
B33fb0n3OP
But the editor (user) want to see how a specific setting influence the page. So if he clicks on a button, the page (and preview) changes
WOAH WHAT IS THIS
@Arinji WOAH WHAT IS THIS
B33fb0n3OP
it add a cookie to your client and then your bypass every cache 🙂
Arinji
Damn
thas clean
ngl
B33fb0n3OP
The cookie will be deleted after the session and changes, when you create a new build :sunglasses_1:
like most changes will be done on preview
which isnt public fscing
so it can be slow
and be very very very realtime
make a button to push to production
and on push to production you invalidate the cache for the public facing static site
hence normal viewers get speed :D
B33fb0n3OP
yea, just invalidating cache and revalidates the specific parts of the static page is my second try 🙈
B33fb0n3OP
fr fr
Arinji
so
makes sense?
either im just waffling here
and your just yeeting this in the trash
or maybe i made something click?
B33fb0n3OP
best thing. But problem: no direct changes. Wait for server after change. And everytime you update a setting, the whole (editor) page reloads. Yes, it hit's all the caches, but it still reloads the whole page, when you change something 💀
@Arinji and your just yeeting this in the trash
B33fb0n3OP
I like that kind of brainstorming 🙂
your basically making a cms
a cms dosent cache
its all dynamic
and instead of refreshing the entire editor, just make everything suspensed, so only certain parts update
easy
@B33fb0n3 I like that kind of brainstorming 🙂
Arinji
so much effort for me to get 1 point
B33fb0n3OP
how to update the page then? I don't want to create server change and client change. Either server side changes all or clientside changes all
@Arinji so much effort for me to get 1 point
B33fb0n3OP
don't cry, you have enought xD
@B33fb0n3 wait, what?
Arinji
like im guessing you have multiple small small forms
right?
@Arinji update which page sir
B33fb0n3OP
sorry: editor page with preview of static page
Arinji
something like that
@Arinji like im guessing you have multiple small small forms
B33fb0n3OP
yes. Wanna have a look?
@B33fb0n3 sorry: editor page with preview of static page
Arinji
hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm, uhhhhhhhhhhh client side
since we arent caching, you cant do actions for instant data refetch
so you need to do client side hitting api routes
and router.refresh()
makes sense?
@Arinji hmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm, uhhhhhhhhhhh client side
B33fb0n3OP
clientside would be perfect, because of direct changes and it's just beautiful, but the settings need also to be changes 😉
@B33fb0n3 yes. Wanna have a look?
Arinji
my brain cannot handle code rn
@Arinji and router.refresh()
B33fb0n3OP
yea, I tried (in 1.) that I update the part of the client though events like you mentioned
Arinji
pay me 100k usd in cach, and i can do code review :D
@Arinji my brain cannot handle code rn
B33fb0n3OP
haha ok
Arinji
database objects need to be created, but also updated. Bad DX. Inconsistent data.
what does that mean anyways
@Arinji pay me 100k usd in cach, and i can do code review :D
B33fb0n3OP
it's not for me, that you review it. I am pretty sure, that it's to much for you, but to get an idea
are you questoning my skills?
"its to much for you"
the disrespect
ouch
@Arinji what does that mean anyways
B33fb0n3OP
Imagine a new block (image, text, ...) was created. Then it's inside the page. But then I also need to add it to the right section. Maybe the section will be deleted. I also need to delete the correct blocks (without knowing which are in the database and which not) and also I don't know which states which blocks and sections are. So I don't know most of the states and hopefully match (and save) everything after the user pressed "save"
Arinji
ahhhh ok yes its too much for me
im out xD
let joulev take over man
@Arinji are you questoning my skills?
B33fb0n3OP
I offered you a upgrade of your skills, but you denied. That's what I am saying 😉
Arinji
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHh
i need to make a todo app after reading all that
how you type so fast
B33fb0n3OP
yes do it 💀
But make the todo list static and the editor of the todos dynamic with a preview of the static todo list 😄
Arinji
bye bye, ping me once you get a soln or smthn xD
B33fb0n3OP
o7
Arinji
o7
best of luck @Yi Lon Ma
Yi Lon Ma
add a debounced event in editor which invalidates the cache and calls router.refresh :Thonk:
B33fb0n3OP
can you clarify?
Yi Lon Ma
how are you going to add editor in page?
like how will you decide when to show and when not
B33fb0n3OP
the editor is on another sub domain then the production static page
Yi Lon Ma
ohhhh
I didn't read the full context
@Yi Lon Ma like how will you decide when to show and when not
B33fb0n3OP
inside the project it's just a different folder 🙂
Yi Lon Ma
when the user confirm all the changes then you can send a webhook to your blog domain which calls revalidatePath
I am doing it with a notes website when stuff change in sanity
Bracco Italiano
Yi Lon Ma has the right answer. Apps like strapi do this.

You do every modification in a 'commit', then you publish your commit. It will call a webhook to your nextjs app to ask the app to fetch the database and rebuild
Yi Lon Ma
import { revalidatePath } from "next/cache";
import { NextRequest, NextResponse } from "next/server";

export const dynamic = "force-dynamic"; // defaults to auto
export async function GET(request: NextRequest) {
  const params = request.nextUrl.searchParams;
  const token = params.get("token");
  // do the usual verification of token
  revalidatePath("/");
  return NextResponse.json({
    message: "Revalidated",
  });
}
@Yi Lon Ma I am doing it with a notes website when stuff change in sanity
B33fb0n3OP
yea, the revalidation of the static page it not the problem, It's more changing a specific part of the static page inside the preview inside the editor.

Like having a setting showThumbnail and it's turned on. The preview in the editor shows the static page with the thumbnail. Now the user turn off the this setting and the preview should instantly update only that specific part
Yi Lon Ma
state :Thonk:
B33fb0n3OP
state?
clientside state like I done in 1. ?
Yi Lon Ma
cause in editor, you must be keeping the showThumbnail checkbox in state and then save that to the db
so when it changes, do router.refresh(or update the renderer props which render the blog post)
B33fb0n3OP
ok, but how does the static preview knows when to show the thumbnail and when not? It's a static serverside generated page 🤔 (same for the preview)
@Yi Lon Ma router.refresh? or maybe query params to change the props of the renderer
B33fb0n3OP
router refresh just refreshes the clients page. There are so many settings, that the url would overflow
normally the static generated page know what to show thought the database, right?
@B33fb0n3 normally the static generated page know what to show thought the database, right?
Yi Lon Ma
hmm then maybe when you are saving the setting of showThumbnail in db then call revalidate
B33fb0n3OP
ok, but then there is a delay between the action and the preview change
Yi Lon Ma
hmm
I mean you can show a suspense loader :Thonk:
B33fb0n3OP
yea, that's what I tried in 2.