What is Jam stack explain with example in English And Telugu
🚀 What is JAMstack?
JAMstack is a modern web development architecture designed to make websites faster, more secure, and easier to scale.
Instead of relying on a traditional server to build a web page on the fly every time a user requests it, a JAMstack site pre-builds its pages into static files and serves them directly to the user. Any dynamic functionality is handled by the user’s browser talking directly to specialized services.
🧩 The Core Components
The name originally stood for three core pillars:
- 🟨 JavaScript: Handles any dynamic programming and interactivity during the request/response cycle entirely on the client side (in the user’s browser).
- 🔌 APIs: Replaces server-side databases and backend actions. All server-side processes or database actions are abstracted into reusable APIs (like a payment processor, a search tool, or a headless CMS).
- 📄 Markup: The pre-rendered HTML. The entire website is generated as static HTML files during a “build” step before it is ever deployed.
🛠️ How It Works: A Practical Example
Let’s look at how a standard blog operates under both models.
🐢 The Traditional Way (e.g., WordPress)
When a user clicks a link to read your latest blog post:
- 💻 Request: The user’s browser asks your web server for the page.
- ⚙️ Process: The server spins up, runs backend code (like PHP), and queries a database (like MySQL) to fetch the blog post’s text.
- 🪡 Stitch: The server stitches the text, the site’s theme, and the comments together into an HTML page.
- 📤 Deliver: The server finally sends this newly created HTML page back to the user.⚠️ Note: This process happens every single time someone visits the page, which can be slow and vulnerable to server crashes if traffic spikes.
⚡ The JAMstack Way (e.g., Next.js, Hugo, or Gatsby)
🏗️ The Build Step: When you write a new blog post, you trigger a build process. The system takes your text, stitches it into the theme, and generates static HTML files for every page on your site before anyone visits.
When a user clicks a link to read your blog post:
- 💻 Request: The user’s browser asks for the page.
- 🌍 Instant Delivery: A Content Delivery Network (CDN) instantly serves the pre-built, static HTML file. There is no database to query and no server-side code to run, making the page load almost instantly.
- 🔄 Dynamic Features: Once the static page loads, JavaScript kicks in on the user’s browser. If you have a comments section, the JavaScript reaches out to a third-party API (like Disqus) to fetch and display the comments.
🏆 Why It Wins
Because the main content is just static files sitting on a global CDN, it brings massive benefits:
- 🚀 Incredibly Fast: No waiting for servers to build pages.
- 💰 Extremely Cheap: Static files cost pennies to host.
- 🛡️ Nearly Impossible to Hack: There is no web server or database exposed to the public.
🚀 JAMstack అనేది websites ని faster గా, మరింత secure గా, మరియు ఈజీగా scale చేయడానికి డిజైన్ చేయబడిన ఒక modern web development architecture.
ప్రతీసారి user request చేసినప్పుడు web page ని అప్పటికప్పుడు (on the fly) బిల్డ్ చేయడానికి traditional server మీద ఆధారపడే బదులు, JAMstack site తన pages ని ముందే static files గా pre-build చేసి, user కి direct గా serve చేస్తుంది. ఏదైనా dynamic functionality ఉంటే, దాన్ని user యొక్క browser నేరుగా specialized services తో మాట్లాడుకుంటూ హ్యాండిల్ చేస్తుంది.
🧩 The Core Components
దీని పేరు అసలు ఈ మూడు core components ని సూచిస్తుంది:
- 🟨 JavaScript: Request/response cycle లో జరిగే ఎలాంటి dynamic programming మరియు interactivity నైనా పూర్తిగా client side (user యొక్క browser లో) హ్యాండిల్ చేస్తుంది.
- 🔌 APIs: ఇవి server-side databases ని, backend actions ని replace చేస్తాయి. Server-side processes లేదా database actions అన్నీ reusable APIs (payment processor, search tool, లేదా headless CMS లాగా) గా మార్చబడతాయి.
- 📄 Markup: అంటే pre-rendered HTML. Website ని deploy చేయకముందే “build” step లో మొత్తం website ని static HTML files గా ముందే generate చేసి పెడుతుంది.
🛠️ How It Works: A Practical Example
ఒక standard blog ఈ రెండు models లో ఎలా పనిచేస్తుందో చూద్దాం.
🐢 The Traditional Way (ఉదాహరణకు, WordPress):
User మీ latest blog post చదవడానికి link click చేసినప్పుడు:
- 💻 Request: User యొక్క browser ఆ page కోసం మీ web server ని అడుగుతుంది.
- ⚙️ Process: Server స్టార్ట్ అయ్యి, backend code (PHP లాంటిది) రన్ చేసి, blog post యొక్క text ని తీసుకురావడానికి database (MySQL లాంటిది) ని query చేస్తుంది.
- 🪡 Stitch: ఆ text, site యొక్క theme, మరియు comments అన్నింటినీ కలిపి server ఒక HTML page లాగా తయారు చేస్తుంది.
- 📤 Deliver: Finally, ఈ newly created HTML page ని server మళ్ళీ user కి పంపిస్తుంది.
⚠️ గమనిక: ఎవరైనా ఆ page ని విజిట్ చేసిన ప్రతీసారీ ఈ process జరుగుతుంది. దీనివల్ల site slow అవ్వొచ్చు మరియు traffic spikes వచ్చినప్పుడు server crashes అయ్యే ప్రమాదం ఉంటుంది.
⚡ The JAMstack Way (ఉదాహరణకు, Next.js, Hugo, లేదా Gatsby):
🏗️ The Build Step: మీరు కొత్త blog post రాసినప్పుడు, మీరు ఒక build process ని trigger చేస్తారు. ఈ system మీ text ని తీసుకుని, దాన్ని theme తో కలిపి, ఎవరైనా విజిట్ చేయకముందే మీ site లోని ప్రతీ page కి static HTML files ని ముందే generate చేసి పెడుతుంది.
User మీ blog post చదవడానికి link click చేసినప్పుడు:
- 💻 Request: User యొక్క browser ఆ page ని అడుగుతుంది.
- 🌍 Instant Delivery: ఒక Content Delivery Network (CDN) వెంటనే ఆ pre-built, static HTML file ని serve చేస్తుంది. ఇక్కడ query చేయడానికి database ఉండదు, రన్ చేయడానికి ఎటువంటి server-side code ఉండదు. కాబట్టి page almost instantly లోడ్ అవుతుంది.
- 🔄 Dynamic Features: Static page లోడ్ అవ్వగానే, user యొక్క browser లో JavaScript kick in అవుతుంది (స్టార్ట్ అవుతుంది). ఒకవేళ మీకు comments section ఉంటే, ఆ comments ని fetch చేసి డిస్ప్లే చేయడానికి JavaScript ఒక third-party API (Disqus లాంటిది) తో మాట్లాడుతుంది.
🏆 Why It Wins
Main content అంతా global CDN మీద ఉండే కేవలం static files కాబట్టి, దీనివల్ల ఎన్నో లాభాలు ఉన్నాయి:
- 🚀 Incredibly Fast: Pages ముందే build అయి ఉంటాయి కాబట్టి చాలా ఫాస్ట్ గా ఓపెన్ అవుతాయి.
- 💰 Extremely Cheap: Static files ని host చేయడం చాలా తక్కువ ఖర్చుతో కూడుకున్నది.
- 🛡️ Nearly Impossible to Hack: Public కి ఎలాంటి web server లేదా database expose అవ్వదు కాబట్టి దీన్ని హ్యాక్ చేయడం దాదాపు అసాధ్యం.
