Next.js
merupakan sebuah React framework yang dibentuk buat mengatasi kasus
client-side rendering yang dimiliki React. Sebuah halaman website yang
dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat
interaktif.
Selain
itu, ketika data berubah, React menggunakan efisien akan mengupdate
bagian menurut halaman website yang memang perlu diupdate tanpa perlu
reload satu halaman penuh.
Untuk
menerima itu seluruh, client wajib load seluruh file JavaScript sebelum
konten halaman ditampilkan. apabila file JS relatif akbar maka ketika
yang diperlukan buat load pertama kali pula sebagai lebih lama.
Masalah
lain menurut client-side rendering merupakan SEO, terdapat kemungkinan
web crawler berusaha mengindex halaman yang belum terselesaikan dirender
sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi
blank.
Kedua
kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu
halaman HTML dan file JavaScript pada generate sebelum dikirim ke
client.
Ada dua bentuk pre-rendering yaitu Server Side Rendering (SSR) dan Static Site Generator (SSG).
Sesuai
namanya proses render terjadi pada server dan bukan pada client, setiap
request ke server akan direspon menggunakan sebuah halaman HTML.
Setiap
request ke server akan direspon menggunakan halaman HTML yang telah
terselesaikan digenerate dalam ketika proses build. Teknik cache memakai
CDN bisa diterapkan buat mempersingkat ketika akses.
Selain pre-rendering, Next.js pula mempunyai beberapa fitur buat memudahkan kita pada menciptakan pelaksanaan React:
import Head from 'next/head'
import Link from 'next/link'
import {useState , useCallback} from 'react';
export const getStaticProps = async () => {
const res = await fetch('http://localhost:3004/profile');
const data = await res.json();
return {
props : { profile : data }
}
}
const Transaksi = ({profile}) => {
const [show,setShow] = useState("");
const [showDetail,setShowDetail] = useState("");
const [formStock,setFormStock] = useState({
namaToko:"",
noHp:"",
email:"",
pass:""
})
const handleChange2 = e => {
let data = {...formStock}
data[e.target.name] = e.target.value;
setFormStock(data)
};
const [barangTerpilih,setBarangTerpilih] = useState(
{
"id" : "1p",
"nama" : ""
}
);
function handleShow(id,nama){
if(show === ""){
setBarangTerpilih(
{
"id" : id,
"nama": nama
}
)
setShow('is-active')
}else {
setShow("")
}
}
function modalDetail(){
if(showDetail === ""){
handleShow()
setShowDetail("is-active")
} else (
setShowDetail("")
)
}
function modalStock(){
if(showStock === ""){
handleShow()
handleEdit(barangTerpilih.nama)
setShowStock("is-active")
} else (
setShowStock("")
)
}
function handleEdit(x){
const barangs = cards.filter(card => {
return card.namaProduk.toLowerCase() === x.toLowerCase();
})
setFormStock({
namaToko:namaToko,
noHp:noHp,
email:email,
pass:pass
})
}
return (
<div>
<Head>
<title>Edit Toko</title>
</Head>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="block my-0">
<div className="columns is-mobile is-centered is-flex btm-bordergray m-1">
<Link href="/dashboard/editToko">
<button className="button is-white is-size-5-mobile is-size-3-desktop transaksi">Edit Toko</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex btm-bordergray m-1">
<Link href="/dashboard/transaksi">
<button className="button is-white is-size-5-mobile is-size-3-desktop transaksi">Transaksi</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex btm-bordergray m-1">
<Link href="/dashboard/pendapatan">
<button className="button is-white is-size-5-mobile is-size-3-desktop transaksi" >Pendapatan</button>
</Link>
</div>
</div>
</div>
</div>
<div className="tile is-parent">
<div className="tile is-child">
<div className="has-text-centered is-flex-direction-column bg-green m-5 p-5">
<div className="is-flex is-justify-content-center">
<figure className="image is-128x128">
<img className="is-rounded bg-white" src="/user.png"/>
</figure>
</div>
<div className="is-align-items-center py-3">
<Link href="#">
<a className="button is-size-6 green bg-gray">Ubah Profile
</a>
</Link>
</div>
</div>
{profile.map(x => (
<div className="m-5">
<div className="is-flex is-justify-content-space-between is-align-items-center py-1 btm-bordergray">
<div className="mx-5">Nama Toko</div>
<div>
<a class="panel mx-0">
<div>{x.namaToko}
<button id="btn" onClick={()=>{handleShow(x.id,x.namaToko)}} className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align-items-center py-1 btm-bordergray">
<div className="mx-5">No. Handphone</div>
<div>
<a class="panel-block">
<div>{x.noHp}
<button id="btn" onClick={()=>{handleShow(x.id,x.noHp)}} className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align-items-center py-1 btm-bordergray">
<div className="mx-5">Email</div>
<div>
<a class="panel-block">
<div>{x.email}
<button id="btn" onClick={()=>{handleShow(x.id,x.email)}} className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align-items-center btm-bordergray py-2">
<div className="mx-5">Atur Password</div>
<a class="panel-block">
<div>{x.pass}
<button id="btn" onClick={()=>{handleShow(x.id,x.pass)}} className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</div>
</a>
</div>
</div>
))
}
</div>
<div className={"modal " + show}>
<div className="modal-background" onClick={()=>{handleShow()}}></div>
<div className="modal-card px-2">
<header className="modal-card-head">
<p className="modal-card-title">Pilih Aksi Untuk {barangTerpilih.nama}</p>
<button id="close" onClick={()=>{handleShow()}} className="delete" aria-label="close"></button>
</header>
<section className="modal-card-body">
<div className="columns">
<div className="column">
<form className="is-flex is-flex-direction-column form">
<div className="masukan mb-2 px-5">
<label htmlFor="inputNama" className="label">Nama Toko</label>
<div className="control">
<input input name="namaToko" type="text" className="input" onChange={handleChange2} value={formStock.namaToko}/>
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputNama" className="label">No Hp</label>
<div className="control">
<input input name="noHp" type="text" className="input" onChange={handleChange2} value={formStock.noHp}/>
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputNama" className="label">Email</label>
<div className="control">
<input input name="email" type="text" className="input" onChange={handleChange2} value={formStock.email}/>
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputNama" className="label">Password</label>
<div className="control">
<input input name="pass" type="text" className="input" onChange={handleChange2} value={formStock.pass}/>
</div>
</div>
<div className="masukan my-2 px-5">
<div className="control">
<button className="button bg-green white is-rounded " type="submit">Ubah</button>
</div>
</div>
</form>
</div>
</div>
</section>
<footer className="modal-card-foot">
<button onClick={()=>{handleShow()}} id="close" className="button bg-red white">Batal</button>
</footer>
</div>
</div>
{/* modal */}
</div>
</div>
</div>
);
}
export default Transaksi;
Komentar
Posting Komentar