(
Ilustrasi )
Sekali waktu Beberapa tahun yang lalu, ketika saya baru saja mulai bekerja dengan web di Jawa, kami bekerja dengan JSP. Seluruh halaman dihasilkan di server dan dikirim ke klien. Tetapi kemudian muncul pertanyaan bahwa jawabannya datang terlalu lama ...
Kami mulai menggunakan pendekatan di mana templat halaman kosong diberikan, dan semua data sudah secara bertahap dimuat oleh Ajax. Semua orang senang, halaman itu menunjukkan. Kami belum menyadari apa yang telah kami lakukan untuk diri kami sendiri, karena CSR memengaruhi secara negatif optimasi mesin pencari dan kinerja pada perangkat seluler. Tapi kemudian saya kembali mendengar tentang dukungan SSR dengan kerangka kerja JS.
Dan apa yang terjadi, sejarah berulang?Apa prinsip operasi RSK?1. Prapenguraian. Dalam kasus yang paling sederhana, file HTML N dihasilkan, yang diletakkan di server dan dikembalikan apa adanya - yaitu, statis dikembalikan, kami tidak menghasilkan apa pun selama permintaan.
2. Seperti dalam kasus JSP, server menghasilkan HTML lengkap dengan semua konten dan mengembalikannya ke klien. Tetapi, agar tidak menghasilkan halaman untuk setiap permintaan (mungkin ada jutaan dari mereka dan server kami akan bengkok), mari kita tambahkan cache proxy. Misalnya, pernis.
Kapan masing-masing metode ini dapat diterapkan:1. Kapan masuk akal untuk menghasilkan banyak file HTML? Jelas, ketika data di situs berubah sedikit kurang dari tidak sama sekali. Sebagai contoh, situs web perusahaan dari sebuah kios perbaikan sepatu, yang ada di ujung jalan (ya, paman yang mengganti sepatu haknya di sebuah kios berukuran 2x2 meter, juga menginginkan situs web perusahaan - dan, tentu saja, dengan halaman misi perusahaan). Untuk situs seperti itu, Anda bahkan tidak perlu repot dengan kerangka kerja, RSK dan peluit lainnya, tetapi ini adalah contoh bulat. Bagaimana jika kita memiliki blog dengan posting 1k? Terkadang kami memperbaruinya, terkadang kami menambahkan yang baru. Hasilkan 1k + file statis ... Ada yang salah. Dan jika kita mengubah posting, maka kita perlu membuat ulang file tertentu. Hmm ...
2. Dan di sini metode kedua cocok untuk kita. Di mana kami menghasilkan pertama kalinya dengan cepat, dan kemudian menembolok respons di layanan proxy. Waktu caching bisa satu jam / dua / hari - apa pun. Jika kami memiliki 10.000 panggilan per jam per posting (sulit dipercaya, kan?), Maka hanya permintaan pertama yang akan mencapai server. Sisanya akan menerima salinan yang di-cache sebagai tanggapan, dan server kami lebih mungkin untuk hidup. Dalam hal memperbarui posting, kita hanya perlu mengatur ulang catatan yang di-cache sehingga halaman berikutnya akan menghasilkan halaman yang sebenarnya.
Dari kata-kata ke tindakan:
Halo repo dunia.
0) menghasilkan hello world
Untuk memulai lebih cepat, komunitas Nuxt telah menyiapkan
templat dasar , Anda dapat menginstalnya dengan perintah:
$ vue init <template-name> <project-name>
Secara default, template-awal diusulkan, dan kami akan mengambilnya sebagai contoh. Meskipun dalam aplikasi nyata kami memilih express-template. Mari kita sebut proyek secara langsung:
$ vue init nuxt-community/starter-template habr-nuxt-example $ cd habr-nuxt-example $ yarn # npm install, $ yarn dev
Baiklah , kami menghasilkan hello world. Melalui url, Anda dapat melihat halaman yang dihasilkan:
1) Webpack dan Linting
Nuxt out of the box telah mengkonfigurasi paket web dengan dukungan untuk ES6 (babel-loader), komponen file tunggal Vue (vue-loader), serta SCSS, JSX dan banyak lagi.
Jika kemampuan ini tidak cukup, konfigurasi webpack dapat diperluas. Kami pergi ke nuxt.config.js, dan di build.extend kami memiliki kemampuan untuk memodifikasi konfigurasi.
Sebagai contoh, kami akan menambahkan style lining dengan analogi dengan linting kode - yang penting, menurut pendapat kami, poin untuk mempertahankan basis kode yang seragam. Ini adalah kebiasaan baik yang akan membantu menghindari banyak jebakan.
Contoh ekstensi config (menghubungkan file config untuk maid berdasarkan variabel lingkungan):
config.plugins.push( new StylelintPlugin({ files: [ '**/*.vue', 'assets/scss/**/*.scss' ], configFile: './.stylelintrc.dev.js' }) )
Perubahan lain dapat dilihat dalam repo dengan
tag , perubahan ini akan membantu kami menjaga gaya dalam urutan.
Dan contoh file konfigurasi linter: kami menggunakan Standard JS, sebagai solusi yang diterima secara umum di Vue / Nuxt:
... extends: [ - 'plugin:vue/essential' + 'standard', + 'plugin:vue/recommended' ], …
2) Untuk contoh bekerja dengan data, kami akan menggunakan
API ini :
Hubungkan Axios sebagai plugin, buat file baru di direktori plugins:
import * as axios from 'axios' let options = {}
Dan contoh penggunaan:
import axios from '~/plugins/axios' export default { async asyncData ({ params }) { const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts') return { data } } }
Lain di lobak dengan
tag .
Nomor unduhan:
1) SSR + Varnish
Permintaan pertama:
Kedua:
2) No-ssr
Permintaan kedua dari fastley
Halaman kosong tiba dengan cepat, tetapi butuh 2 detik untuk menghasilkan konten di sana.
Kesimpulan
Apa hasilnya? Kami menemukan cara untuk mendapatkan aplikasi SSR startup yang minimal dikonfigurasi. Mereka menambahkan Linting untuk mempertahankan gaya kode dari awal kehidupan proyek, dan juga menjabarkan arsitektur umum. Anda dapat menulis googol Anda.
