[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"blog-jamstack":3},{"id":4,"title":5,"body":6,"date":357,"description":358,"extension":359,"meta":360,"navigation":361,"path":362,"seo":363,"stem":364,"tags":365,"__hash__":367},"blog\u002Fblog\u002Fjamstack.md","Jamstack",{"type":7,"value":8,"toc":341},"minimark",[9,14,31,85,89,112,116,162,165,168,174,179,182,185,210,217,219,223,246,252,254,258,261,291,298,300,304,312,314,318],[10,11,13],"h2",{"id":12},"apa-itu-jamstack","Apa itu Jamstack",[15,16,17,18,22,23,26,27,30],"p",{},"\"Jamstack\" yang sebenarnya adalah JAM dan stack dimana JAM adalah akronim dari JavaScript, API & Markup. Sebuah arsitektur yang memisahkan ",[19,20,21],"em",{},"web layer"," dari ",[19,24,25],{},"data"," dan ",[19,28,29],{},"business logic",".",[32,33,34,55,68],"ul",{},[35,36,37,42,43,46,47,50,51,54],"li",{},[38,39,41],"h4",{"id":40},"javascript","JavaScript","\nSemua fungsionalitas dilakukan oleh JavaScript, seperti ",[19,44,45],{},"request API"," atau merender halaman statis. Banyak ",[19,48,49],{},"library"," atau ",[19,52,53],{},"framework"," yang bisa digunakan sesuai kebutuhan.",[35,56,57,61,64,65,30],{},[38,58,60],{"id":59},"apis","APIs",[19,62,63],{},"Server side operation"," seperti koneksi ke database atau terhubung ke ",[19,66,67],{},"third-party services",[35,69,70,74,77,78,81,82,30],{},[38,71,73],{"id":72},"markup","Markup",[19,75,76],{},"Pre-render"," halaman statis HTML yang dikirimkan ke browser, di-",[19,79,80],{},"generate"," dari Markdown atau dengan ",[19,83,84],{},"Static Site Generator",[10,86,88],{"id":87},"workflow","Workflow",[15,90,91,92,95,96,99,100,104,105,107,108,111],{},"Setiap push ke ",[19,93,94],{},"Version Control System"," akan trigger build di ",[19,97,98],{},"CDN"," dimana ",[101,102,103],"strong",{},"SSG"," - ",[19,106,84],{}," akan dijalankan, proses ini kemudian menghasilkan ",[19,109,110],{},"static asset"," yang dikirim ke browser. Datasource umumnya menggunakan HeadlessCMS yang memudahkan untuk mengatur content seperti Strapi, Contentful, Sanity.io.",[10,113,115],{"id":114},"keuntungan","Keuntungan",[32,117,118,137,148,155],{},[35,119,120,124,125,128,129,132,133,136],{},[38,121,123],{"id":122},"performance","Performance","\nJamstack ",[19,126,127],{},"generate page"," selama ",[19,130,131],{},"build"," sehingga hanya ",[19,134,135],{},"static"," yang terkirim. Layanan CDN dapat menerima request dengan cepat tanpa infrastruktur kompleks",[35,138,139,143,144,147],{},[38,140,142],{"id":141},"developer-experience","Developer Experience","\nSangat banyak variasi teknologi yang bisa digunakan. Developer punya kebebasan untuk memilih framework, third-party APIs yang mempercepat proses ",[19,145,146],{},"development"," dan menyenangkan untuk dilakukan.",[35,149,150,154],{},[38,151,153],{"id":152},"security","Security","\nKita tidak perlu khawatir dengan keamanan karena aplikasi terpecah menjadi beberapa layanan.",[35,156,157,161],{},[38,158,160],{"id":159},"scalability","Scalability","\nDengan CDN mudah untuk mengatur traffic",[163,164],"hr",{},[10,166,167],{"id":146},"Development",[15,169,170,171,173],{},"Untuk ",[19,172,80],{}," halaman asset HTML banyak cara yang dilakukan.",[175,176,178],"h3",{"id":177},"hand-coding","Hand Coding",[15,180,181],{},"Menulis HTML untuk halaman yang sederhana.",[175,183,84],{"id":184},"static-site-generator",[32,186,187,196,203],{},[35,188,189],{},[190,191,195],"a",{"href":192,"rel":193},"https:\u002F\u002Fnextjs.org",[194],"nofollow","Next JS",[35,197,198],{},[190,199,202],{"href":200,"rel":201},"https:\u002F\u002Fgohugo.io\u002F",[194],"Hugo",[35,204,205],{},[190,206,209],{"href":207,"rel":208},"https:\u002F\u002Fwww.gatsbyjs.com\u002F",[194],"Gatsby",[15,211,212,213],{},"See more ",[190,214,103],{"href":215,"rel":216},"https:\u002F\u002Fjamstack.org\u002Fgenerators\u002F",[194],[163,218],{},[10,220,222],{"id":221},"deployment","Deployment",[32,224,225,232,239],{},[35,226,227],{},[190,228,231],{"href":229,"rel":230},"https:\u002F\u002Fvercel.com\u002F",[194],"Vercel",[35,233,234],{},[190,235,238],{"href":236,"rel":237},"https:\u002F\u002Fpages.github.com\u002F",[194],"GitHub Pages",[35,240,241],{},[190,242,245],{"href":243,"rel":244},"https:\u002F\u002Fwww.tnd.dev\u002Ftools\u002Fhosting-deployment\u002F",[194],"Amazon S3",[15,247,212,248],{},[190,249,251],{"href":215,"rel":250},[194],"Hosting & Deployment",[163,253],{},[10,255,257],{"id":256},"cms","CMS",[15,259,260],{},"Secara umum dikenal dengan HeadlessCMS untuk mengatur content.",[32,262,263,270,277,284],{},[35,264,265],{},[190,266,269],{"href":267,"rel":268},"https:\u002F\u002Fwww.netlifycms.org",[194],"Netlify CMS",[35,271,272],{},[190,273,276],{"href":274,"rel":275},"https:\u002F\u002Fstrapi.io\u002F",[194],"Strapi",[35,278,279],{},[190,280,283],{"href":281,"rel":282},"https:\u002F\u002Fwww.contentful.com\u002F",[194],"Contentful",[35,285,286],{},[190,287,290],{"href":288,"rel":289},"https:\u002F\u002Fsanity.io\u002F",[194],"Sanity.io",[15,292,212,293],{},[190,294,297],{"href":295,"rel":296},"https:\u002F\u002Fjamstack.org\u002Fheadless-cms\u002F",[194],"Headless CMS",[163,299],{},[10,301,303],{"id":302},"static-web-service","Static Web Service",[15,305,306,307],{},"List untuk layanan yang bisa digunakan ",[190,308,311],{"href":309,"rel":310},"https:\u002F\u002Fgithub.com\u002Fagarrharr\u002Fawesome-static-website-services",[194],"awesome-static-website-services",[163,313],{},[10,315,317],{"id":316},"referensi","Referensi",[15,319,320,325,326,325,331,325,335,340],{},[190,321,324],{"href":322,"rel":323},"https:\u002F\u002Fjamstack.org\u002F",[194],"Jamstack org"," *\n",[190,327,330],{"href":328,"rel":329},"https:\u002F\u002Fjamstack.wtf\u002F#what-is-jamstack",[194],"Jamstack WTF",[190,332,283],{"href":333,"rel":334},"https:\u002F\u002Fwww.contentful.com\u002Fr\u002Fknowledgebase\u002Fjamstack-cms\u002F",[194],[190,336,339],{"href":337,"rel":338},"https:\u002F\u002Fwww.maibornwolff.de\u002Fen\u002Fspotlight\u002Fjamstack-architecture-and-scenarios\u002F",[194],"jamstack-architecture-and-scenarios"," *",{"title":342,"searchDepth":343,"depth":343,"links":344},"",2,[345,346,347,348,353,354,355,356],{"id":12,"depth":343,"text":13},{"id":87,"depth":343,"text":88},{"id":114,"depth":343,"text":115},{"id":146,"depth":343,"text":167,"children":349},[350,352],{"id":177,"depth":351,"text":178},3,{"id":184,"depth":351,"text":84},{"id":221,"depth":343,"text":222},{"id":256,"depth":343,"text":257},{"id":302,"depth":343,"text":303},{"id":316,"depth":343,"text":317},"2023-07-30","Mengenal Jamstack, arsitektur web yang memisahkan web layer dari data dan business logic","md",{},true,"\u002Fblog\u002Fjamstack",{"title":5,"description":358},"blog\u002Fjamstack",[366],"Architecture","eLEeoSuYT33_9hmtiyM5MAyXYHMS0UGYo_pRbkOizKQ",1781958637479]