Next.js adalah framework JavaScript yang dikembangkan oleh Zeit yang memungkinkan Anda untuk membuat aplikasi web dengan React. Salah satu fitur yang menarik dari Next.js adalah kemampuannya untuk menggunakan server-side rendering (SSR).
Server-side rendering adalah proses menampilkan halaman web dengan menggunakan server untuk menghasilkan HTML yang akan ditampilkan kepada pengguna. Ini berbeda dengan client-side rendering, di mana HTML dihasilkan oleh browser setelah JavaScript dijalankan di client.
Server-side rendering memiliki beberapa keuntungan dibandingkan dengan client-side rendering. Pertama, halaman yang ditampilkan lebih cepat karena HTML sudah tersedia saat halaman pertama kali dimuat. Ini bisa menjadi keuntungan besar bagi aplikasi yang menargetkan pengguna dengan koneksi internet yang lambat atau perangkat yang lemah. Kedua, server-side rendering memungkinkan mesin pencari lebih mudah mengindeks halaman web Anda, karena mesin pencari dapat mengindeks HTML yang diterima dari server, bukan hasil rendering JavaScript yang mungkin sulit diindeks.
Untuk menggunakan server-side rendering di Next.js, Anda hanya perlu menambahkan kode React Anda seperti biasa. Next.js akan menangani proses rendering server-side dan menyediakan API yang mudah digunakan untuk membuat aplikasi server-side rendered.
Selain itu, Next.js juga menyediakan fitur seperti automatic code splitting, optimized performance, dan built-in support for serverless functions, yang semuanya membantu Anda membuat aplikasi web yang cepat, skalabel, dan mudah dikelola.
Jadi, jika Anda ingin membuat aplikasi web dengan React dan mencari cara untuk meningkatkan performa dan kecepatan aplikasi Anda, Next.js dengan server-side rendering mungkin merupakan pilihan yang tepat untuk Anda.
Penggunaan Server-side rendering
Penggunaan server-side rendering (SSR) di Next.js dapat membantu Anda meningkatkan performa dan kecepatan aplikasi web yang dibangun dengan React. Next.js adalah framework JavaScript yang dikembangkan oleh Zeit yang memungkinkan Anda untuk dengan mudah membuat aplikasi web yang menggunakan SSR.
Untuk menggunakan SSR di Next.js, pertama-tama Anda perlu membuat aplikasi Next.js dengan menggunakan perintah create-next-app di terminal. Kemudian, Anda dapat menambahkan kode React Anda seperti biasa, dan Next.js akan menangani proses rendering server-side.
Next.js juga menyediakan beberapa fitur yang membantu Anda membuat aplikasi yang cepat dan skalabel, seperti automatic code splitting, optimized performance, dan built-in support for serverless functions.
Dengan SSR di Next.js, halaman web akan lebih cepat dimuat karena HTML sudah tersedia saat halaman pertama kali dimuat. Ini bisa menjadi keuntungan besar bagi aplikasi yang menargetkan pengguna dengan koneksi internet yang lambat atau perangkat yang lemah. Selain itu, SSR juga memungkinkan mesin pencari lebih mudah mengindeks halaman web Anda, karena mesin pencari dapat mengindeks HTML yang diterima dari server, bukan hasil rendering JavaScript yang mungkin sulit diindeks.
Jadi, jika Anda ingin membuat aplikasi web dengan React dan mencari cara untuk meningkatkan performa dan kecepatan aplikasi Anda, penggunaan SSR di Next.js mungkin merupakan pilihan yang tepat untuk Anda.
Contoh penggunaan server-side rendering (SSR)
Contoh penggunaan server-side rendering (SSR) di Next.js adalah membuat sebuah aplikasi blog. Pertama, Anda bisa membuat aplikasi Next.js dengan perintah create-next-app di terminal. Kemudian, Anda dapat menambahkan kode React untuk menampilkan daftar posting blog di halaman utama aplikasi Anda.
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../components/Layout';
const Home = ({ posts }) => {
return (
<Layout>
<Head>
<title>Blog App</title>
</Head>
<h1>Latest Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<Link href="/posts/[id]" as={`/posts/${post.id}`}>
<a>{post.title}</a>
</Link>
</li>
))}
</ul>
</Layout>
);
};
export const getServerSideProps = async () => {
const res = await fetch('https://my-api.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
};
};
export default Home;
Di sini, kita menggunakan getServerSideProps untuk mengambil daftar posting dari API. Kemudian, kita menampilkan daftar posting tersebut di halaman dengan menggunakan loop map.
Dengan SSR, halaman ini akan ditampilkan dengan cepat karena HTML sudah tersedia saat halaman pertama kali dimuat. Selain itu, mesin pencari juga akan lebih mudah mengindeks halaman ini karena dapat mengindeks HTML yang diterima dari server.
Ini hanya contoh sederhana penggunaan SSR di Next.js. Anda dapat menggunakan fitur-fitur lain yang ditawarkan oleh Next.js, seperti automatic code splitting dan built-in support for serverless functions, untuk membuat aplikasi web yang lebih kompleks dan skalabel.
