Feliz: डॉटनेट सर्वर से एसएसआर कोड चलाने में सहायता

मुझे इसे तोड़ने की कोशिश करने दो।

सबसे पहले, लाइब्रेरी के दृष्टिकोण से सर्वर-साइड रेंडरिंग क्या है? यह केवल प्रारंभिक रेंडर पर सीधे सर्वर से Html को रेंडर करने की क्षमता रखता है और इसके साथ अपने आंतरिक वर्चुअल-डोम को हाइड्रेट करने के लिए Html को रिएक्ट करने की क्षमता रखता है। दूसरे शब्दों में, एचटीएमएल से आपके एप्लिकेशन का वर्चुअल-डोम बनाना जो सर्वर पर प्रस्तुत किया गया था और क्लाइंट को परोसा गया था। यह वेब क्रॉलर को आपके क्लाइंट-साइड जावास्क्रिप्ट को निष्पादित करने से पहले सर्वर से लौटाए गए एचटीएमएल को संसाधित करने की अनुमति देता है।

तो यह SSR मामला वास्तव में सर्वर / बैकएंड से Feliz को चलाने में सक्षम होने के बारे में है:

// Server-side code
let initialState, unusedCommand = Shared.init()
let dispatch msg = ignore()
let userInterface : ReactElement = Shared.render initialState dispatch
let staticHtml : string = ReactDOM.renderToStaticMarkup userInterface 

नोड.जेएस पर पहले से ही समर्थित

क्या फेलिज एसएसआर के लिए इस कोड को चलाने का समर्थन करता है? हां, यह पहले से ही है, लेकिन केवल तभी जब आप नोड.जेएस सर्वर से कोड चलाते हैं, डॉटनेट से नहीं। इसका मतलब है कि आप अभी Feliz का उपयोग स्थिर वेबसाइट बनाने के लिए कर सकते हैं और Gatsby या Next.js जैसे आधुनिक टूल का उपयोग नहीं कर

फिर Fable.React एक डॉटनेट सर्वर पर कैसे चल सकता है? ऐसा इसलिए है क्योंकि वह पुस्तकालय संकलक निर्देशों का उपयोग करता है जैसे कि जब इसे डॉटनेट का उपयोग करके संकलित किया जाता है, तो यह Fable/React वाले के बजाय डॉटनेट एपीआई का उपयोग करके एचटीएमएल प्रस्तुत करेगा। यह एक ही सार्वजनिक एपीआई है लेकिन यह Fable या dotnet का उपयोग करके संकलित किया गया है या नहीं, इस पर निर्भर करता है कि यह अलग-अलग कोड निष्पादित करता है।

इसका मतलब यह है कि वास्तव में मुद्दा यह है कि डॉटनेट से एसएसआर का समर्थन करने के लिए फेलिज को

क्या हम Fable.React के समान कुछ करते हैं? ठीक है, यदि आप आंतरिक कोड को देखते हैं, तो यह सभी जगह सभी कंपाइलर निर्देशों के साथ एक बड़ी गड़बड़ी है। मैं इसके बिल्कुल खिलाफ हूं और कुछ रिएक्ट एपीआई की सीमाओं पर विचार किए बिना पुस्तकालय को शुद्ध रिएक्ट बाइंडिंग के रूप में विकसित करूंगा जो डॉटनेट एपीआई का उपयोग करके "अच्छी तरह से अनुवाद" नहीं करेगा।

फ़ेलिज़ दर्ज करें। सर्वर

मैं इस समस्या के समाधान का प्रस्ताव करता हूं जो फ़ेलिज़ के रास्ते में नहीं खड़ा होगा और अभी भी डॉटनेट से उपयोग करने के लिए काफी अच्छा होगा: एक ही सार्वजनिक एपीआई के साथ Feliz.Server नामक एक अलग पुस्तकालय बनाएं जब यह आता है फेलिज के रूप में एचटीएमएल/स्टाइल/प्रोप एपीआई और रिएक्ट घटक/हुक जो आंतरिक रूप से एचटीएमएल उत्पन्न करने के लिए डॉटनेट का उपयोग करते हैं।

उपभोक्ता के दृष्टिकोण से, आप इस कोड को डॉटनेट में लिखते हैं:

#if FABLE_COMPILER
open Feliz
#else
open Feliz.Server
#endif 

let initialState, unusedCommand = Shared.init()
let dispatch msg = ignore()
let userInterface : ReactElement = Shared.render initialState dispatch
let staticHtml : string = ReactDOM.renderToStaticMarkup userInterface 

उपरोक्त स्निपेट में, फ़ंक्शन Shared.render Shared.init क्लाइंट और सर्वर के बीच साझा किए जाते हैं।

Feliz.Server कब उपलब्ध होगा?

जब कोई कदम बढ़ाता है और इसे बनाता है। यह निश्चित रूप से रोड मैप पर है लेकिन प्राथमिकता नहीं है और मैं इसे स्वयं कर सकता हूं, लेकिन मुझे डर है कि जल्द ही किसी भी समय नहीं होगा क्योंकि मेरे पास कई परियोजनाएं प्रगति पर हैं (उदाहरण के लिए Feliz.AntDesign , इसे देखें) और इसके बजाय फ़ेलिज़ पर ध्यान केंद्रित करेंगे स्वयं और इसके पारिस्थितिकी तंत्र को विकसित करना।

कोई एसएसआर नहीं =/= कोई खोज योग्यता नहीं

जैसा कि मैं इसे समझता हूं, एसएसआर किसी भी प्रकार की एसईओ/खोज योग्यता प्राप्त करने के लिए जरूरी है।

AFAIK आधुनिक वेब क्रॉलर/इंडेक्सर्स आपकी वेबसाइट पर सामग्री के प्रदर्शित होने की खुशी से प्रतीक्षा करेंगे, भले ही यह प्रारंभिक रेंडर पर उपलब्ध न हो (और डेटा पुनर्प्राप्त होने के बाद इसे प्रस्तुत करने की आवश्यकता हो)। Google का Googlebot पृष्ठ की सामग्री को देखने और उसमें शामिल लिंक के माध्यम से जाने के लिए एक हेडलेस ब्राउज़र का उपयोग करता है, पढ़ें https://vuejsdevelopers.com/2018/04/09/single-page-app-seo/

विस्तृत विश्लेषण के लिए धन्यवाद! मैं अब बहुत बेहतर समझता हूं।

तब मुझे नहीं लगता कि यह कोई गंभीर मुद्दा है। SSR समर्थित है, बस .NET सर्वर पर नहीं, और SSR को वैसे भी खोजने की क्षमता की आवश्यकता नहीं है।

बेझिझक बंद करें या खुला छोड़ दें।

@cmeeren मैंने वास्तविक समस्या को दर्शाने के लिए इस मुद्दे का नाम बदल दिया है, लेकिन मैं इसे खुला रखूंगा क्योंकि मेरा मानना ​​​​है कि Feliz.Server (शायद Feliz.Dotnet?) जैसा पैकेज सर्वर-साइड एचटीएमएल लिखने के लिए वास्तव में अच्छा हो सकता है उसी का उपयोग करना सिंटैक्स हमारे पास फेलिज़ के साथ है, भले ही इसका उपयोग SSR समाधान के लिए नहीं किया गया हो

@ जैद-अजाज, इस महान पुस्तकालय के लिए बहुत बहुत धन्यवाद! मैंने इसके साथ खेलने की कोशिश की और यह वास्तव में आश्चर्यजनक लगता है। केवल एक चीज जो हमें उत्पादन में इसका उपयोग करने से रोकती है, वह है डॉटनेट पर एसएसआर की कमी। यह बहुत दुर्भाग्यपूर्ण है। Feliz.Dotnet पुस्तकालय के निर्माण पर आपका क्या अनुमान है? यह कितना कठिन होगा?

हैलो मिखाइल, मुझे यह सुनकर वास्तव में खुशी हुई कि फेलिज ने यह छाप छोड़ी है कि यह :मुस्कान के लिए बनाया गया था:

Feliz.Dotnet पुस्तकालय के निर्माण पर आपका क्या अनुमान है?

हालांकि यह रोड मैप पर है, दुर्भाग्य से मेरे पास कोई ठोस समयरेखा नहीं है कि मैं कब कार्यान्वयन पर काम करना शुरू करूंगा। मैं यह नहीं कहूंगा कि इसे बनाना मुश्किल है क्योंकि यह एक स्टैंडअलोन लाइब्रेरी होगी जिसमें फ़ेलिज़ के समान सटीक सार्वजनिक एपीआई होने की एकमात्र आवश्यकता होगी लेकिन यह थोड़ा मुश्किल हो सकता है और यह सुनिश्चित करने के लिए एक परीक्षण परियोजना स्थापित करने की आवश्यकता है संकलन काम करता है और आउटपुट सही है।

एक जटिलता बिंदु रिएक्ट स्टेटफुल घटकों और हुक के साथ काम कर सकता है और उन्हें डॉटनेट के दृष्टिकोण से संगत बना सकता है, लेकिन इसके लिए मैं यह देखूंगा कि एसएसआर में रिएक्ट क्या करता है और उस व्यवहार का अनुकरण करता है।

हालांकि कुछ विकल्प हैं:

• चूंकि फ़ेलिज़ Fable.React पर निर्भर करता है, आप बस Fable पर वापस आ सकते हैं। SSR के लिए उपयोग किए गए आपके एप्लिकेशन के साझा UI भागों को लिखने के लिए प्रतिक्रिया करें और शेष फ्रंट-एंड को Feliz के सिंटैक्स में लिखा जा सकता है
• Feliz.Dotnet के विकास में मेरी मदद करें और प्रोजेक्ट को किक-स्टार्ट करें लेकिन हो सकता है कि वह बहुत अधिक पूछ रहा हो

मुझे लगता है कि प्रतिपादन बहुत कठिन नहीं होना चाहिए, जो मैंने हमेशा सोचा है कि सर्वर साइड क्लाइंट साइड ऐप में सामान "हुक" कैसे प्रस्तुत करता है। मेरा मतलब है, यदि आपके पास पहले से ही प्रारंभिक दृश्य है तो ग्राहक को इसे पहचानने की आवश्यकता है। साथ ही, प्रारंभिक दृश्य होने का मतलब यह नहीं है कि प्रारंभिक स्थिति भी है और यह ग्राहक को कैसे स्थानांतरित किया जाता है? प्रारंभिक अवस्था वाले कुछ छिपे हुए तत्व को वापस करके यह संभव होना चाहिए, लेकिन क्या यह अनसुना है?

@mastoj मैं reactroot जैसी प्रतिक्रिया के लिए विशेष जानकारी जोड़ रहे हैं। स्रोत

और वास्तव में आपको एल्मिश के प्रारंभ के लिए अपने आवेदन की प्रारंभिक स्थिति को पारित करने की आवश्यकता है। सुरक्षित स्टैक राज्य को वैश्विक चर __INIT_MODEL__ में क्रमबद्ध करके करता है।

फिर अपने एल्मिश इनिट फ़ंक्शन में, आप जांचते हैं कि क्या आपके पास __INIT_MODEL__ चर में संग्रहीत प्रारंभिक स्थिति है या नहीं।

मुझे जो याद है, अगर प्रतिक्रिया मौजूदा डोम से वर्चुअलडॉम उत्पन्न करने में सक्षम है, अगर उसने अभी तक इसे प्रारंभ नहीं किया है।

जिराफ़ के साथ फ़ेलिज़ का उपयोग करने के लिए https://github.com/dbrattli/Feliz.Giraffe पर पहला छुरा। वर्तमान में Feliz या Fable.React पर कोई निर्भरता नहीं है। रिएक्ट शैली से संपत्ति का नाम बदलने और उन्नत शैलियों की आवश्यकता के साथ कुछ और काम, लेकिन बुनियादी कार्यक्षमता काम कर रही है।

कमाल है @dbrattli! ऐसा लगता है कि अब इसकी आवश्यकता नहीं हो सकती है, लेकिन क्या Html और Styles जैसी फाइलों पर एक पैकेट जीथब निर्भरता और इंटरऑप कॉल को छाया देना आपके लिए आसान बना देगा?

शायद अभी के लिए डुप्लिकेट करना सबसे अच्छा है। सही अमूर्तता खोजने में कुछ समय लगेगा। Properties.fs और Styles.fs काफी बदलाव होंगे क्योंकि रिएक्ट का चीजों के नामकरण का अपना तरीका है। मैंने जिराफ निर्भरता को भी हटा दिया है, ताकि आप इसे Fable के साथ भी उपयोग कर सकें उदाहरण के लिए ईमेल पीढ़ी। यह चीजों को थोड़ा और अधिक भ्रमित करने वाला बनाता है जिसमें दोहराव और अलग नामस्थान होते हैं। ऐसे पुस्तकालय का शुभ नाम क्या हो सकता है?

• फेलिज। जिराफ, अब जिराफ पर हमारी निर्भरता नहीं है
• Feliz.StaticHtml, जनरेट किया गया रनटाइम, इसलिए स्थिर नहीं
• Feliz.Server, क्लाइंट साइड का भी उपयोग किया जा सकता है जैसे ईमेल जनरेशन के लिए
• Feliz.HtmlView, का उपयोग XML उत्पन्न करने के लिए भी किया जा सकता है
• Feliz.Markup, HTML और XML जेनरेट कर सकता है।
• Feliz.ViewEngine, Giraffe/Suave ViewEngine.fs से कोड उधार लेता है

तुम क्या सोचते हो? @ जैद-अजाजू

मुझे व्यक्तिगत रूप से व्यूइंजिन पसंद है।

धन्यवाद। मैंने इसका नाम बदलकर ViewEngine कर दिया, यह देखने के लिए कि यह कैसा दिखता है और कुछ दिनों के बाद महसूस होता है। अभी और फिर संपत्ति और शैली के मुद्दों को ठीक करेगा और यह सुनिश्चित करने के लिए अधिक यूनिट-परीक्षण भी जोड़ेंगे कि रेंडर इंजन अपेक्षित रूप से काम करता है।

• https://github.com/dbrattli/Feliz.ViewEngine
• https://www.nuget.org/packages/Feliz.ViewEngine/

बहुत बहुत धन्यवाद @dbrattli ! महान काम! उल्लेख करने के लिए एक बात लापता हुक है। मेरा मानना ​​​​है कि यदि उनका उपयोग किया जाता है तो कोड संकलित नहीं होगा।

हाँ, यह सही है @mvsmal । मैंने पहले ही React.functionComponent जोड़ लिया है और जैसे-जैसे हम v1 की ओर बढ़ेंगे, मैं और जोड़ूंगा।

सभी को नमस्कार, ViewEngine पर बढ़िया काम @dbrattli! इसका उपयोग करना और यह बहुत अच्छा काम करता है।
मैं पूरी तरह से स्थिर वेबसाइटों के लिए फ़ेलिज़ एसएसआर टेम्पलेट पर काम कर रहा हूं, सीधे एज़ूर फ़ंक्शंस और स्टोरेज के साथ होस्ट करने के लिए, इसलिए मैं एसएसआर के साथ फ़ेलिज़ का उपयोग करने की विचित्रताओं के माध्यम से काम कर रहा हूं।

यह वास्तव में बहुत अच्छा चल रहा है! कुछ चीजें जोड़ने की जरूरत है:

• इसे आसान बनाने के लिए, मैं एक Feliz.Isomorphic पैकेज कर रहा हूं, जिसमें "पॉलीमॉर्फिक" प्रकार के उपनाम होंगे, चाहे आप फैबल कंपाइलर हों। मैं इसे अभी मैन्युअल रूप से कर रहा हूं, और शायद सिरदर्द को कम करने के लिए सभी को इसकी आवश्यकता होगी। असेंबली से प्रतिबिंब के माध्यम से उपनाम उत्पन्न होंगे।

• (यह Feliz.ViewEngine के लिए है); हमें रिएक्ट प्रकार पर विधियों के डमी कार्यान्वयन को जोड़ने की आवश्यकता होगी ताकि यह सर्वर साइड पर संकलित (और कुछ नहीं) कर सके। मैंने अपने टेम्प्लेट पर शुरुआत की और अगर सहमति हुई तो मैं Feliz.ViewEngine को आगे बढ़ाऊंगा।

सभी कड़ी मेहनत के लिए फिर से धन्यवाद!

हां, Feliz.ViewEngine के लिए हमें ReactElement, ईवेंट्स के लिए और अधिक डमी कार्यान्वयन की आवश्यकता है ... मैं एक SSR उदाहरण भी कर रहा हूं और हर दिन मुद्दों में भाग लेता हूं। कृपया पीआर जोड़ने के लिए स्वतंत्र महसूस करें। बीटीडब्ल्यू, Feliz.Isomorphic पैकेज कैसे मदद करेगा? वर्तमान में मैं प्रत्येक फ़ाइल में #if का उपयोग कर रहा हूं, और मैं चीजों को आसान बनाने के लिए नेमस्पेस मैच फेलिज का नाम बदलने का लुत्फ उठा रहा हूं, लेकिन इससे व्यूइंजिन का उपयोग करना मुश्किल हो जाएगा उदाहरण के लिए Fable के भीतर ईमेल उत्पन्न करना। सुनिश्चित नहीं है कि Fable के भीतर ViewEngine का उपयोग करना ऐसा कुछ है जो कोई भी करेगा जैसा कि आप सर्वर से हमेशा अपने लिए HTML उत्पन्न करने के लिए कह सकते हैं।

#if FABLE_COMPILER
open Feliz
open Feliz.Bulma
#else
open Feliz.ViewEngine
open Feliz.Bulma.ViewEngine
#endif

आइसोमोर्फिक पैकेज इसे ऐसा बना देगा, आपकी साझा परियोजनाओं में, आपको केवल उसे खोलने की आवश्यकता होगी, और अतिरिक्त उपनामों के कारण आपको प्रत्येक फ़ाइल में कंपाइलर चेक नहीं करना पड़ेगा।

उदाहरण समरूपता:

namespace Feliz.Isomorphic

#if FABLE_COMPILER
open Feliz
open Feliz.Bulma

type Html = Feliz.Html

#else
open Feliz.ViewEngine
open Feliz.Bulma.ViewEngine

type Html = Feliz.ViewEngine.Html
#endif

फिर, साझा की गई फ़ाइलों में, बस Feliz.Isomorphic खोलें और अब आपको कंपाइलर जाँच की आवश्यकता नहीं है। इस सप्ताह किया जाना चाहिए।

मैं व्यूइंजिन में आइसोमोर्फिक प्रोजेक्ट कर सकता हूं, या मैं अपना खुद का रेपो होस्ट कर सकता हूं। सुनिश्चित नहीं है कि कौन सा सबसे अच्छा होगा, मैं इसे अपने पैकेज में रखने की सोच रहा था, क्योंकि इसकी अपनी निर्माण प्रक्रिया है और यदि हम अन्य परियोजनाओं से प्रकार के उपनामों का समर्थन करना चाहते हैं तो इसे अधिक बार अपडेट करना पड़ सकता है।

तुम क्या सोचते हो?

बहुत अच्छा लगता है! इसे आजमाने के लिए आगे देख रहे हैं। शायद एक अलग रेपो का उपयोग करना सबसे अच्छा है। मैंने Feliz.Bulma.ViewEngine को Feliz.ViewEngine के लिए प्रतिबद्ध किया है, लेकिन अब मैं इसे Feliz.ViewEngine की तरह ही रिलीज़ नहीं कर सकता जो कि केवल एक टैग को धक्का देकर प्रकाशित किया जाता है, और मैं नहीं चाहता कि उनके पास समान रिलीज़ संस्करण हों। शायद Feliz.Bulma.ViewEngine को एक अलग रेपो में स्थानांतरित कर देगा, इसे और अधिक आसानी से प्रकाशित कर सकता है।

हाय @dbrattli , बस Feliz.Isomorphic nuget के पहले संस्करण को धक्का दिया। मूल रूप से मैंने नामस्थानों को मैप किया Feliz.X.Y -> Feliz.Isomorphic.Feliz.X.Y । ऐसा लगता है कि अभी के लिए काफी शालीनता से काम कर रहा है। यहाँ रेपो है: https://github.com/bengobeil/feliz.isomorphic। एक नया Feliz पुस्तकालय जोड़ने के लिए शीघ्र ही कुछ दस्तावेज़ जोड़ेंगे, अभी के लिए मेरे पास Feliz और Feliz.Bulma कॉन्फ़िगर किया गया है।

मुझे बताना यह कैसा गया!

संपादित करें: मैंने थोड़ा और परीक्षण किया। यह केवल एक स्थिर पुस्तकालय के रूप में काम करता है। एक बार जब मैं इसके बारे में सोचता हूं तो बहुत स्पष्ट होता है। NuGet को अनदेखा करें, समाधान में Feliz.Isomorphic प्रोजेक्ट जोड़ें, और यह काम करता है।