Berurusan dengan API Asynchronous dalam React Server yang Diberikan

Ringkasan mata utama

Rendering Server-Side of React Code membantu mengurangkan masa pemuatan dan meningkatkan fleksibiliti SEO, tetapi pengendalian API asynchronous boleh mencabar kerana keperluan untuk membuat permohonan sebelum anda mengetahui data yang diperlukan.
Penyelesaian yang sedia ada, seperti Next.js, Redux Connect, dan React-Frontload, mempunyai kelebihan dan kekurangan mereka sendiri apabila berurusan dengan API Asynchronous dalam kod React yang diberikan pelayan.
Penyelesaian yang disesuaikan boleh dilaksanakan dengan melaksanakan dua penulisan sisi pelayan: kali pertama mengendalikan panggilan API dan operasi tak segerak, dan kali kedua menggunakan data yang diperoleh untuk rendering halaman akhir.
Penyelesaian penyesuaian memerlukan pengendalian yang teliti dari negara-negara yang berlainan dalam komponen, termasuk prefetch, postfetch, pra-render dan back-end rendering. Ini boleh dicapai melalui kompleks jika pernyataan dalam kod komponen.
Penyelesaian yang disesuaikan juga memerlukan menukar fail index.html untuk menghantar data prefetched sebagai sebahagian daripada permintaan halaman dan menambahnya untuk mencari dan menggantikan. Jika anda menggunakan tag skrip, anda memerlukan pengekodan asas-64.

Jika anda pernah membuat halaman aplikasi React Basic, ia boleh mempunyai isu SEO dan prestasi yang lemah, terutamanya pada peranti yang lebih perlahan. Anda boleh menambah rendering pelayan web tradisional (biasanya menggunakan NodeJs), tetapi ini bukan proses yang mudah, terutama ketika berurusan dengan API Asynchronous.

Dua faedah utama kod rendering sisi pelayan adalah:

mempercepat kelajuan pemuatan
Meningkatkan fleksibiliti SEO

Ingatlah bahawa Google akan menunggu JavaScript anda dimuatkan, jadi kandungan mudah seperti kandungan tajuk akan berubah tanpa masalah. (Saya tidak boleh mengatakan apa yang berlaku dengan enjin carian lain, walaupun, atau bagaimana boleh dipercayai.)

Dalam artikel ini, saya akan membincangkan bagaimana untuk mendapatkan data dari API tak segerak apabila menggunakan kod React yang diberikan pelayan. Kod React mempunyai struktur aplikasi keseluruhan yang dibina ke dalam JavaScript. Ini bermakna tidak seperti mod MVC tradisional dengan pengawal, anda tidak tahu data yang anda perlukan sebelum aplikasi membuat. Dengan rangka kerja seperti Create React App, anda dapat dengan cepat membuat aplikasi kerja berkualiti tinggi, tetapi ia memerlukan anda untuk mengendalikan rendering hanya pada sisi klien. Ini mempunyai masalah prestasi, serta isu SEO/data, di mana anda boleh menukar tajuk yang diperlukan.

Soalan

React terutamanya menyegerakkan rendering, jadi jika anda tidak mempunyai data, skrin pemuatan akan diberikan dan menunggu data tiba. Ini tidak berfungsi dengan baik di sisi pelayan kerana anda tidak tahu apa yang anda perlukan sebelum membuatnya, atau anda tahu apa yang anda perlukan, tetapi anda telah membuatnya.

Lihat kaedah rendering standard ini:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

Soalan:

1. Ini adalah rendering dom mencari unsur -unsur akar. Ini tidak wujud di pelayan saya, jadi kita perlu memisahkannya.
2. kita tidak dapat mengakses apa -apa di luar elemen akar utama. Kami tidak dapat menetapkan tag Facebook, tajuk, penerangan, pelbagai tag SEO, dan kami tidak dapat mengawal seluruh DOM di luar elemen, terutama tajuk.
3. kami menyediakan beberapa negeri, tetapi pelayan dan pelanggan mempunyai keadaan yang berbeza. Kita perlu mempertimbangkan bagaimana menangani keadaan ini (dalam hal ini Redux).

Jadi saya telah menggunakan dua perpustakaan di sini dan mereka sangat popular jadi mudah -mudahan ia boleh digunakan untuk perpustakaan lain yang anda gunakan.

redux: Keadaan pelayan penyimpanan dan penyegerakan klien adalah masalah mimpi ngeri. Ia sangat mahal dan sering membawa kepada kesilapan yang kompleks. Di sisi pelayan, idealnya anda tidak mahu berbuat apa -apa dengan Redux kecuali ia cukup untuk membuat kerja dan berfungsi dengan betul. (Anda masih boleh menggunakannya seperti biasa, hanya menetapkan keadaan yang cukup untuk menjadikannya kelihatan seperti pelanggan.) Jika anda ingin mencubanya, lihat pelbagai panduan sistem yang diedarkan sebagai titik permulaan.

React-Router: FYI, ini adalah versi V4, yang merupakan versi yang dipasang lalai, tetapi ia akan sangat berbeza jika anda mempunyai projek yang lebih lama. Anda perlu memastikan bahawa anda mengendalikan penghalaan di sisi pelayan dan klien dan menggunakan V4 - ia sangat baik dalam hal ini.

selepas semua, bagaimana jika anda perlu membuat panggilan pangkalan data? Ini tiba -tiba menjadi masalah besar kerana ia tidak segerak dan terletak di dalam komponen anda. Sudah tentu, ini bukan soalan baru: Lihat di repositori Rasmi Rasmi.

Anda perlu memberi untuk menentukan kebergantungan yang diperlukan -ketergantungan ini perlu ditentukan pada runtime -dan untuk mendapatkan kebergantungan ini sebelum diberikan kepada pelanggan.

Penyelesaian sedia ada

Di bawah, saya akan menyemak penyelesaian yang disediakan sekarang untuk masalah ini.

next.js

Sebelum kita mula, Next.js sangat sesuai untuk anda jika anda mahukan kod React yang diberikan oleh pelayan atau aplikasi sejagat untuk persekitaran pengeluaran anda. Ia berkesan, ringkas, dan mempunyai sokongan Zeit.

Walau bagaimanapun, ia adalah pendapat, anda perlu menggunakan toolchain mereka, dan cara mereka mengendalikan pemuatan data tak segerak tidak semestinya fleksibel.

Lihat salinan langsung kandungan ini dalam dokumen repositori seterusnya.js:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

adalah kunci, ia mengembalikan janji yang menyelesaikan objek yang dipenuhi dengan alat peraga dan hanya pada halaman. Paling penting, ini hanya dibina ke dalam toolchain mereka: tambahkannya untuk berfungsi tanpa sebarang kerja! getInitialProps

Jadi bagaimana untuk mendapatkan data pangkalan data? Anda membuat panggilan API. Anda tidak mahu? Ok, itu sangat mengerikan. (Baiklah, anda boleh menambah kandungan tersuai, tetapi anda perlu melaksanakannya sepenuhnya.) Walau bagaimanapun, jika anda memikirkannya, ini adalah amalan yang sangat munasabah dan umumnya kerana sebaliknya, pelanggan anda masih akan menjadi panggilan API yang sama dibuat dan latensi di pelayan hampir diabaikan.

Apa yang anda boleh akses adalah terhad - hampir hanya objek permintaan; Oh, dan jika anda tidak perasan sebelum ini, ia hanya berfungsi dengan komponen halaman peringkat atas.

Redux Connect

Redux Connect adalah penghantar pelayan yang sangat berpendapat dengan idea yang bagus, tetapi ini mungkin bukan untuk anda jika anda tidak menggunakan semua alat yang mereka terangkan. Pakej ini mempunyai banyak kandungan, tetapi ia sangat rumit dan belum dinaik taraf untuk bertindak balas Router V4. Terdapat banyak tetapan, tetapi mari kita lihat bahagian yang paling penting, hanya untuk mempelajari beberapa pelajaran:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

penghias tidak standard dalam JavaScript. Pada masa penulisan, mereka berada di Fasa 2, jadi gunakan dengan berhati -hati. Ini adalah satu lagi cara untuk menambah komponen pesanan yang lebih tinggi. Idea ini mudah: kunci adalah apa yang diserahkan kepada alat peraga anda, dan kemudian anda mempunyai beberapa janji yang akan menghuraikan dan masuk. Ini kelihatan baik. Mungkin pilihan lain ialah ini:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

Ini boleh dilakukan dengan JavaScript tanpa terlalu banyak masalah.

React-frontload

Repositori React-Frontload tidak mempunyai banyak dokumentasi atau penjelasan, tetapi pemahaman terbaik yang saya dapat dapatkan dari ujian (seperti yang ini) dan membaca kod sumber. Apabila sesuatu dipasang, ia ditambah kepada barisan janji, dan apabila barisan dihuraikan, ia disampaikan. Apa yang dilakukannya sangat baik, walaupun sukar untuk mengesyorkan sesuatu yang tidak didokumentasikan dengan baik, dikekalkan atau digunakan:

// 1. 连接您的数据，类似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 将数据作为 props 访问
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

Mencari penyelesaian yang lebih baik

Tiada penyelesaian di atas benar -benar sesuai dengan jangkaan saya untuk fleksibiliti dan kesederhanaan perpustakaan, jadi saya sekarang akan memperkenalkan pelaksanaan saya sendiri. Matlamatnya bukan untuk menulis pakej, tetapi untuk memberi anda idea bagaimana menulis pakej anda sendiri berdasarkan kes penggunaan anda.

Repositori penyelesaian contoh ini terletak di sini.

teori

Idea di sebalik ia agak mudah, walaupun akhirnya akan menghasilkan banyak kod. Ini adalah untuk menggariskan idea yang kita sedang berbincang.

Pelayan mesti membuat kod React dua kali, dan kami hanya akan menggunakan renderToString untuk ini. Kami mahu mengekalkan konteks antara penulisan pertama dan kedua. Dalam pemberian pertama kami, kami cuba menghapuskan sebarang panggilan API, janji, dan operasi tak segerak. Dalam render kedua kami, kami ingin mengambil semua data yang kami dapat dan meletakkannya kembali ke dalam konteks kami, menjadikan halaman kerja kami untuk diedarkan. Ini juga bermakna bahawa kod aplikasi perlu melakukan tindakan berdasarkan konteks (atau tidak melakukan operasi), seperti sama ada pada pelayan atau pada penyemak imbas, dan dalam mana -mana kes sama ada data sedang diambil.

Di samping itu, kita boleh menyesuaikannya seperti yang diperlukan. Dalam kes ini, kita menukar kod status dan header mengikut konteksnya.

rendering pertama

Dalam kod anda, anda perlu tahu sama ada anda sedang bekerja di pelayan atau pada penyemak imbas, idealnya anda ingin mempunyai kawalan kompleks ke atasnya. Dengan Router React anda boleh mendapatkan prop konteks statik, yang hebat, jadi kami akan menggunakannya. Pada masa ini, kami hanya menambah objek data dan meminta data, seperti yang telah kami pelajari dari seterusnya. API kami berbeza antara pelayan dan klien, jadi anda perlu menyediakan API pelayan yang lebih baik mempunyai antara muka yang sama dengan API klien anda:

ReactDOM.render(
  <provider> store={store}></provider>
    <browserrouter></browserrouter>
      <app></app>
    >
  >
, document.getElementById('root')
)

render kedua

Selepas rendering pertama, kami akan mendapat janji-janji yang belum selesai dan menunggu janji-janji ini selesai, kemudian membuat semula, mengemas kini konteks:

import React from 'react'
export default class extends React.Component {
  static async getInitialProps ({ req }) {
    return req
      ? { userAgent: req.headers['user-agent'] }
      : { userAgent: navigator.userAgent }
  }
  render () {
    return <div>
      Hello World {this.props.userAgent}
    </div>
  }
}

App

cepat melompat dari pelayan kami ke kod aplikasi: Dalam mana -mana komponen kami dengan sambungan penghala, kami boleh mendapatkannya sekarang:

// 1. 连接您的数据，类似于 react-redux @connect
@asyncConnect([{
  key: 'lunch',
  promise: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])
class App extends React.Component {
  render() {
    // 2. 将数据作为 props 访问
    const lunch = this.props.lunch
    return (
      <div>{lunch.name}</div>
    )
  }
}

Wow, terdapat banyak kod rumit. Pada peringkat ini, anda mungkin mahu mengambil pendekatan yang lebih disampaikan di mana anda memisahkan kod data ke dalam komponen lain.

Komponen ini terdiri daripada komponen yang mungkin anda kenal dengan - langkah -langkah rendering dan componentWillMount langkah -langkah. Empat peringkat jika kenyataan mengendalikan negeri-negeri yang berlainan-prefetch, postfetch, pra-render dan rendering back-end. Kami juga menambah data ke tajuk selepas dimuatkan.

Akhirnya, terdapat satu lagi langkah untuk mendapatkan data. Idealnya, API dan pangkalan data anda mempunyai API yang sama, yang menjadikan pelaksanaannya sama. Anda mungkin mahu meletakkan ini dalam tindakan di Thunk atau Saga untuk menjadikannya lebih berskala.

Lihat artikel "Server React Rendering" dan Repository React Server Rendering untuk maklumat lanjut. Ingat, anda masih perlu mengendalikan keadaan di mana data tidak dimuatkan! Anda hanya akan melakukan penyerahan sisi pelayan apabila memuat pertama, jadi anda akan memaparkan skrin pemuatan pada halaman berikutnya.

Tukar index.html untuk menambah data

kita perlu menghantar data prefetched sebagai sebahagian daripada permintaan halaman, jadi kami akan menambah tag skrip:

@asyncConnect([{
  lunch: ({ params, helpers }) => Promise.resolve({ id: 1, name: 'Borsch' })
}])

Perkhidmatan

maka kita perlu menambahkannya ke carian dan penggantian kita. Walau bagaimanapun, HTML menggunakan pencari tag skrip yang sangat asas, jadi jika anda mempunyai tag skrip, anda perlu asas-64 pengekodannya. Juga, jangan lupa label kepala kami!

const App = () => (
  <frontload>isServer</frontload>
    <component1> entityId='1' store={store}></component1>
  >
)

return frontloadServerRender(() => (
  render(<app></app>)
)).then((serverRenderedMarkup) => {
  console.log(serverRenderedMarkup)
})

kami juga mengendalikan perubahan kod status - contohnya, untuk 404 - jadi jika anda mempunyai halaman 404, anda boleh melakukan ini:

const context = {data: {}, head: [], req, api}
const store = configureStore()
renderToString(
  <provider> store={store}></provider>
    <staticrouter> location={req.url} context={context}>
      <app></app>
    >
  >
)

Ringkasan

Jika anda tidak pasti apa yang anda lakukan, gunakan Next.Js. Ia direka untuk aplikasi penyerahan dan universal pelayan, atau jika anda mahu fleksibiliti melakukan segala-galanya secara manual, anda boleh melakukannya dengan cara yang anda inginkan. Contohnya mungkin termasuk anda melakukan pengambilan data dalam komponen kanak -kanak dan bukannya di peringkat halaman.

Saya harap artikel ini dapat membantu anda memulakan! Jangan lupa untuk menyemak repositori GitHub untuk pelaksanaan yang berdaya maju.

FAQs (FAQs) mengenai API Asynchronous dan Rendering Side Rendering React

Apakah perbezaan antara rendering sisi pelayan dan penyiaran sisi klien dalam React?

Rendering-Side Rendering (SSR) dan Rendering Side Client (CSR) adalah dua cara yang berbeza untuk menjadikan laman web. Di SSR, pelayan menjana HTML penuh halaman sebagai tindak balas kepada permintaan dan kemudian menghantarnya kepada pelanggan. Ini menghasilkan masa beban halaman awal yang lebih cepat dan bermanfaat untuk SEO. Walau bagaimanapun, ini boleh menyebabkan penukaran halaman menjadi lebih perlahan, kerana keseluruhan halaman perlu diberikan dengan setiap permintaan. CSR, sebaliknya, bermakna bahawa rendering dilakukan dalam penyemak imbas menggunakan JavaScript. Ini menyebabkan masa pemuatan halaman awal melambatkan, tetapi penukaran halaman lebih cepat kerana hanya komponen yang diperlukan untuk diberikan semula.

bagaimana membuat permintaan pelayan dalam aplikasi React yang diberikan oleh pelanggan saya?

Untuk membuat permintaan sisi pelayan dalam aplikasi React yang diberikan oleh klien, anda boleh menggunakan perpustakaan seperti Fetch API atau AXIOS. Anda boleh membuat permintaan dalam kaedah kitaran componentDidMount atau dalam cangkuk useEffect apabila menggunakan komponen fungsi. Sambutan kemudiannya boleh ditetapkan untuk menyatakan dan digunakan dalam komponen anda.

Mengapa pembolehubah global saya dilaksanakan dua kali dalam React?

Ini mungkin disebabkan oleh cara mengemas kini keadaan batch. Jika anda mengemas kini pembolehubah global dalam komponen React, ia boleh dikemas kini dua kali kerana sifat tak segerak setState. Untuk mengelakkan ini, anda boleh menggunakan bentuk fungsi setState, yang memastikan bahawa kemas kini negeri berdasarkan keadaan sebelumnya, bukan keadaan semasa.

Bagaimana menggunakan API Asynchronous dalam Server-Side Rendered React?

Untuk menggunakan API asynchronous dalam reaksi yang diberikan oleh pelayan, anda boleh menggunakan sintaks async/await dalam kod sisi pelayan. Ini membolehkan anda menunggu tindak balas API sebelum membuat halaman. Anda boleh menggunakan perpustakaan seperti AXIOS untuk membuat permintaan API.

Apakah manfaat penyampaian sisi pelayan dalam React?

Rendering sisi pelayan mempunyai banyak manfaat dalam React. Ia meningkatkan masa pemuatan halaman awal, yang boleh membawa kepada pengalaman pengguna yang lebih baik. Ia juga meningkatkan SEO kerana crawler enjin carian boleh mengindeks kandungan yang diberikan oleh pelayan dengan lebih mudah. Di samping itu, ia membolehkan keadaan awal yang lebih konsisten, kerana kod yang sama berjalan pada kedua -dua pelayan dan klien.

Bagaimana menangani kesilapan apabila menggunakan API tak segerak dalam React yang diberikan pelayan?

anda boleh menggunakan blok try/catch untuk mengendalikan kesilapan dalam fungsi tak segerak. Ini membolehkan anda menangkap sebarang kesilapan yang berlaku semasa membuat permintaan API dan mengendalikannya dengan sewajarnya, seperti dengan memberikan mesej ralat.

Bolehkah saya menggunakan cangkuk dalam reaksi yang diberikan oleh pelayan?

Ya, anda boleh menggunakan cangkuk dalam reaksi yang diberikan pelayan. Walau bagaimanapun, ingat bahawa cangkuk hanya boleh digunakan dalam komponen fungsi, bukan dalam komponen kelas. Juga, beberapa cangkuk (mis. ) tidak akan berjalan di pelayan, jadi anda perlu memastikan kod anda dapat mengendalikan keadaan ini. useEffect

Bagaimana untuk meningkatkan prestasi aplikasi React yang diberikan oleh pelayan?

Terdapat banyak cara untuk meningkatkan prestasi aplikasi React untuk rendering pelayan. Anda boleh menggunakan segmentasi kod untuk memuatkan hanya kod yang diperlukan untuk setiap halaman. Anda juga boleh menggunakan cache untuk mengelakkan penanaman semula halaman yang tidak berubah. Di samping itu, mengoptimumkan kod sisi pelayan dapat membantu meningkatkan prestasi.

Bagaimana untuk menguji aplikasi React yang diberikan oleh pelayan saya?

Anda boleh menggunakan perpustakaan ujian seperti perpustakaan ujian JEST dan React untuk menguji aplikasi React yang diberikan oleh pelayan anda. Perpustakaan ini membolehkan anda mengasingkan komponen ujian dan pastikan ia memberi dengan betul.

Bolehkah saya menggunakan penyampaian pelayan dengan next.js?

Ya, Next.js adalah rangka kerja untuk React yang menyokong penyerahan sisi pelayan keluar dari kotak. Ia menyediakan API rendering sisi pelayan yang mudah, dan juga menyokong penjanaan tapak statik dan rendering klien.

Atas ialah kandungan terperinci Berurusan dengan API Asynchronous dalam React Server yang Diberikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!