Hey friends!
Next.js is one of the most popular JavaScript frameworks for building complex
server driven React applications Azure Static Web Apps
now includes enhanced Next.js support that includes
server side rendering and incremental static regeneration.
Rashmi is here to show me how all these hybrid scenarios work, today
on Azure Friday.
Hey friends, I'm Scott Hanselman and it's Azure Friday.
I'm here with Rashmi. How are you?
I'm good.
I'm amazing.
And thanks so much for having me here.
It's absolutely my pleasure.
So big things happening in the Next.js space with regards to Azure Static Web Apps,
you're just making it better and better every release, huh?
Yeah.
I'm glad this topic is just trending and VR at the right market right now
because we have recently better since October
we have started supporting hybrid entering support.
And Next.js if you look at the depth chart conference, the numbers clearly show
that one out of every three developers is inclined towards trying Next.js.
And here today we are going to talk about how static mobile apps
enhances the level of experience by bringing so many features
popup features such as zero config support you can have.
So a side rendering incremental static regeneration API around static side.
I think all of these come back in just to one application.
And the best part because at startup it's static web apps.
We also have all the free small benefits that we provide day to day, right?
Like you can have free SSL certificate, you can have your custom domains,
you can upgrade to have enterprise trade support across the globe and many more.
So I am pretty excited and I'm sure anyone who is reading this is also excited.
Yeah, it's really interesting to me as someone who's used to doing things
in Azure Web Apps, which are more dynamic and really kind of more expensive,
you're really pushing the limits of what Swk is can do,
what static web apps can do, but they're still very affordable,
even though they're including these new features.
That's totally correct.
So if we can just quickly dive into the architecture, I'm showing you
how in this scenario we can have different kinds
of rendering happening in one single application.
So CSR is something very common across all the reactor involved
and all the frameworks which are currently being popular, right?
The CSR is basically the processing is happening on the client
and all the JavaScript comes to your terminal
and then they get rendered and process to your page.
But in case of static site in the data, the sites like Gatsby and Hugo,
they are popular frameworks.
Again, the architecture basically looks at the code goes to static web app.
When you send a request,
the first thing it does is it checks if it's already having a cache.
If there is a cache, is this going to get the response?
But if there is no cache the Next.js,
this is running in our API, manage the API Azure Function.
It just goes to the call
and gets back all the data and the snippet that you can see below.
That basically shows the function which does the static props card.
So this transaction is just going to be as seamless
as it gets, but because it's static set generator,
the whole rendering is happening during this time.
So it's completely pre-rendered
and to add to the benefits of it, increment the static regeneration
is basically helping you steal the cache for some time.
So once you are done with the transaction, if the cache is not present
in your cache stories, it comes back and stores the cache again in the gas storage
and then you set a revalidation time like for samples in the snippet.
We had this line with the same 10 seconds.
Yeah.
So for 10 seconds, if any time you're trying to access the same thing again,
it's just going to get it from the cache.
It's going to be as fast as it gets.
And again, it has the rendering benefit and finally
the server side rendering benefit, which is the highlight of static mobile
that makes use combination is now we also support not only client,
but so that every request goes all the way to the manage function.
You get the data as is and it's as dynamic as it gets.
It's completely stateful.
You do not have to worry about any sort of
stale content or anything, which is probably not up to date.
AD for this Next.js provides this function
that sort of gets so oversight props and you get a
to one of a design property having the whole be to render and use it.
So all of the is basically going ahead and improving a lot of performances,
especially with SEO optimization because everything is already process
and you don't have these JavaScript tags, so you don't have variables
that have to come and get processed only when it comes to the browser.
So that in short is how we are going to look at it for now.
But I'm sure
if you have anything to discuss and your thoughts, I'm ready to take that.
I would like to understand
just that last part, the server side rendering, where is that occurring?
Is that occurring within the context of the static web app
or is it happening in a managed function that maybe
I don't see or I don't have to think about who turned the JavaScript curly braces
into angle brackets into the server side rendering?
Okay, that's a wonderful question.
So to answer it, basically the manage function
is where our Next.js is currently running.
So all the code processing that has anything to do with a side
rendering, everything happened to it there.
And then we get the optimizers solved and that comes back to the static bitmap.
But while we are at this, I would love to take this opportunity
to also say that we are currently working on another enhancement
which helps splitting the static and dynamic content for rendering.
So now going forward,
the static content is going to be rendered all on static web apps.
Again, it's still happening before it reaches the client, but
we are going to split it such that only the dynamic part
is going to do the whole transaction all within the API,
but the static content is going to be even quicker available.
It's going to be ready to go with That is interesting. Yeah.
Now I point out that of course I said who
because I'm, you know, I'm anthropomorphism
anthropomorphizing the architecture, but I was trying to understand
there's the web server, the static web apps that does the work
and then there's the partner, which is Azure Functions.
So you're going to move the functions
over to static web apps, which is going to make it so much faster.
That's correct. That's perfectly great.
All right.
I love to see a demo of this in action.
Yes, I am super stoked that so here I have this sample repository.
So for the time saving, I've just already created a repository.
This basically is just a simple Next.js to just hybrid static web app
which contains themes from WordPress and cross-posted for free
setting all comments. Right.
So I've already created a sample repository.
What I'm going to do is I'm going to clone this to my local
so I go clone.
Awesome.
And once it clones, I'm just going to switch to that Drupal
Lazy Friday.
Sorry, what does it say?
It's Friday and let's go to the repo.
Okay. Who?
So now
we can definitely explore the pages,
but I am going to do the first things first.
I'm going to already to play the static with maps. Right?
So the code has a measure of static about the extension
and it's basically a measure
right here.
And you can quickly do, but I'm going to do a contraction P
because I am trying to be pro
colon shortcut person.
I'm going to create a quick static live.
Absolutely.
Here I have logged into my Azure account,
so it's going to bring my agent to the log
in and make sure that I have it, have me use my private subscription.
I'm going to create this demo, let it call every Friday.
I'm good then.
So here it asks me, where is the nearest region do you want to deploy?
And in case of Next.js,
it's crucial because we are deploying it completely in our manage functions.
Right?
So for me, maybe East Asia Summit.
So I'm going to go for East Asia.
And then among the preset, you already see an option for Next.js at this hour.
So all you have to do is opt for that.
It's going to autofill the content you just click next and next.
So now my static web apps is being created and I can just sit back
and wait for the information block to come up saying, Hey, yes,
I go about this up and running, so why did we wait for this?
I'm going to quickly show how it looks like and the browser, right.
Oh, sorry. I can actually show the could queries my back.
Okay.
So if you see the code base here. Right.
So the structure basically static maps follows as it has a folder called pages,
and that's where the whole of the source condenses.
API is where the API routes call go, which is the next
application can do for the API calls, which does the transaction
inside the API folder.
And this is taking care of all the other changes.
So here, if I were to say
I want to see static props, right?
So the function static props is going to get all my pause tag process
and then give my homepage or whatever.
But stop exaggeration.
But hey, we, we do have one more line with the saying revalidate
and the validate line is technically making it from an SSD to an ISO
that is now for every 10 seconds my code is going to stay as is.
And if I tried to refresh the he just got nasty.
So I can see that it's seen it.
So I really want to go put the check the logs and see what the scene is this.
But meanwhile I am open to questions if you have any.
So there's get static props within the context of Next.js.
Yes, but then there's also get server side props.
What are the differences? That's correct.
That's that's a wonderful question.
And I'm glad you asked that because that's the next thing I was going to go to.
So if you see the post right as the speech got locked out, the effects,
So what exactly how long does the accesses the
the parenthesis basically says the name of the page is variable,
it picks the name of the block that I want and then it does.
Oh, now that I think about it, I think this might fair
because I didn't do it in start, but now we can take this
queue.
So if you see this log page, right, so it basically has contents
for all the blocks and it has the sequence of how the blockage looks like.
But the server side props is how you're defining the property of the block,
that everything is coming together as a server process
that is processed before it reaches the client
and you get a fact property that preview post comments at all.
And if you see the comments, this is basically going
to call the respective blog and connect to the cosmos.
DB Think all the comments
which are related to that block and get it back over here.
So so a side rendering over here is basically looking at what press,
looking at Cosmos DB Getting all the content together
and giving it back to static bitmaps as a unit.
So that's what we are expected to see right now.
I am not sure if this will succeed actually because
Ampiamente started as something missing, but in case it doesn't,
I already have a backup because you know devil God,
I appreciate your preparation.
Indeed. Yeah.
While we are staying at this, I'm going to quickly show one more thing, Right?
So if you look at the existing application, so what exactly happens
is once the static black boxes deploy, which we can see over here as well,
looking at DC Friday, right once is static, the box is deployed.
If you go to the portal page, the overview, you should be able
to see a dedicated order which shows what page your site would be.
Yet you should be able to see the GitHub action runs from here
so you can basically just navigate
back to your GitHub and drag on what the citizens for the build
and at the same time you should be able to add more configurations and abuse
because we are using Cosmos.
DB Yes, it's really important that in configurations we add this application
setting called Cosmos Key and I have my personal Cosmos key.
This is going to make sure that when I visit the website on the right
to comment, the comment actually reflects when I do validate.
Otherwise, it's basically just throwing the government to the site
and coming back in a CSIR fashion, but it's not reading right.
So yeah, I'm just going to leave it as is.
I'm going to go to the existing demo while it's still looking.
So here you see this is a very simple website.
It's a travel blog.
I love traveling,
so I thought, you know, why not Let's just write a WhatsApp thing.
That's your version it out.
You can just bring this data.
So this is a travel blog where I'm talking about most of my recent travel.
That's right.
I went to do it, but I want to go to blah, blah, blah.
So all of these pages,
if you see I don't know if you notice, but when I was scrolling
the images were loading now and then, right?
It was not loading it a bunch because the ideas are basically simple, lazy loading,
so lazy loading as the whole page load does not go together in the browser.
Allen When you scroll and your content keeps coming, so it's more optimized
when the image in the viewport and it's it's loaded.
Exactly. Yeah.
And Next.js also had an image optimization.
So all of these images, even though they're like high resolution,
they're already been compressed and stored in such a format
that it's probably taking just mining of tabs.
Right? It's not going to be heavy at all.
And now if I'm supposedly checking out this article,
so as you can see this, you are right slash snatch the great Indian travelogue.
This is something which was filled in by that slug that he said, Right.
Okay. Yes. Yes.
So if you go to this browser,
you can see all the content over here, but you can also see comments.
So suppose I want to write a coming from Scott
and you could say welcome to your Friday.
Okay,
So now if I had
sent my comment has basically gone over here
and I want to confirm if that comment still stays.
Let's say refresh it. Right?
So when I refresh it, I see that
the comments senses and how is that happening for that?
If we look at our Cosmos DB This is the bunch of comments
that we have right now, and I look at the latest entry that I have.
There you go.
So it checks the text, it fixes username, it has everything mapped over here
and it also maps which blog idea it goes to.
This is the crucial part which in our code checks,
like for every corresponding blog you get all the comments any populated.
So basically, oh wow, it did succeed.
I'm really curious if it worked without and prevents.
Tell us, if you don't mind, I'm going to quickly. Of course
I said, oh my God, it didn't work.
So I am pretty impressed.
Now, we can probably see if your comment is you
all because it'll be pulling from the same place.
But it's not there.
We have not put the cosmos key.
Because you haven't set the cosmos.
That's correct.
That makes total sense. Yes. Yes.
So if I add the Cosmos key here,
I'm going to quickly do that as well, because it's not that I take so much time.
I have the Christmas key save with me already and it's got a copy.
Control C Control Re okay.
And you're putting that again on the server side.
It's never going to be sent out to the client
because the client is going to go and send it to a function
and the function is going to put it in cosmos.
So no one's really going to see the key
except of course, everyone who's watching the show.
I hope it was too long for them
to capture in their minds, but somebody is going to screenshot it.
Yeah, but otherwise that's that's only scenario
where people can access the key and because it's a new cool static
but maps application properties, basically anyone who is operating the application
is the only person who has access to it and not otherwise.
I'm not sure why it's taking so much time, but I definitely
want to take a couple of seconds to talk about the next upcoming
things that we have in stock for folks in static maps.
So so Next.js is looking at optimizing the performance.
So static maps is looking at optimizing the performance for Next.js
with every passing step.
And as of now, we only done the public preview.
So we are really looking forward to have the most powerful support
when we announce our view.
So as of now, we already have upcoming looks like support for standalone.
So what standalone does is again, it's a specific Next.js's property
that it compresses your whole project into a minuscule application
and that only has the dependencies which are necessary for your project.
So you might have like 10,000 different
packages on dependencies, but it goes through the whole project.
It picks exactly the one
which is necessary, makes a minimal application in a folder.
It's like a minimal replica
of your whole application and it brings down your size drastically.
Like if it's 100 and the application, it's probably going to cut it down
to maybe like 20 to 3040 and be at the most.
So you are basically saving so much space and you can have
mobile, bulkier websites.
So that's something that we will be announcing very soon.
And of course we are looking for more static web apps related integrations
like integrations that config integrations with having more auth
facilities, having more wild card processing, things like that.
And this, this a bunch of updates that is coming.
I cannot wait to tell what all that does, but I would just say,
but all the folks who are watching this, stay tuned because it's up and coming.
Fantastic.
So we're going to go to learn more about these
about these features that are happening both now and coming soon
as So we do
have a very compact official documentation already available
which goes through all the features that we're supporting right now.
And we also have a very lively GitHub
discussion chart which looks at all the updates, right?
So if you go to GitHub discussions, this is the top and discussion
which you can see like a banner in the top and that's a beautiful interaction
that all the community folks, everyone's like very keen on addressing annoying
and you know, people just give us suggestions as well
that that's something you should probably consider doing.
So these two resources are going to be really handy for your journey
and I would love to hear more from customers anywhere and everywhere.
So I'm super stoked that folks are trying out Next.js and signing with us.
And I'm sure Scott,
you should probably kick out some time for your vacation visit.
I know you had a big time chatting with us,
but yes, I have a bunch of sites I think lost a dozen now and static web apps.
So this is what's great about Azure Friday is that we know that the community
is there.
They have opinions and they know now
that you rest me and the team working on static Web apps are listening,
you're listening on social media and you're listening on GitHub.
So if you have opinions or thoughts about this feature or others
rest, me and the team are ready to hear from you.
Thanks so much for spending time with me today.
Thank you so much. The pleasure's all mine.
All right.
I am learning all about enhanced hybrid
Next.js support in Azure Static Web Apps, today on Azure Friday.
Hey, thanks for watching this episode of Azure Friday.
Now I need you to like it Comment on it tell your friends retweet it, watch
more Azure Friday.