मुझे सर्वर की तरफ से अपना रिएक्ट ऐप प्रस्तुत करना होगा। उसके लिए, मैं नेक्स्ट.जेएस फ्रेमवर्क का उपयोग कर रहा हूं। लेकिन मुझे दो मुद्दों का सामना करना पड़ रहा है।

सबसे पहले, मुझे गतिशील रूप से अपने ऐप की सेवा करने की ज़रूरत है। इसका मतलब है कि वर्तमान यूआरएल के अनुसार मेरे प्रतिक्रिया घटकों को प्रदर्शित करने के लिए मुझे सर्वर साइड राउटर की आवश्यकता है।

फिर, मुझे अपने घटकों को प्रस्तुत करने से पहले कुछ गतिशील डेटा लोड करने की आवश्यकता है। तो मुझे इन डेटा को नोड से मेरे प्रतिक्रिया घटक में पास करने की आवश्यकता है।

यह मेरी वर्तमान स्थिति है:

// In Node.js

app.get("/",function(req,res){

  return app.prepare()
    .then(() => handle(req, res))
    .catch(ex => {
      console.error(ex.stack)
      process.exit(1)
    })
})

//In React.js

import React from 'react'
export default class Index extends React.Component{
 
  render(){
    return(
      <div>
        <p>Hello Server Side Rendered React App from Google Cloud Front</p>
        
      </div>
    )
  }
}

तो मुझे क्या करना चाहिए ?

2
Jack 19 जून 2017, 01:04

1 उत्तर

सबसे बढ़िया उत्तर

यदि आप रिएक्ट के साथ नेक्स्टजे का उपयोग कर रहे हैं, तो आपको पेज बनाने के लिए रिएक्ट-राउटर की आवश्यकता नहीं है, आसान है, आपको इंडेक्स नामक घटक के साथ पेज नाम की एक निर्देशिका बनाने की आवश्यकता है, उनके पास नेविगेशन को प्रबंधित करने के लिए घटक हैं और इसी तरह।

गिटहब दस्तावेज़ों पर एक नज़र डालें, उन्होंने पहले से ही इन चरणों को वास्तव में अच्छी तरह से कवर किया है।

https://zeit.co/blog/next2

त्वरित उदाहरण:

// pages/index.js
import Link from 'next/link'
export default () => (
  <div>Click <Link href="/about"><a>here</a></Link> to read more</div>
)

// pages/about.js
export default () => (
  <p>Welcome to About!</p>
)
1
diegochavez 19 जून 2017, 02:53
धन्यवाद। मुझे नहीं पता था कि अगला अपना राउटर लेकर आ रहा है। तो मुझे लगता है कि यह चीजों को आसान बनाता है।
 – 
Jack
19 जून 2017, 19:08
@diegochavez, लेकिन लिंक का उपयोग नहीं करने से दूसरा पृष्ठ क्लाइंट-साइड प्रस्तुत करेगा, सर्वर-साइड नहीं? अगर हम हमेशा सर्वर साइड रेंडर करना चाहते हैं, तो हमें रेगुलर html टैग्स का इस्तेमाल करना चाहिए?
 – 
arieljake
5 मार्च 2018, 01:47