As JAM Stack has to fetch data from database server, process the same in Lambda function and then renders it to the front end, can it be slow enough for a dynamic functionality in web page ?
I read IH itself is hosted in a JAM Stack called render.com. But the fact is the site is still slow to fetch and render the data.
What is the best platform and proper stack for JAM ?
My requirements :
I want to take the benefit of Netlify CDN, Netlify CMS(or any) for content and Lambda functions for writing APIs.
All sounds cool from the hype of JAM stack . But is it worth the hype?
Ok, the general background first:
I think one of the most useful ways to think about this is to focus on the differences between native apps and standard web pages, and how things like ServiceWorkers and pre-rendering shift the equation a bit so that web apps can be deployed and accessed in ways that are more similar to native apps.
As well, it really comes down to how much effort you want to put into your front-end engineering.
One of the best things about JAMStack is that it gives you a lot of flexibility in where you host the static files, along with an incredibly straight forward grasp of what is going on during deployment. That said, to get the most out of this kind of set-up, you probably need to do some of the following:
Obviously, from that point on, you can show users cached data on load, where appropriate, and update with new data as it becomes available.
I would also point out that having pure API endpoints that just push data to the front-end often allows you to keep those APIs and their support infrastructure simpler than in other cases.
With some attention to the build and deployment, a JAMStack web app is very fast to load and simple to deploy.
On to your specific case:
I'm not sure what you mean by dynamic contact, but in general dynamic, personalized content can be handled with the kind of system outlined above-- you will get the initial API call delay, but then you cache it for future use subject to cache or login-token expiration. A lot depends on what your specific flow needs to be. JAMStack won't be a match for every kind of user flow, but does work well in many cases, especially with code-splitting and other optimizations.
Generally I deploy new projects as JAMStack projects unless I have a specific reason not to. Best results will be seen, I think, with a system you set up yourself vs using a service to do it for you, but much rides on how complex your app is and how much attention you give to following guidelines such as those listed in https://web.dev/apply-instant-loading-with-prpl/
Login/logout and other dynamic logic work fine with JAMStack and whatever your auth system of choice is (JWTs, sessions, etc.)
I hope that answers your question, but please post some follow-ups if you would like more detail.
EDIT: I didn't answer you question about where to host. Any of the ones you mentioned, such as Netlify, should work well. You can also use AWS-- you can static host with S3 and CloudFront. You do the same thing with other providers/cloud services like GCP, Azure and CloudFlare workers as well.
I never expected such a detailed answer of my post. :)
Thanks for sharing such valuable info.
"dynamic contact" is "dynamic content" - miss-typed.
I will go through your suggestions and links and then come back for followups.
One main reason for writing this post is that there are lot less "How to" guides for building applications using JAM stack.
I'm sure you are quite use to with this stack after doing it all by your own.
But as a followup question, I am eager to know whether you are able to get better rendering speed than IH.
My concern is that if I get slow speed after putting lots of effort an web app, I would not feel good at the end of it. So, I just wanted to know whether it is worth to build or not.
I'm sure there are some pros and cons to it as you said.
I plan to run Express.js apps with Netlify Functions . Netlify functions internally uses Amazon's Lambda service.
https://www.netlify.com/blog/2018/09/13/how-to-run-express.js-apps-with-netlify-functions/
MongoDB has caching facility. I would use that. Probably mlab for mongoDB server.
I may use pug.js as Templating engine.
Express.js + Templating engine give back server rendered HTML to the frontend. So my server is always pre-rendered. Main reason for using Netlify is their CDN and CMS at a good pricing.
However, I still don't know who to connect the headless Netlify CMS to my Express.js App.
I need to learn "caching media contents using service worker" and "app shell" model.
Can you provide any how to guide links ?
My apologies, but I think I might have mistaken what you are trying to do. Do you want to take an already existing server-rendered application and put a service in front of it to pre-render and cache (both dynamic and static) content?
If so, I don't really have direct experience with any of the pre-render specific services that do so. Your best bet is to experiment with them and see what kind of overall latency/throughput you get.
Although you can sort of apply the JAMStack category to such a setup, generally speaking JAMStack is about pre-rendered (at build time) markup and associated javascript/css deployed to a static hosting service (one where you don't have to set up express or another server directly... it is handled for you.) The APIs the app communicates with are separate.
https://www.netlify.com/blog/2017/06/06/jamstack-vs-isomorphic-server-side-rendering/ Has a pretty good description of the choices around JAMStack vs "isomorphic" rendering.
NetlifyCMS is made to give you an app to interact with statically generated sites and content via git. If you are serving the static content yourself with express, you could hook NetlifyCMS up to the statically generated content, edit it, and serve it with express, though I am not sure if that is what you are after.
As for whether you can get better speed than IH... this is a really open-ended question. If IH has poor initial rendering performance, then there could be several reasons for it that don't have anything to do with JAMStack or server-rendering directly.
It's not always easy to swap out one architecture for another if it doesn't perform well, especially if your business if growing, and simply putting a pre-rendering service in front of an app that isn't performing the way you want doesn't give instant performance nirvana. It can help, but whether it does or not is highly specific to the app and infrastructure.
My advice is to keep your whole setup as simple as possible if you are not sure which direction you want or need to go. If you start with a straight forward server-rendered application with traditional caching/CDN, you can get pretty good performance right from the get go.
If you need something else/more as you figure out the rest of your project/business, such a set-up gives you pretty good flexibility to bend in one direction or another. I mean, any app is going to develop cruft over time that makes big changes difficult, but if you stay on top of it and take it a bit at a time as you are learning about real-world usage of your app... everything should be fine :-)
p.s. The link I provided in my previous response, https://web.dev/apply-instant-loading-with-prpl/ , has some good info about app shells, etc.