React/NextJS จะจัดการการกำหนดเส้นทางและรูปภาพได้อย่างไรหากเส้นทางไม่มีเบาะแสเกี่ยวกับประเภทของข้อมูล

ฉันกำลังประเมินและเรียนรู้ React และ NextJS สำหรับโปรเจ็กต์ในอนาคต และจนถึงขณะนี้เพิ่งเริ่มต้นเท่านั้น แต่ฉันเจอปัญหาที่อาจเกิดขึ้นสองประการแล้ว และเมื่อถามคนที่มีความรู้มากกว่าใน React พวกเขาก็ไม่สามารถให้คำตอบที่ชัดเจนได้

ความเป็นมา: เราใช้ CMS ที่มีทั้งข้อมูลโครงสร้าง (ส่งคืนเป็น JSON) และรูปภาพ (ส่งคืนเป็นข้อมูลไบนารี) และข้อมูลเชิงโครงสร้างสามารถมีได้หลายประเภท เช่น บทความข่าว บทความอภิปราย บทความข้อมูลบริษัท เป็นต้น

ขณะนี้ เป็นไปไม่ได้ที่จะตรวจพบว่าเป็นข้อมูลประเภทใดโดยเพียงแค่ดูที่ URL URL รูปภาพไม่ได้ลงท้ายด้วย .jpg และ URL ของบทความข่าวไม่ได้ขึ้นต้นด้วย /news/ เป็นต้น เพื่อวัตถุประสงค์ของคำถามนี้ เราสามารถสันนิษฐานได้ว่า URL www.oursite.com/12345 สามารถเป็นตัวแทนประเภทใดก็ได้เหล่านี้ (เช่น รูปภาพ บทความอภิปราย บทความข่าว ฯลฯ)

เมื่อฉันอ่านเกี่ยวกับการกำหนดเส้นทางในการตอบสนอง ดูเหมือนว่าตัวอย่างทั้งหมดจะเกี่ยวกับความสามารถในการใช้จุดเริ่มต้นของเส้นทางเพื่อตรวจจับองค์ประกอบที่จะเรนเดอร์ แต่เราไม่สามารถทำอย่างนั้นได้ในกรณีของเรา มีวิธีใดในการกำหนดเส้นทางการเรนเดอร์ตามการตอบสนองของ json หรือไม่

นอกจากนี้ เราควรจัดการกับรูปภาพอย่างไร หาก URL www.oursite.com/12345 เกิดขึ้นเพื่อแสดงรูปภาพ CMS API แบ็กเอนด์จะส่งคืนข้อมูลไบนารีดิบ และควรส่งคืนไปที่ เบราว์เซอร์เหมือนเดิม

เราไม่สามารถเพิ่มพารามิเตอร์คำขอใดๆ ต่อท้ายรูปภาพได้ เนื่องจากเราจำเป็นต้องจัดการคำขอโดยตรงไปยังรูปภาพเหล่านี้ (เช่น มีคนมีจดหมายข่าวเก่าที่บันทึกเป็นไฟล์ HTML บนคอมพิวเตอร์ของเขา และ โดยอ้างอิงถึง www.oursite.com/12345 ในแท็ก img

ขอแสดงความนับถือ
/จิมิ


reactjs next.js react-router
person j5423951    schedule 04.12.2018    source แหล่งที่มา
comment
โอ้ ยาวมาก มันคุ้มค่าที่จะอ่านหรือไม่?   -  person Blasanka    schedule 04.12.2018
comment
@Blasanka สรุปโดยย่อ: วิธีกำหนดเส้นทางอย่างเคร่งครัดตามข้อมูล json จากแบ็กเอนด์ และจะจัดการรูปภาพอย่างไรถ้าเราไม่รู้ว่าเป็นรูปภาพก่อนที่เราจะดึงมาจากแบ็กเอนด์?   -  person j5423951    schedule 04.12.2018

คำตอบ (1)


arrow_upward
1
arrow_downward

ฉันอยากจะแนะนำให้ใช้ Clean URL พร้อมฟีเจอร์ Route Masking ของ 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>
)

ในองค์ประกอบนั้น เราได้ใช้เสาอีกอันที่เรียกว่า “as” นั่นคือ URL ที่เราต้องแสดงบนเบราว์เซอร์ URL ที่แอปของคุณเห็นมีการกล่าวถึงใน "href"

การปิดบังนี้อาจช่วยได้ในกรณีของคุณ ใน as prop เราสามารถมีข้อมูลที่เกี่ยวข้องกับ url

สำหรับรายละเอียดเพิ่มเติม ตามลิงค์ครับ

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

person Mustkeem K    schedule 01.02.2019
comment
ขอบคุณ! เราลงเอยด้วยการทำสิ่งนี้จริงๆ แม้ว่ามันจะแก้ไขสิ่งต่าง ๆ บนไคลเอนต์เท่านั้น ฉันลืมพูดถึง SSR ในคำถามของฉัน แต่เราก็พบวิธีแก้ปัญหาเช่นกัน เซิร์ฟเวอร์ Nextjs ที่กำหนดเอง ซึ่งจะดึงข้อมูล JSON และวิเคราะห์เพื่อพิจารณาว่าจะแสดงผลหน้าใด - person j5423951; 12.02.2019
comment
ปัญหาเดียวที่เรากำลังประสบกับแนวทางนั้นคือเราจำเป็นต้องมีรายการรูปแบบ URL ที่ยกเว้นที่น่าเกลียดซึ่งเราควรเพิกเฉย (เช่น /_next/*, /static/*, /babel/* ฯลฯ) เนื่องจากไม่มี รูปแบบที่ตรงกับ URL ทั้งหมดที่ควรดึงมาจากแบ็กเอนด์ที่ไม่ตรงกับ URL ที่ควรละเว้น มันจะเป็นโซลูชั่นที่สะอาดกว่าหากเราสามารถปล่อยให้ถัดไปจัดการคำขอก่อน และเฉพาะในกรณีที่ไม่พบไฟล์/เพจ/อื่นๆ ใด ๆ มิดเดิลแวร์ของเราก็สามารถเข้ามาแทนที่ได้ แต่ฉันยังไม่พบวิธีที่จะทำเช่นนั้น ... - person j5423951; 12.02.2019
comment
@ j5423951 อยากเห็นตัวอย่าง ผมมีปัญหาเดียวกัน - person garrettmac; 22.11.2019