In Web Development
Handle new data when using SSR WITHOUT refreshing the page. - read the full article about Angular Js update, Web Development and from Learn to code with James on Qualified.One
Youtube Blogger
Ssr or server side rendering is one of my favorite features of Next.JS. It allows you to get all of the data from your APIs databases, CMS or wherever you get your data from and serve it to a user every time they visit the page. Problem with this though is what happens if you happen to have a form on the page that then updates that information? The only way the user will get new data is if you had refreshed the page or they leave and come back. Now this isnt really efficient if youre trying to update something and allow the user to see it immediately.
Sure, you could use client side rendering to make this happen, but what if you want to use pure SSR on the page? So in this video Im using to show you how you can take data, have it update whatever database, APIs, CMS or whatever youre using, and then have the user see that new data updated. This is not going to be a hard refresh or anything like that. Were going to use built in next years features to allow this to happen. So here we have an example from Prisma. I have updated it slightly, but lets talk about what it does. So this Prisma application is just a very basic overview of how to use APIs with Prisma. It allows you to essentially have blog posts that can then be fed through. It allows you to do things like create drafts, filter posts, update posts, and also create users. I wanted to use it for this example because it was easier for me to stand this up when have to create a full tutorial for you guys to follow along.
So lets look at what happens right now. If I go to Yarn Dev and run the server, everythings going to launch.
And this is using a local DB to store all the data. And lets look at what the application does before we update it to allow us to update the page without the user having to do anything. So here is the application. As it stands, the only modifications Ive done is add this input box here and this Update blog post. So as you can see here we have this join Prisma Slack and it has just this random message. When you click on it, it pulls you up and you can delete them as you see fit. But were actually going to update this using this Update blog post button. What this Update blog post button does is update the API with this idea in mind.
So if we take a look at the code really quick, I have this update posts and all it does is look for Post ID one and takes whatever the input is from that text box and updates their database. If we use this right now, it will not show the new form until after we refresh the page. So if I write in here, Prisma is pretty awesome.
And here update blog post. Nothing has changed on the screen and we have no idea whether or not this actually worked.
Sure we could clear this out, but that doesnt really indicate that this has changed. But if we hit refresh here, you can see Prisma is pretty awesome. In some circumstances you may find yourself in a situation where a user is updating something that updates your API, but your page has no way to refresh and show the user that this has happened. A good example of this is potentially using something like Stripe or maybe Chargeb or Paddle or some sort of payment processor.
If you use their built in checkout, you may find yourself using Webhooks to update your database and the server side rendering page has no idea that this has happened. So in this case you may just want to refresh the page to show the user that yes, you do have a subscription or your subscription has updated.
Another good example of this is maybe you have an API, for example, something like this that updates some sort of information.
Maybe the user needs to change their name or profile picture, but when they do this it doesnt actually show on screen that youve updated this code. So lets look at how we could do this using server side rendering and builtin NextJS SSR feature. So were back inside our next JS project and we have this handle update and this is what happens when someone does the input and clicks the update blog post. So we need to update something in here to allow us to essentially refresh the page so the user knows whats happened.
What we are going to do first is import use router from NextJS SSR and thats just import userouternex router.
Then were going to use the router in here.
So we can just say Const router equals use router and now we have access to the router. Now we have access to the router. We can actually do something to update the page. So what were going to use here is a mix of two pieces of the router to allow this to happen. So what were going to use here is router replace alongside router as path.
Now if youve never used router replace before, it allows you to replace what is happening on the page without adding history to the stack. So if you dont know what the history to a stack is, essentially when you click the back button on a browser, if the stack has been updated it will go back to the previous page. So if you use something like router push that adds history to your stack. So router replace does the same thing as router push, but allows you not to add history to the stack.
So if I hit the back button Ill go back to the previous page I was on and not the same page. Again, just Reloaded.
So lets see how we can implement that now so were inside the code and we now have this router function so what we can do here is where this console log is underneath we can write the words router and then replace and then were going to use router ASPATH.
Now what router ASPATH does is essentially the path that youre on right now so it takes whatevers in the URL and does the last slash and takes everything from there and basically uses that as a part of a slot. So when we do this now if we hit save and we go back to the application that we were working on youll see nothing has really changed now but if we were to do this and say hello world and now hit update blog post the post will then update with the new data and as you can see now hello world has been updated and we now have that in our database.
Some things to consider when youre using this if youre using to use this on a project, if you have a lot of data you may see a blank screen before the page is loaded. So if you know that youre using this make sure you use something like a use state with a set Loading and allow the user to have a nice experience. Make sure that youre handling that if youre thinking of using this so there you have it a way to reload a page using SSR without having to hard refresh or make the user do it themselves. If you did enjoy this video make sure to subscribe comment with more things you need to learn in the jam stack and until next time see ya.
Learn to code with James: Handle new data when using SSR WITHOUT refreshing the page. - Web Development