Bagaimana React/NextJS menangani perutean dan gambar jika jalurnya tidak berisi petunjuk tentang jenis data?

Saya sedang mengevaluasi dan mempelajari React dan NextJS untuk proyek masa depan, dan sejauh ini saya baru menyentuh permukaannya saja. Namun saya telah menemukan dua masalah potensial. Dan ketika bertanya kepada orang yang lebih berpengetahuan tentang React, mereka tidak bisa memberikan jawaban yang jelas.

Latar Belakang: Kami menggunakan CMS yang berisi data struktural (dikembalikan sebagai JSON) dan gambar (dikembalikan sebagai data biner). Dan data strukturalnya bisa bermacam-macam jenisnya, seperti artikel berita, artikel debat, artikel informasi perusahaan, dll.

Sekarang, tidak mungkin mendeteksi jenis data hanya dengan melihat URL. URL gambar tidak diakhiri dengan .jpg, dan URL artikel berita tidak dimulai dengan /news/, misalnya. Untuk keperluan pertanyaan ini, kita dapat berasumsi bahwa URL www.oursite.com/12345 dapat mewakili semua jenis ini (yaitu gambar, artikel debat, artikel berita, dll).

Ketika saya membaca tentang perutean dalam reaksi, semua contoh tampaknya berkisar pada kemampuan menggunakan awal jalur untuk mendeteksi komponen apa yang akan dirender. Tapi kita tidak bisa melakukan itu dalam kasus kita. Apakah ada cara untuk merutekan rendering berdasarkan respons json?

Juga, bagaimana cara kami menangani gambar? Jika URL www.oursite.com/12345 mewakili gambar, API CMS backend akan mengembalikan data biner mentah, dan data tersebut harus dikembalikan ke browser apa adanya.

Kami tidak dapat menambahkan parameter permintaan apa pun ke gambar, karena kami perlu menangani permintaan langsung ke gambar ini (misalnya, seseorang memiliki buletin lama yang disimpan sebagai file HTML di komputernya, dan itu merujuk pada www.oursite.com/12345 dalam tag img.

Salam
/Jimi


reactjs next.js react-router
person j5423951    schedule 04.12.2018    source sumber
comment
Oh, deskripsi yang panjang. Apakah layak untuk dibaca?   -  person Blasanka    schedule 04.12.2018
comment
@Blasanka Ringkasan cepat: Bagaimana cara merutekan secara ketat berdasarkan data json dari backend? Dan bagaimana cara menangani gambar jika kita tidak mengetahui bahwa itu adalah gambar sebelum kita mengambilnya dari backend?   -  person j5423951    schedule 04.12.2018

Jawaban (1)


arrow_upward
1
arrow_downward

Saya akan merekomendasikan menggunakan URL Bersih dengan fitur Route Masking di next.js.

Lets have a look at the following code block: 

const PostLink = (props) => (
  <li>
    <Link as={`/p/${props.id}`} href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

Dalam elemen tersebut, kita telah menggunakan prop lain yang disebut “as”. Itulah URL yang perlu kita tampilkan di browser. URL yang dilihat aplikasi Anda disebutkan di prop “href”.

Masking ini mungkin bisa membantu kasus Anda. Di as prop kita dapat menghubungkan data kita dengan url.

Untuk lebih jelasnya. Ikuti tautannya.

https://nextjs.org/learn/basics/clean-urls-with-route-masking

person Mustkeem K    schedule 01.02.2019
comment
Terima kasih! Kami akhirnya melakukan hal ini. Meskipun itu hanya menyelesaikan masalah pada klien. Saya lupa menyebutkan SSR dalam pertanyaan saya, tetapi kami juga menemukan solusinya. Server nextjs khusus, yang mengambil data json dan menganalisisnya untuk menentukan halaman mana yang akan dirender. - person j5423951; 12.02.2019
comment
Satu-satunya masalah yang kita alami dengan pendekatan itu adalah kita perlu memiliki daftar pola url jelek yang harus kita abaikan (seperti /_next/*, /static/*, /babel/* dll), karena tidak ada pola yang cocok dengan semua URL yang harus diambil dari backend yang juga tidak cocok dengan URL yang harus diabaikan. Ini akan menjadi solusi yang lebih bersih jika kita membiarkan next menangani permintaan tersebut terlebih dahulu, dan hanya jika gagal menemukan file/halaman/dll, maka middleware kita dapat mengambil alih. Tapi saya belum menemukan cara untuk melakukan itu... - person j5423951; 12.02.2019
comment
@ j5423951 ingin melihat contohnya. Saya memiliki masalah yang sama - person garrettmac; 22.11.2019