Next js application build, optimize same call being made on every page - next.js

So I'm creating an application with next.js and want to use ISR on many pages. But the application has 2-3 API calls which are called from every page like header CMS content, footer CMS content and site configurations. So when the Next.js build is executed, these APIs will be invoked for every page being built as they are being invoked in the getStaticProps method of every page.
However, during the few mins of the build run, the API content is not expected to change much. Is there a way to call the API once, and use that response for every page during the build?

Related

Preload Solution while blazor wasm starts

The first time a blazor wasm app is executed it downloads the necessary data into the client.
This may take a while.
So i want to show the user something(plain html or somthing quick) instead of this preloading page.

Nextjs SSG slow at first load

I deployed a Nextjs app on Vercel. I found that the response time of the SSG pages with getStaticProps is slower in the first page load. The subsequent page load are instant. Why is this the case?
I expect that all page loads should be instant because they are cached in the CDN during build time. I am sure that the pages are SSG because I view them tagged as SSG in the build logs. What am I missing here? Thank you.
The static files are not in the CDN on first request after building.
Pull-based CDNs load the data on the first request and keep it around until it expires. Vercel handles most aspects of our infrastructure like a pull-based CDN
Source
The problem vercel server work like serverless if your website no one call him for a while Vercel will set your app to idle mode

Pre-rendering and Data Fetching in Next.js

I am going through the tutorial of Next.js and came across Pre-rendering and Data Fetching in Next.js. I have a confusion about the Static generation of pages.
In a static generation, does the page not make fresh API calls every time a person visits the website? For example, if I have a news app and I want to make fresh API calls every time a person requests for my website, does that happen in Static Generation or only one API call is made during the build of my website?

Looking for Server Side Rendering using VUEJS having ASPX page and site hosting on IIS7

We have our existing pages in ASPX and site is hosted on IIS7 server.
We are looking for revamping/design the pages in VUEJS 2.0.
We are able to get VueJS code integrated with existing ASPX pages by getting build.js generated (production) and referring the same on ASPX page and page will be having the Target element. This all is client side rendering.
Now, we want the same in SSR. That mean to be complete HTML code rendered on the page before being served to the client (browser).
This clearly indicates we need to setup NodeServer, which can be called up by ASP.NET to get the VUEJS code rendered and added on ASPX page before it's being served to the Client (Browser). Please correct me If I am wrong. Here we are looking for a dynamic webages (Not the static one with prerendering or static generation)
We have started looking up for NUXT.JS as one of the options. But this is recommended to be used for the apps hosted for NodeServer.
ref:https://github.com/MarkPieszak/aspnetcore-Vue-starter/issues/67
1: https://github.com/MarkPieszak/aspnetcore-Vue-starter/issues/67
Other big challenge going with Nuxt is, they are likely launching Nuxt2.js version, which may or may not have breaking changes. https://medium.com/nuxt/nuxt-2-is-coming-oh-yeah-212c1a9e1a67
Next option is to looking for following:
https://github.com/MarkPieszak/aspnetcore-Vue-starter
https://github.com/vuejs/vue-hackernews-2.0
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/
Above links mentions using ASP.net core API Microsoft.AspNetCore.SpaServices.Webpack.
I believe you must have faced this situation and reached to an optimal solution. I am looking for suggestions from veterans have achieved the same, what path to be followed?
IF this can be achieved at all? and what are the challenges I should look forward?
Thanks

Security advice for web method invocation

So, I have a website (lets called it MySite). And we have implemented it primarily using .NET. Recently angular JS was introduced and we have created aspx pages that consumes the angular JS libraries.
Recently there was a requirement wherein we had to develop a login module on a virtual directory (lets call this MyVirtualDirectory) within the web site. Please note that the website already uses a login method (which is handled via button click event handler in .NET). The idea was, upon entering the username and password on the MyVirtualDirectory login module, to call the existing authenticate login method (that is currently consumed by the website). So, for this, we wrote a web method and we are calling the login method from within this web method. And this web method is invoked from the angular code. Everything works as expected and the login web method returns a true or false
Although functionally things work as expected, I am not too happy about the security aspects. One of the security constraints was, the web method that we wrote should be invoked only from within the web site. We thought about couple of options
One was to have a cookie on the load of the virtual directory home page. And when the web method is invoked, check for this cookie. Obviously, this has its own set of issues because the cookie could be set by anyone
The next was to have a session variable on the page load of the virtual directory home page. And check for this session variable when the web method is invoked. This was more secure than the first option, but still i felt it was slightly vulnerable
Any other thoughts/ consideration - To summarize, my question is, how to securely invoke a web method and ensure that the call is made only from within the website?
Thanks in advance

Resources