Bangun Aplikasi JavaScript Universal yang Lebih Baik Dengan Next.js 2.0 – Hi bret kali ini saya akan share ke kalian informasi tentang Bangun Aplikasi JavaScript Universal yang Lebih Baik Dengan Next.js 2.0, sebelum lanjut kalian harus tau apa itu aplikasi javascript universal, berikut detail penjelasannya.
Apa itu Aplikasi JavaScript Universal?
Hanya untuk memberikan sedikit konteks bagi individu yang menganggap Universal JavaScript sebagai istilah baru.
Istilah Universal berarti kemampuan untuk menjalankan kode yang sama di server, browser, perangkat seluler, dan platform lainnya. Universal JavaScript adalah istilah yang orang condong ke arah hari ini. Banyak pengembang juga menyebutnya Isomorphic JavaScript. Singkatnya, ada perdebatan tentang repo React tentang istilah ini. Michael Jackson, pengembang ReactJS populer menulis posting blog di Universal JavaScript. Memang benar bahwa penamaan sesuatu adalah salah satu aspek yang paling sulit dari Ilmu Komputer.
Apa yang Baru di Next.js 2.0?
Next.js 2.0 dirilis pada 27 Maret 2017. Muncul dibundel dengan serangkaian fitur baru dan peningkatan fitur yang ada. Next.js 1.0 sudah menyertakan fitur berikut:
- Pemuatan ulang kode panas.
- Transpilasi dan bundling otomatis (menggunakan babel dan webpack).
- Render server dan pengindeksan file JavaScript di direktori /pages.
- Penyajian file statis.
- Isolasi dan modularisasi CSS.
Jadi, apa yang berubah? Perbaikan apa yang telah dilakukan? Apakah ada fitur baru? Akankah aplikasi Next.js Anda yang dibuat dengan rilis baru ini benar-benar siap produksi? Mari kita lihat semua yang ditawarkan Next.js 2.0.
1. Waktu Kompilasi Lebih Cepat
Setiap pengembang dan anjing mereka membutuhkan aplikasi mereka agar berkinerja tinggi dari tahap pengembangan hingga produksi. Banyak pekerjaan telah dilakukan untuk meningkatkan waktu pembuatan dev yang dibawa oleh Next.js 1.0 ke tempat kejadian. Dengan sangat gembira, dengan ini saya umumkan kepada Anda bahwa Next.js 2.0 dibundel dengan waktu pembuatan/pembuatan ulang yang lebih singkat. Ini dimungkinkan dengan menawarkan kompilasi Malas selama pengembangan. Ini berarti bahwa sebelum sekarang, ketika Anda menjalankan Next, itu mengkompilasi semua halaman. Tapi sekarang, kompilasi malas memastikan bahwa hanya ketika pengguna membuka halaman kompilasi terjadi. Jadi setiap halaman yang dipanggil oleh pengguna adalah entri sesuai permintaan.
Lazy Compilation during development.
Implement on-demand entries.
2. Kompresi Gzip Lebih Cepat
Next.js 2.0 secara otomatis membuat gzip semua file JavaScript statis Anda dan menyajikannya saat Anda membuat aplikasi dengan menjalankan build berikutnya. Ini menghemat banyak daya CPU, terutama untuk aplikasi yang digunakan di lingkungan seperti fungsi cloud.
3. Develop Lebih Cepat dan Efisien
Selain mengurangi waktu pembuatan pengembang, Next.js 2.0 menawarkan pembangunan yang jauh lebih kecil dan lebih efisien daripada versi sebelumnya. Jadi secara default, ukuran aplikasi Anda sekarang lebih kecil.
Basic site with Next.js and React bundled.
Source: zeit.co
Pemuatan halaman juga telah dibuat lebih cepat dengan membuatnya sehingga file bundel awal di-cache secara permanen pada klien.
Masalah muncul di Next.js 1.0 tentang dependensi bersama antara halaman yang menyebabkan latensi saat menjelajah melalui halaman yang diberikan server berbeda, dan tim yang selalu siap menemukan cara untuk menyelesaikannya dengan menyiapkan potongan umum Webpack untuk menghindari pengiriman kode berulang di seluruh komponen.
Shared dependency issues.
Dependency issue solved with CommonsChunkPlugin.
4. API Terprogram untuk Rooting
Dalam versi utama Next.js pertama, rooting dinamis hanya dimungkinkan dengan string kueri. Tidak ada cara untuk mencapai URL yang bersih dan mewah, dan memuat kode server khusus Anda sendiri merupakan tantangan besar. Dengan Next.js 2, tantangan itu sudah berlalu.
Issue raised last year.
Anda sekarang dapat menulis server kustom Anda sendiri secara terprogram, menyesuaikan route, dan menggunakan pola route yang berbeda seperti:
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({
dev
})
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
server.get('/p/:username', (req, res) => {
return app.render(req, res, '/z', {
...req.query,
username: req.params.username
})
})
server.get('*', handle)
server.listen(3333)
})dalam contoh kode di atas, Anda telah menyiapkan server khusus. The path /p/prosper where prosper is the :username is resolved to ./pages/z. The page gets access to the username parameter and can do whatever has been programmed iintoit. Check out this example.
5. Pre-Fetching
Next.js 2 dibundel dengan API yang memungkinkan Anda mengambil halaman terlebih dahulu. Tag apa pun dapat menerima prop prefetch dan mengambil lebih dulu halaman yang ditautkannya di latar belakang, seperti:
import Link from 'next/link'
export default () => (
<nav>
<ul>
<li><Link prefetch href='/pricing'><a>About</a></Link></li>
<li><Link prefetch href='/auth0'><a>Contact</a></Link></li>
</ul>
</nav>
)Ini memberi Anda kinerja SPA yang digabungkan dengan rendering server. Wow, itu kinerja yang lebih baik dengan sedikit usaha.
6. Immutable Caching
Saat Anda membuat aplikasi dengan build berikutnya dan memulai aplikasi, Next.js 2 akan menyajikan file JavaScript dan aset lainnya sebagai aset yang tidak dapat diubah. Ini berarti bahwa setelah browser mengunduh aset yang tidak dapat diubah, jika Anda memuat ulang halaman browser, browser Anda tidak akan mencoba memuat aset ini dari server lagi.
Keuntungan lain untuk kinerja dan kecepatan.
Kesimpulan
Dengan Next.js 2, repo Github sekarang memiliki lebih dari 11.000 bintang dan kami telah melihat banyak peningkatan signifikan dan peningkatan besar dari versi awal yang dirilis tahun lalu. Kudos kepada tim di balik alat yang indah ini dan komunitas JavaScript atas dukungan mereka yang berkelanjutan. Bahkan, mereka sudah memiliki rencana untuk Next.js 3.
