export async function getStaticProps(context) {
  return {
    // Unlike `getInitialProps` the props are returned under a props key
    // The reasoning behind this is that there's potentially more options
    // that will be introduced in the future.
    // For example to allow you to further control behavior per-page.
    props: {}
  };
}

मुझे यह देखने में दिलचस्पी है कि किस परिस्थिति में हमें props निहित डेटा के अलावा अतिरिक्त डेटा वापस करने की आवश्यकता होगी। मुझे इन-लाइन स्पष्टीकरण "प्रति पृष्ठ व्यवहार को और नियंत्रित करने के लिए" थोड़ा अस्पष्ट मिला।

बहुत दिलचस्प लग रहा है! क्या उसका प्रतिस्थापन getInitialProps या साथ में होगा? उदाहरण के लिए, हमारे उपयोग के मामले में, डेटा लाने वाला एपीआई एक सार्वजनिक सेवा है। इसलिए क्लाइंट साइड नेविगेशन पर, हम क्लाइंट से सीधे एपीआई लेयर को कॉल करने की अपेक्षा करते हैं, जबकि SSR पर सर्वर इसे कॉल करता है। आगे जाकर, क्या इस उपयोग के मामले को पूर्व विधि द्वारा हल किया जाना जारी रहेगा?

मुझे यह देखने में दिलचस्पी है कि किस परिस्थिति में हमें props भीतर शामिल किए जा सकने वाले डेटा के अलावा अतिरिक्त डेटा वापस करने की आवश्यकता होगी। मुझे इन-लाइन स्पष्टीकरण "प्रति पृष्ठ व्यवहार को और नियंत्रित करने के लिए" थोड़ा अस्पष्ट मिला।

यह भविष्य में प्रूफिंग के तरीके के बारे में अधिक है ताकि यह हमें जरूरत पड़ने पर इसे बाद में विस्तारित करने की अनुमति दे।

बहुत दिलचस्प लग रहा है! क्या उसका प्रतिस्थापन getInitialProps या साथ में होगा? उदाहरण के लिए, हमारे उपयोग के मामले में, डेटा लाने वाला एपीआई एक सार्वजनिक सेवा है। इसलिए क्लाइंट साइड नेविगेशन पर, हम क्लाइंट से सीधे एपीआई लेयर को कॉल करने की अपेक्षा करते हैं, जबकि SSR पर सर्वर इसे कॉल करता है। आगे जाकर, क्या इस उपयोग के मामले को पूर्व विधि द्वारा हल किया जाना जारी रहेगा?

सामान्य तौर पर उस व्यवहार में कुछ कमियां होती हैं, उदाहरण के लिए जलप्रपात प्राप्त करना जो दुनिया भर के कुछ क्षेत्रों से धीमा हो सकता है। getServerProps दृष्टिकोण प्रतिक्रिया को अधिक कुशलता से कैशिंग करने की अनुमति देता है।

यह वाकई दिलचस्प लग रहा है! अच्छा विचार!

हालांकि मुझे तैनाती के बारे में चिंता है ...

आइए कल्पना करें कि मैं अभी की मेजबानी कर रहा हूं।
पहली परिनियोजन के लिए, यह स्पष्ट है कि संपूर्ण अनुप्रयोग परिनियोजन पर निर्मित होते हैं।

फिर, मैं सीएमएस में कुछ सामग्री बदलता हूं और केवल एसएसजी पृष्ठों के पुनर्निर्माण को ट्रिगर करना चाहता हूं, लेकिन एप्लिकेशन कोड नहीं बदला है।

तुरंत अलार्म बंद हो जाता है, इस मामले में अगर मैं बिल्ड को ट्रिगर करता हूं, तो दो संभावित समाधान हैं:

1) कुछ भी नहीं बनाया जाता है, क्योंकि सब कुछ कैश किया जाता है - कोई कोड नहीं बदला है और ब्लैब्ला।
2) मैं इसे --force करता हूं, और अब "सब कुछ" फिर से बनाया जाता है, लेकिन मुझे केवल एसएसजी पृष्ठों को फिर से बनाने की आवश्यकता है।

_ये केवल परिकल्पनाएं हैं, क्योंकि यह स्वयं बिल्ड सिस्टम पर निर्भर करता है - वे नेक्स्ट के बारे में कितने जागरूक हैं_

यह शायद किसी अन्य होस्टिंग समाधान को प्रभावित करेगा।

इसके बाद में ही .next/cache ... यह उसके आसपास कैसे चलेगा?

@joltmode जो मूल रूप से वर्तमान में प्रत्येक स्थिर साइट जनरेटर के मामले में है। .next/cache अभी पर परिनियोजन और पुन: उपयोग के बीच संरक्षित है। ध्यान रखें कि आप वर्तमान में कैशिंग (संभावित रूप से https://zeit.co/blog/serverless-pre-rendering) के साथ इस मामले के लिए getInitialProps का उपयोग कर रहे हैं, जो गतिशील रूप से सर्वर रहित फ़ंक्शन में प्रस्तुत करता है और फिर हमारे सीडीएन पर कैश करता है, यह व्यवहार अभी भी पूरी तरह से ठीक है और यदि आप getServerProps उपयोग करते हैं तो यह काम करना जारी रखेगा।

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

एक बात पर विचार करना है getStaticProps और getServerProps का नामकरण, यदि वे भविष्य में {props} और संभावित अन्य विकल्प लौटाते हैं, तो क्या *Props भ्रमित नहीं होगा? शायद getStaticConfiguration, getStaticSetup, getStaticOptions अधिक सामान्य होंगे?

@kibs वापसी मान हमेशा इस बात से संबंधित होंगे कि प्रोप को कैसे संभाला जाता है। तो नामकरण ठीक है इमो।

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

मैं पिछले getInitialProps() और exportPathMap() से बेहतर होने के नए तरीकों से भी संबंधित हो सकता हूं, जो मुझे पहली बार में थोड़ा भ्रमित करने वाला लग रहा था जब मैंने Next.js का उपयोग करना शुरू किया और SSR / SSG में खुदाई की। प्रति पृष्ठ दृष्टिकोण मुझे भी अधिक समझ में आता है।

इसे आजमाने के लिए इंतजार नहीं कर सकता!

बस एक साइड नोट: पिछले उदाहरण में मुझे लगता है कि getServerProps() में context परम नहीं है।

बस एक साइड नोट: आखिरी उदाहरण में मुझे लगता है कि getServerProps() में एक संदर्भ परम गुम है।

फिक्स्ड!

यह बहुत अच्छा लगता है! मुझे टाइपस्क्रिप्ट उपयोगकर्ता के दृष्टिकोण से आश्चर्य होता है यदि getStaticProps , getStaticPaths और getServerProps पृष्ठ घटक पर स्थिर तरीकों के रूप में (जैसे getInitialProps इस समय) होगा सही ढंग से टाइप/उपयोग करना आसान हो।

const Page: NextPage<Props> = (props) => ...

// Explicit types needed here
export const getStaticPaths: NextGetStaticPaths<Params> = () => ...
export const getStaticProps: NextGetStaticProps<Props, Params> = (context) => ...
export const getServerProps: NextGetServerProps<Props> = (context) => ...

export default Page

// vs.

const Page: NextPage<Props, Params> = (props) => ...

// Static method types come from NextPage<Props, Params>
Page.getStaticPaths = () => ...
Page.getStaticProps = (context) => ...
Page.getServerProps = (context) => ..

export default Page

@herrstucki उस दृष्टिकोण के साथ समस्या यह है कि पेड़ को हिलाना काफी कठिन हो जाता है (पढ़ें: असंभव के करीब)। जिसका मतलब होगा कि अनावश्यक कोड ब्राउज़र पर भेज दिया जाएगा।

@timneutkens अच्छी बात है ... लेकिन फिर क्या एक अलग फाइल और भी ज्यादा मायने नहीं

// This should all be removed in client-side code …
import {fetchQuery, queryTag} from 'big-data-fetching-lib';
const query = queryTag`...`
export const getStaticProps = async () => ({ props: await fetchQuery(query) })

// Only this should be included client-side
export default (props) => ...

@herrstucki हम मज़बूती से पेड़ को हिला सकते हैं, लेकिन हम अभी भी एक अलग फ़ाइल रखने पर चर्चा कर रहे हैं। व्यक्तिगत रूप से मैं हालांकि एकल फ़ाइल दृष्टिकोण पसंद करता हूं।

बहुत दिलचस्प लग रहा है! क्या उसका प्रतिस्थापन getInitialProps या साथ में होगा? उदाहरण के लिए, हमारे उपयोग के मामले में, डेटा लाने वाला एपीआई एक सार्वजनिक सेवा है। इसलिए क्लाइंट साइड नेविगेशन पर, हम क्लाइंट से सीधे एपीआई लेयर को कॉल करने की अपेक्षा करते हैं, जबकि SSR पर सर्वर इसे कॉल करता है। आगे जाकर, क्या इस उपयोग के मामले को पूर्व विधि द्वारा हल किया जाना जारी रहेगा?

सामान्य तौर पर उस व्यवहार में कुछ कमियां होती हैं, उदाहरण के लिए जलप्रपात प्राप्त करना जो दुनिया भर के कुछ क्षेत्रों से धीमा हो सकता है। getServerProps दृष्टिकोण प्रतिक्रिया को अधिक कुशलता से कैशिंग करने की अनुमति देता है।

ज़रूर, लेकिन मैं प्रतिक्रिया सर्वर पर आरटीटी से बचने के बारे में बात कर रहा हूँ। उस मामले पर विचार करें जहां सर्वर से एसएसआर आउटपुट सीडीएन/कैश सर्वर प्रॉक्सी पर कैश किया गया है। युगल कि क्लाइंट नेविगेशन के लिए डेटा लाने के साथ सीधे एक अलग एपीआई परत (वेब ​​/ ऐप्स / सभी क्लाइंट के लिए सामान्य) को कॉल करने का मतलब है कि नेक्स्ट.जेएस सर्वर परत को उच्च ट्रैफ़िक परिदृश्य में उतना बड़ा नहीं किया जाना चाहिए।

मैं समझता हूं कि आपके वॉटरफॉल फ़ेच की बात है, लेकिन उपभोक्ताओं को नेक्स्ट सर्वर को SSR लेयर बनाम डेटा स्रोत के रूप में व्यवहार करने की क्षमता देने से बेहतर स्केलिंग सेटअप की अनुमति मिलेगी।

बहुत दिलचस्प लग रहा है! क्या उसका प्रतिस्थापन getInitialProps या साथ में होगा? उदाहरण के लिए, हमारे उपयोग के मामले में, डेटा लाने वाला एपीआई एक सार्वजनिक सेवा है। इसलिए क्लाइंट साइड नेविगेशन पर, हम क्लाइंट से सीधे एपीआई लेयर को कॉल करने की अपेक्षा करते हैं, जबकि SSR पर सर्वर इसे कॉल करता है। आगे जाकर, क्या इस उपयोग के मामले को पूर्व विधि द्वारा हल किया जाना जारी रहेगा?

सामान्य तौर पर उस व्यवहार में कुछ कमियां होती हैं, उदाहरण के लिए जलप्रपात प्राप्त करना जो दुनिया भर के कुछ क्षेत्रों से धीमा हो सकता है। getServerProps दृष्टिकोण प्रतिक्रिया को अधिक कुशलता से कैशिंग करने की अनुमति देता है।

ज़रूर, लेकिन मैं प्रतिक्रिया सर्वर पर आरटीटी से बचने के बारे में बात कर रहा हूँ। उस मामले पर विचार करें जहां सर्वर से एसएसआर आउटपुट सीडीएन/कैश सर्वर प्रॉक्सी पर कैश किया गया है। युगल कि क्लाइंट नेविगेशन के लिए डेटा लाने के साथ सीधे एक अलग एपीआई परत (वेब ​​/ ऐप्स / सभी क्लाइंट के लिए सामान्य) को कॉल करने का मतलब है कि नेक्स्ट.जेएस सर्वर परत को उच्च ट्रैफ़िक परिदृश्य में उतना बड़ा नहीं किया जाना चाहिए।

मैं समझता हूं कि आपके वॉटरफॉल फ़ेच की बात है, लेकिन उपभोक्ताओं को नेक्स्ट सर्वर को SSR लेयर बनाम डेटा स्रोत के रूप में व्यवहार करने की क्षमता देने से बेहतर स्केलिंग सेटअप की अनुमति मिलेगी।

मुझे लगता है कि आप गलत समझ रहे हैं कि इस नए व्यवहार का मतलब है कि आप वास्तव में सीडीएन पर पूर्ण परिणामों को कैश कर सकते हैं क्योंकि सीडीएन गतिशील प्रतिक्रियाओं का समर्थन करता है। यह पहले getInitialProps के साथ विश्वसनीय रूप से संभव नहीं था।

@timneutkens मैंने कैनरी के साथ खेला, कुछ babel-plugin-preval कोड को getStaticProps पर पोर्ट करने का प्रयास किया। मुझे fs साथ किसी समस्या का सामना करना पड़ रहा है।

मैं अपनी ./pages/blog/ निर्देशिका की .md फ़ाइलों को पढ़ने की कोशिश कर रहा हूं और उनके माध्यम से लूप कर रहा हूं ताकि मैं अपने सभी पोस्ट के साथ एक ब्लॉग इंडेक्स पेज बना सकूं

import React from 'react';
import Link from 'next/link';
import fs from 'fs-extra';

const Index = ({ posts }) => (
  <div>
    Hello World. <Thing msg="hello" />
    <Link href="/thing">
      <a>About</a>
    </Link>
    {posts.map(p => (
      <div key={p.title}>{p.title}</div>
    ))}
  </div>
);

Index.getStaticProps = async () => {
  const items = await fs.readdir('./pages/blog');
  items.forEach(path => /* .... do some stuff ... */ )
  return { props: { posts: items } };
};

export default Index;

यह कोड इस त्रुटि की ओर जाता है:

Module not found: Can't resolve 'fs' in '/Users/jared/Downloads/nextjs-typescript-template/node_modules/fs-extra/lib'

रैज़ल से आईआईआरसी, इस त्रुटि को वेबपैक के फाइल सिस्टम स्टब्स (या इसके अभाव) के साथ करना है। मुझे लगता है कि मैंने इसे एक बार वेबपैक कॉन्फिगर में जोड़कर रैज़ल के साथ तय किया था।

node: {
  fs: "empty";
}

मैंने इसे next.config.js करने की कोशिश की, लेकिन यह सिर्फ त्रुटि को दूर करता है। हालांकि ऐसा प्रतीत होता है कि fs / fs-extra वास्तव में काम नहीं करता है, या यह करता है और शायद पथ नहीं (मेरे लिए अस्पष्ट)। उस पर कोई विचार?

मेरा दूसरा प्रश्न, अधिक सामान्यतः, वह है जिसकी आप कल्पना करते हैं कि getStaticProps में आयात बनाम आवश्यकता का उपयोग करने के लिए सर्वोत्तम अभ्यास होंगे। अगर मैं गलत नहीं हूं, तो मेरा उपरोक्त स्निपेट fs-extra को रिएक्ट में आइसोमॉर्फिक रूप से आयात करने का प्रयास करेगा ??। क्या इस तरह आयात को एक इनलाइन आवश्यकता में बदलना बेहतर होगा?

js Index.getStaticProps = async () => { const fs = require('fs-extra'); // only require when needed at SSG const props = await fs.readdir('./pages/blog'); return { props: { posts } }; };

मुझे लगता है कि आप गलत समझ रहे हैं कि इस नए व्यवहार का मतलब है कि आप वास्तव में सीडीएन पर पूर्ण परिणामों को कैश कर सकते हैं क्योंकि सीडीएन गतिशील प्रतिक्रियाओं का समर्थन करता है। यह पहले getInitialProps के साथ विश्वसनीय रूप से संभव नहीं था।

आह, मुझे लगता है कि मुझे तुम्हारा मतलब है। क्या इसका मतलब यह होगा कि पहली एसएसआर पीढ़ी पर getServerProps एक अद्वितीय समापन बिंदु बनाएगा, एक सामग्री पता योग्य हैश में शायद यूआरएल में हो सकता है कि हम सीडीएन पर कैश कर सकें? इसका एकमात्र नकारात्मक पक्ष यह होगा कि कहा गया कैश गैर नेक्स्ट ऐप्स (एंड्रॉइड/आईओएस) और नेक्स्ट ऐप्स के बीच साझा करने योग्य नहीं होगा। इसके अतिरिक्त, एक बाहरी डेटा स्रोत के साथ, कैश नियंत्रण निर्देश अपस्ट्रीम होते हैं, लेकिन यहां चूंकि अगला डेटा की सेवा की जिम्मेदारी ग्रहण करेगा, इसलिए हमें उत्पन्न डेटा समापन बिंदुओं के लिए एपीआई या प्रॉप्स की आवश्यकता है।

@jaredpalmer मुझे लगता है कि https://github.com/zeit/next.js/issues/9524#issuecomment -558628066 ( विश्वसनीय ट्री-शकेबिलिटी के बारे में मेरी चिंता सहित) को एक अलग फाइल बनाकर हल किया जाएगा जिसे पूरी तरह से अलग से संकलित किया जाएगा क्लाइंट बंडल कोड? उदाहरण के लिए

pages/
    foo.js
    foo.data.js (<- exports getStaticProps etc.)

or:

pages/
    foo.js
pages-data/
    foo.js (<- exports getStaticProps etc.)

@jaredpalmer पेड़ हिलाना अभी तक कैनरी पर लागू नहीं किया गया था।

हमेशा की तरह, आप जो कुछ भी करते हैं उसके लिए धन्यवाद। Next.js के साथ काम करना एक परम आनंद रहा है, और जैसा कि मैंने पहले कहा है, बस हर फीचर रिलीज के बारे में हमें मेरे द्वारा प्रबंधित कोडबेस के आकार को _reduce_ करने देता है। यह आश्चर्यजनक है।

इस आरएफसी की आलोचना करना कठिन है, जैसा कि लिखा गया है, यह बहुत सारे अनुप्रयोगों के लिए तुरंत उपयोगी है। हालाँकि, मैं एक पंक्ति को संबोधित करना चाहता हूँ जो मुझे यकीन नहीं है कि मैं इससे सहमत हूँ:

" getStaticPaths एक exportPathMap होने की आवश्यकता को प्रतिस्थापित करता है और प्रति पृष्ठ कार्य करता है।"

कुछ अनुप्रयोगों में, निर्माण के समय मार्गों को जानना या तो अव्यावहारिक या असंभव है। कुछ उदाहरण होंगे:

• उपयोगकर्ता प्रोफ़ाइल पृष्ठ
• उत्पाद पृष्ठ (तेजी से बदलती इन्वेंट्री वाली कंपनियों के लिए)
• बिक्री आदेश विवरण पृष्ठ

इस तरह के पृष्ठों के लिए मार्ग संभवतः /entity-name/entity-id और नेक्स्ट के गतिशील मार्ग वास्तव में वास्तव में अच्छी तरह से काम करते हैं क्योंकि आप router.push('/customers/[customerId]', '/customers/baer') जैसी चीजें कर सकते हैं। अभी भी एक पकड़ है। यदि आप इन फ़ाइलों को सर्व, नेटलिफाई, एनजीआईएनएक्स, आदि के साथ स्थिर रूप से सेवा देने की योजना बना रहे हैं, तो आपको रीडायरेक्ट का एक सेट जेनरेट करना होगा ताकि उपयोगकर्ताओं को पेज-रीफ्रेश पर 404 न मिले और ऐसा करने के लिए, आप अभी भी exportPathMap ।

निम्नलिखित की प्रतिलिपि बनाई गई है, लगभग एक कोडबेस से, जिस पर मैं नियमित रूप से काम करता हूं:

const buildServeConfig = redirects => {
  const config = {
    public: `dist`,
    trailingSlash: true,
    rewrites: redirects
  };

  const outputPath = `${__dirname}/serve.json`;

  fs.writeFile(outputPath, JSON.stringify(config, null, 2), err => {
    if (err) {
      throw err;
    }
    // eslint-disable-next-line no-console
    console.log(`Generated: ${outputPath}`);
  });
};

...

exportPathMap: function(defaultPathMap, { dev, outDir }) {
  const redirects = Object.entries(defaultPathMap)
    // No need to create a redirect rule for `/dirname/` or `/dirname/index.html`
    .filter(([url]) => url !== `/` && url !== `/index`)
    .map(([url, { page }]) => ({
      // Replaces /[customerId] with /:customerId
      source: url.replace(/]/g, ``).replace(/\[/g, `:`),
      destination: `${page}/index.html`
    }));

  // By default, the routes are sorted such that a route like `/order/:orderId`
  // comes before `/order/new`. Since the `:orderId` portion of `/order/:orderId` 
  // is a wildcard, the route `/order/new` will be a match and consider `new` 
  // as a value for `:orderId`. To get past this, we sort the redirects by the 
  // number of parameters in ascending order.
  const sortedRedirects = [...redirects].sort(
    (currentRedirect, nextRedirect) =>
      currentRedirect.source.split(`:`).length >
      nextRedirect.source.split(`:`).length
  );

  buildServeConfig(sortedRedirects);

  return defaultPathMap;
}

मैं समझता हूं कि यह आरएफसी किसी भी एपीआई को हटा या हटा नहीं देता है और मैं यह भी मानता हूं कि बिल्ड निर्देशिका को पार करके इन रीडायरेक्ट को बनाना संभव है, भले ही इसे बहिष्कृत किया गया हो, मेरे पास एक अच्छा ecape हैच है। लेकिन, यह " getStaticPaths की आवश्यकता को पूरी तरह से दूर नहीं करता है।"

फिर से, इस परियोजना को चलाने के तरीके में आपकी विचारशीलता के लिए धन्यवाद

क्या getStaticProps / getStaticPaths और getServerProps परस्पर अनन्य हैं? यानी क्या एक भाग को पहले से रेंडर करना और एक भाग को एक ही समय में गतिशील बनाना संभव होगा?

हाँ वे एक स्थिर पीढ़ी के रूप में हैं और एक सर्वर-साइड प्रतिपादन है।

इससे पहले कि हम नेक्स्ट में माइग्रेट करें, यह एक बड़ी चीज़ को ठीक करता है जो मुझे Gatsby से याद आती है:

हमारे पास एक मोनोलिथिक (100 केबीएस) जेएसओएन फ़ाइल है जिसे हम अपने पृष्ठों को प्रस्तुत करने के लिए डेटा खींचते हैं जो कभी नहीं बदलते हैं। Gatsby में हमने JSON फ़ाइल को GraphQL स्कीमा में लोड किया और उसके विरुद्ध पूछताछ की, केवल उस डेटा को हथियाने के लिए जो हमें किसी दिए गए पृष्ठ को प्रस्तुत करने के लिए आवश्यक था। नेक्स्ट के साथ, हमें ऐसा करने का सबसे आसान/साफ तरीका import monolith from './monolith.json' , जिसके लिए उपयोगकर्ता को संपूर्ण JSON फ़ाइल डाउनलोड करने की आवश्यकता होती है।

यह RFC 100% इस उपयोग के मामले को संबोधित करता है और Gatsby के चमकने वाले क्षेत्रों में Gatsby के साथ अगले एक कदम को करीब लाता है (जाहिर है, Gatsby रनटाइम SSR नहीं कर सकता है, इसलिए मैं केवल स्थिर बिल्डटाइम रेंडरर्स के बारे में बात कर रहा हूँ)

@timneutkens , RFC के लिए धन्यवाद!

मेरे पास Next.js के लिए एक उपयोग मामला है जिस पर मैंने हाल ही में @rauchg के साथ चर्चा की है।

Next.js बहुत ही सहज DX और कुछ उचित चूक प्रदान करता है। इसलिए, मैं केवल क्लाइंट-साइड रेंडर किए गए एप्लिकेशन, एक स्मार्ट टीवी ऐप के लिए Next.js का उपयोग करने में रुचि रखता हूं।

स्मार्ट टीवी ऐप लगभग क्लासिक वेब ऐप हैं जो टीवी के ब्राउज़र इंजन द्वारा चलाए जाते हैं:

1. ऐप को एक बंडल में पैक किया गया है: शैलियाँ, स्क्रिप्ट, चित्र, _index.html_, प्रमाणपत्र और टीवी कॉन्फ़िग फ़ाइल।
2. बंडल को प्लेटफ़ॉर्म के ऐप स्टोर पर समीक्षा के लिए सबमिट किया जाता है।
3. फिर बंडल को स्टोर से ऐप के रूप में इंस्टॉल किया जाता है और उपयोगकर्ता द्वारा चलाया जाता है।

बात यह है कि बंडल को स्थिर रूप से टीवी डिवाइस द्वारा ही होस्ट किया जाता है और सर्वर से लोड नहीं किया जाता है। इस प्रकार, कोई SSR विकल्प संभव नहीं है (इन उद्देश्यों के लिए Node.js डेवलपर्स के सामने नहीं आता है)। लेकिन ऐप ही गतिशील है (कहते हैं, नेटफ्लिक्स)।

इसलिए, हमें एक एसपीए चलाने की जरूरत है जो एक स्थिर वेब सर्वर द्वारा होस्ट किया जाता है।

जैसा कि मैं समझता हूं कि getServerProps (या getInitialProps ) से बाहर निकलने से पूरी तरह से SSR से बचने में मदद मिलेगी। लेकिन क्लाइंट पर डायनेमिक रेंडरिंग के साथ क्या होता है? और इस मामले में रूटिंग के बारे में क्या? इस आरएफसी के अनुसार अभी तक समस्या का समाधान नहीं किया गया है। @timneutkens , क्या आप कृपया क्लाइंट-साइड को केवल Next.js में रेंडरिंग सक्षम करने का सबसे अच्छा तरीका सुझा सकते हैं? और क्या यह पहले स्थान पर Next.js फिट बैठता है? धन्यवाद!

पीएस मैं इस उपयोग के मामले के लिए एक मुद्दा बना सकता हूं यदि आपको लगता है कि इस पर अलग से चर्चा करना बेहतर है।

@grushetsky क्या आप एक अलग मुद्दा बना सकते हैं। यह आरएफसी में चर्चा की जा रही बातों से बिल्कुल अलग प्रश्न है

@timneutkens इस आरएफसी का वादा उन चीजों में से एक है जिसने मुझे नेक्स्ट के बारे में सुपर उत्साहित किया! हालांकि स्पष्ट करने के लिए, getInitialProps अभी भी मौजूद होगा, है ना?

सही @outdooricon -- getInitialProps निकट भविष्य में बना रहेगा।

आरएफसी के अनुसार:

यह RFC विशेष रूप से API परिवर्धन पर चर्चा करता है। सभी नई कार्यक्षमता पूरी तरह से पीछे की ओर संगत है और इसे क्रमिक रूप से अपनाया जा सकता है। यह RFC कोई बहिष्करण नहीं पेश करता है।

बढ़िया RFC, इसके लिए अति उत्साहित!

मैं एक विशिष्ट उपयोग के मामले के संबंध में getServerProps बारे में सोच रहा हूं, परिणामों को कैश में डाल रहा हूं। चूंकि यह एपीआई-एंडपॉइंट में बदल जाता है और परिणाम को प्रॉप्स के रूप में घटक को दिया जाता है, क्या परिणाम को बाहरी कैश जैसे रेडक्स, ग्राफक्यूएल-कैश आदि क्लाइंट साइड में डालने का एक निर्धारित तरीका है?

अगर मैं getInitialProps सही ढंग से समझता हूं, क्योंकि यह स्थिर और एसिंक्स है, तो अगली बार घटक को पहली बार प्रस्तुत करने से पहले इसके पूरा होने की प्रतीक्षा करने का अवसर है। यह हमें चीजों को वहां बाहरी कैश में डालने देता है। यह getServerProps के मामले में नहीं होगा क्योंकि यह सर्वर पर चलता है, और चीजों को घटक जीवनचक्र में कैश में डालने का मतलब है कि हमें एक रेंडर करना होगा जहां डेटा अभी तक कैश में उपलब्ध नहीं है , भले ही वह प्रॉप्स में उपलब्ध हो?

यह निश्चित रूप से जानबूझकर हो सकता है और मुझे एक दृष्टिकोण याद आ रहा है, लेकिन मैंने सोचा कि मैं पूछूंगा कि क्या ऐसा कुछ है जिस पर विचार किया गया है?

संपादित करें: मुझे लगता है कि यह getStaticProps पर भी लागू होता है। मैं

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

सबसे पहले! बढ़िया प्रस्ताव, यह अधिकांश लोगों के उपयोग के मामले में exportPathMaps से अधिक का व्यापक सुधार है। यह वास्तव में प्रशंसनीय है। इसके साथ ही, मैं यह समझने के लिए संघर्ष कर रहा हूं कि हम इसे रूट अंतर्राष्ट्रीयकरण के साथ कैसे काम कर पाएंगे।

क्या i18n प्रीफिक्स्ड रूट्स को हैंडल करने के बारे में कोई सुझाव है? मेरे विशिष्ट उपयोग के मामले में विभिन्न देश-लैंग उपसर्गों और यूआरएल वाले पृष्ठों पर कुछ हजारों बनाने की आवश्यकता है।

/nl/brillen
/gb/glasses
/es/gafas
...

ऐसा लगता है कि getStaticPaths वास्तव में तब मददगार होगा जब url के लिए उपसर्ग सर्वविदित हो, जैसा कि आपके उदाहरण में है ( /blog/[id].js का उपयोग करके)। लेकिन आपको क्या लगता है कि getStaticPaths कार्यान्वयन कैसा दिखेगा यदि इसे रूट स्तर पर पथ उत्पन्न करने की आवश्यकता है, दोनों एक गतिशील उपसर्ग (देश-लैंग) और एक गतिशील पथ के साथ?

@reaktivo pages/[lang]/blog/[id].js -> getStaticPaths स्थिर रूप से रेंडर करने के लिए सभी url प्रदान करते हैं।

@timneutkens कोई विचार जब यह उपलब्ध/परीक्षण योग्य होगा?

सामान्य तौर पर हम ईटीए नहीं देते हैं क्योंकि हम यह सुनिश्चित करने के लिए कि समाधान सही है, उत्पादन ऐप्स के विरुद्ध सुविधाओं का व्यापक परीक्षण करते हैं।

यह सुधार पूरी तरह से मुझे मेरे "जो बनाए नहीं रखा" फीनोमिक प्रोजेक्ट (प्रतिक्रिया एसएसजी जो मेरे अलावा कोई भी उपयोग नहीं करता है) को पूरी तरह से हटा देगा। Next.js को इस लापता भागों को जोड़ते हुए देखकर बहुत अच्छा लगा!

मैं एक संदेह को स्पष्ट करना चाहता हूं। सीएमएस जैसे वर्डप्रेस के उपयोग को ध्यान में रखते हुए। जैसा कि मैं इसे समझता हूं, getStaticPaths विधि के साथ मैं सभी पोस्ट लाऊंगा और एक सूची पास करूंगा जैसे:

export async function getStaticPaths () {
  return [
    // This renders / blog / hello-world to HTML at build time
    {params: {slug: "hello-world"}}
  ];
}

सामग्री लाने के लिए प्रत्येक पोस्ट के स्लग का उपयोग getStaticProps विधि में किया जाएगा।
यह npm बिल्ड में होगा।
मेरा प्रश्न उन नई पोस्टों के बारे में है जो निर्माण के बाद जोड़ी जाएंगी।
क्या इस नई पोस्ट को स्लग द्वारा लाने के लिए getStaticProps विधि का उपयोग किया जाएगा?
क्या इस नई पोस्ट में पिछले बिल्ड की तरह एक .html फ़ाइल होगी?
मुझे नेक्स्ट के साथ काम करना पसंद है और मेरे पास कई प्रोजेक्ट्स में यह बहुत अच्छा होगा।

कुछ भी सीधे संबंधित नहीं है, लेकिन समर्थन मुझे ऐसा उत्तर देने में असमर्थ है जो मेरे प्रश्न से मेल खाता हो।

आप यहां जो सुझाव देते हैं वह समाधान हो सकता है, लेकिन इस बीच, मैं webhooks परिवर्तनों के आधार पर JAMSTACK बनाने के लिए nextJS बनाने में असमर्थ हूं।

अगर मुझे इनिशियलप्रॉप्स मिलता है तो मैं सर्वर-रेंडर होने जा रहा हूं।
अगर मैं नहीं करता, तो मैं सिर्फ CDNized हूं, लेकिन प्री-रेंडरिंग के बिना नहीं है? और पृष्ठ तब तक सामग्री के बिना रहेगा जब तक XHR वापस नहीं आया (अलविदा SEO)

क्या आपके पास नेक्स्टजेएस के साथ जामस्टैक का कोई चल रहा उदाहरण है और हम नेटलिफाई पर कर सकते हैं।

धन्यवाद,
एंड्रियास

अरे @ScreamZ - यह परिवर्तन है, मुझे लगता है, जो एक पूरी तरह से स्थिर साइट को nextjs के साथ बनाने में सक्षम बनाता है। हम एक लंबे समय के लिए next export का उपयोग करके एक nextjs साइट को स्थिर में संकलित करने में सक्षम हैं, लेकिन यह अभी भी getInitialProps का उपयोग करके क्लाइंट-साइड रूट ट्रांज़िशन पर डेटा प्राप्त करेगा। getStaticProps का उपयोग करने की क्षमता के साथ, आप बिना किसी अतिरिक्त डेटा के क्लाइंट-साइड ट्रांज़िशन चला सकते हैं -- getStaticProps में प्राप्त सभी डेटा बिल्ड समय पर एक बार फ़ेच किया जाता है, और आपके द्वारा अपडेट नहीं किया जाता है लाइव साइट जब तक आप फिर से पुनर्निर्माण नहीं करते। यह डेटा-संचालित स्थिर साइटों का क्लासिक आर्किटेक्चर है, अपने डेटा स्रोत को वेबहुक के माध्यम से अपने होस्ट से लिंक करें और जब डेटा स्रोत बदलता है, तो आप होस्ट को अपनी साइट के पुनर्निर्माण के लिए कहते हैं।

पूरी तरह से स्थिर नेक्स्टज वेबसाइटों के बहुत सारे मौजूदा उदाहरण हैं, और नेटलिफाई पर एक नेक्स्टज साइट चलाने के लिए यह तुच्छ है। मेरी कंपनी की वेबसाइट वर्तमान में nextjs पर चल रही है, और netlify द्वारा होस्ट की गई है, उम्मीद है कि यह एक अच्छा उदाहरण है।

यह बहुत ध्यान देने योग्य है कि ज़ीट की होस्टिंग सेवा भी कुछ ऐसा है जिस पर दृढ़ता से विचार किया जा सकता है। मूल्य निर्धारण काफी समान है, और नेक्स्टज साइटों के साथ उनका एकीकरण किसी से पीछे नहीं है - आपको सचमुच कुछ भी कॉन्फ़िगर करने की आवश्यकता नहीं है, आप बस जीथब को लिंक करते हैं और ज़ीट की होस्टिंग यह पहचान लेगी कि आप नेक्स्टज चला रहे हैं और स्वचालित रूप से कॉन्फ़िगर और तैनात हैं हर चीज़।

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

@jescalan इस महान साझाकरण के लिए धन्यवाद 🙏🏻

मुझे netlify के साथ नेक्स्टजेएस का उपयोग करने में कोई समस्या नहीं है, क्योंकि आप Publish directory का उपयोग out फ़ोल्डर को निर्दिष्ट करने के लिए कर सकते हैं। लेकिन zeit Now पर, कहने का कोई तरीका नहीं है, कृपया SSR का उपयोग न करें, लेकिन next export साथ स्टैटिक पर पूर्ण जाएं।

@ScreamZ यह सच है, लेकिन यह इस बात पर निर्भर करता है कि आप "पूर्ण स्थैतिक" साइट को वास्तव में कैसे परिभाषित करते हैं। यदि आप zeit की होस्टिंग सेवा वाले अपने सभी पृष्ठों के लिए getStaticProps उपयोग करते हैं, तो आपको जो मिलेगा वह प्रभावी रूप से एक स्थिर साइट के बराबर होगा, भले ही वह next export न चले, क्योंकि getStaticProps सभी पृष्ठ

मुख्य अंतर यह है कि जहां तक ​​​​मुझे पता है कि सभी पृष्ठों को ज़ीइट की होस्टिंग पर स्थिर होने के लिए मजबूर करने का कोई तरीका नहीं है (संपादित करें: ज़ीट ने हाल ही में इसे बदल दिया है ताकि कॉन्फ़िगरेशन वाली कोई भी साइट जिसमें exportPathMap चलेंगे एक पूरी तरह से स्थिर साइट, इसलिए यह अब सत्य नहीं है)। getStaticProps पेज ठीक उसी तरह व्यवहार करते हैं जैसे next export द्वारा जेनरेट किए गए पेज -- हर हिट पर सीडीएन से सीधे पेज की एक स्टैटिक कॉपी दी जाती है। लेकिन आप कुछ पृष्ठों को getServerProps या getInitialProps साथ भी चला सकते हैं और वे सर्वर प्रदान किए गए पृष्ठों के रूप में व्यवहार करेंगे। व्यक्तिगत रूप से मैं इसे एक लाभ के रूप में देखता हूं - यदि एसएसआर मार्ग की आवश्यकता है तो आप बस एक अलग डेटा लाने की विधि का उपयोग कर सकते हैं और वह एकल मार्ग अब एसएसआर है, जबकि आपके अन्य सभी मार्ग स्थिर रह सकते हैं।

@jescalan धन्यवाद,

तो बस इसे लागू करने के लिए प्रतीक्षा करने की आवश्यकता है, इस बीच स्थैतिक के लिए netlify का उपयोग करने वाला है

क्या SSG कॉन्फ़िगरेशन के आसपास कोई कहानी है? विशेष रूप से हम साझा निर्माण कलाकृतियों का उपयोग करना चाहते हैं लेकिन क्यूए/उत्पाद के लिए अलग-अलग कॉन्फ़िगरेशन के साथ next export चलाते हैं। ये कॉन्फ़िगरेशन मान केवल getStaticProps में पढ़े जाएंगे। क्या यह सीधे serverRuntimeConfig या publicRuntimeConfig या process.env ?

@ScreamZ @jescalan मैं अब @Timer (वह सभी क्रेडिट के हकदार हैं) के साथ अब आज पर शून्य-कॉन्फ़िगरेशन next export समर्थन पर उतरा है। तुम कर सकते हो:

"build": "next build && next export"

और यह अपने आप काम करेगा।

मुझे बताएं कि यह कैसे जाता है

हाँ, मैं वह लड़का था जिसने समर्थन पर पूछा और उन्होंने मुझे बताया कि इसे अभी तक लागू किया गया है 😅 जहां तक ​​​​मैं देख सकता हूं, आपको कॉन्फ़िगरेशन में निर्यात मानचित्र को परिभाषित करने की आवश्यकता होगी?

@ScreamZ नहीं, आप ऊपर दिखाए गए अनुसार केवल next build && next export जोड़ सकते हैं और यह काम करेगा।

@timneutkens अगर मैं की जगह getInitialProps के साथ getServerProps , मैं अभी भी जोड़ने की जरूरत है target: 'serverless' कॉन्फ़िग फ़ाइल को सक्षम करने के लिए Server Pre Rendering ? धन्यवाद।

हम इन्हें कैसे आजमा सकते हैं?

हम इन्हें कैसे आजमा सकते हैं?

मुझे लगता है कि इन सभी विधियों को वर्तमान में मान्यता प्राप्त करने के लिए unstable_ उपसर्ग की आवश्यकता है।

उदाहरण के लिए unstable_getStaticProps

@timneutkens

@ScreamZ @jescalan मैं अब @Timer (वह सभी क्रेडिट के हकदार हैं) के साथ अब आज पर शून्य-कॉन्फ़िगरेशन next export समर्थन पर उतरा है। तुम कर सकते हो:

"build": "next build && next export"

और यह अपने आप काम करेगा।

मुझे बताएं कि यह कैसे जाता है

मेरी बिल्ड स्क्रिप्ट कुछ और चीजें कर रही है लेकिन ऐसा लगता है कि यह एक आकर्षण की तरह काम करता है:

"build": "graphql codegen && next build && npm run export",

इसके अलावा, यह बहुत अच्छा है! यह वही था जो मैं ढूंढ रहा था (अलविदा गैट्सबीजेएस, मेरा पसंदीदा ढांचा अब आपके जैसा मजबूत है!)

ऐसी प्रतिक्रियाशीलता के लिए बहुत-बहुत धन्यवाद।

मैंने 9.1.6 भी अपग्रेड किया और मैंने आश्चर्यजनक रूप से देखा कि

मैंने सोचा था कि धागा एक आरएफसी था, ऐसा लगता है कि यह हमारे लिए पहले से ही खुला है, है ना?
हालाँकि, टाइपस्क्रिप्ट प्रकार 9.1.6 में सक्षम नहीं हैं।

धिक्कार है, मैं अब इसके लिए बहुत उत्साहित हूँ! मैं

अंतिम प्रश्न:

• अगर मुझे यह मिल जाता है, तो भविष्य में getInitialProps का बहिष्कार कर दिया जाएगा? या यह अभी भी कुछ मामलों में प्रासंगिक है? एक उदाहरण?
• next export को केवल getStaticProps और next build वाले पृष्ठों के पक्ष में भी हटा दिया जा सकता है?

उस बेहतरीन टूल के लिए धन्यवाद 🙏🏻

अगर मैं इसे प्राप्त करता हूं, तो भविष्य में getInitialProps को बहिष्कृत कर दिया जाएगा? या यह अभी भी कुछ मामलों में प्रासंगिक है? एक उदाहरण?

जैसा कि प्रारंभिक आरएफसी में कहा गया है:

यह RFC विशेष रूप से API परिवर्धन पर चर्चा करता है। सभी नई कार्यक्षमता पूरी तरह से पीछे की ओर संगत है और इसे क्रमिक रूप से अपनाया जा सकता है। यह RFC कोई बहिष्करण नहीं पेश करता है।

मैंने सोचा था कि धागा एक आरएफसी था, ऐसा लगता है कि यह हमारे लिए पहले से ही खुला है, है ना?

ऐसा नहीं है, हम इसे ZEIT अनुप्रयोगों पर आज़मा रहे हैं और कुछ दृश्यता सरफेसिंग पहले ही उतर चुकी है (उदाहरण के लिए आपके द्वारा देखे गए पेज ट्री)।

अगले निर्यात को getStaticProps और केवल अगले निर्माण वाले पृष्ठों के पक्ष में बहिष्कृत किया जा सकता है?

ठीक है, आम तौर पर आप next export का उपयोग नहीं कर पाएंगे। इसे बैकवर्ड कॉम्पिटिशन कारण के लिए इधर-उधर रखा जाएगा, लेकिन सामान्य तौर पर आप एक हाइब्रिड ऐप बनाना चाहेंगे क्योंकि यह आपको एपीआई रूट जैसी अन्य सुविधाओं के समर्थन के साथ निर्यात के सभी लाभ देता है और कुछ पेजों के लिए सर्वर-साइड रेंडरिंग का विकल्प देता है।

हम इन्हें कैसे आजमा सकते हैं?

मुझे लगता है कि इन सभी विधियों को वर्तमान में मान्यता प्राप्त करने के लिए unstable_ उपसर्ग की आवश्यकता है।

उदाहरण के लिए unstable_getStaticProps

अत्यधिक अनुशंसा करते हैं कि इसे अभी तक उपयोग न करें, यह प्रयोगात्मक है और रिलीज के बीच टूट सकता है।

तो मैं इस सुविधा के साथ खेल रहा हूं और मैंने देखा है कि पेज डेटा युक्त JSON फ़ाइल हमेशा दूसरे पेज से एसएसजी पेज तक पहुंचने के बाद प्राप्त की जाती है।

क्या आप लोग JSON फ़ाइल के लिए किसी प्रीलोडिंग अनुकूलन की योजना बना रहे हैं?
शायद इसे प्रीलोड करना जब उपयोगकर्ता पृष्ठ पर नेविगेट करने वाला हो (यानी: उपयोगकर्ता एक एसएसजी लिंक होवर कर रहा हो) या प्रीलोडिंग जैसे आप लिंक घटक से संदर्भित अन्य जेएस पृष्ठों को प्रीलोड कर रहे हैं।

वैसे उस विशेषता को प्यार करना!

क्या आप लोग JSON फ़ाइल के लिए किसी प्रीलोडिंग अनुकूलन की योजना बना रहे हैं?

हां।

इसके लायक क्या है, मैं अलग-अलग फाइलों के बजाय इन funcs के पेड़-हिलाने योग्य निर्यात के लिए हूं।

इस सुविधा की स्थिति क्या है? इसके अवरोधक क्या हैं?

@mikestopcontinues इस RFC का वर्तमान में हमारी टीम और कुछ चुनिंदा भागीदारों द्वारा आंतरिक रूप से अत्यधिक परीक्षण किया जा रहा है। जैसा कि ऊपर बताया गया है, आप unstable_ उपसर्गों का उपयोग करके इसके अत्यधिक प्रयोगात्मक व्यवहार में शामिल हो सकते हैं! मैं

कृपया उत्पादन कार्यभार को नई विधियों में माइग्रेट न करें, क्योंकि हम अभी भी एपीआई को ब्रेकिंग तरीकों से अपडेट कर सकते हैं।

व्यक्तिगत रूप से, मैं इसे 8 से 20K पृष्ठों तक स्थिर साइटों की पीढ़ी के लिए उपयोग करता हूं (कुछ पृष्ठों पर कुछ गतिशील अनुरोध होने की संभावना के साथ)। यह बहुत अच्छी तरह से काम करता है (अभी पर 10K फाइलों की सीमा को छोड़कर), केवल एक चीज जो मुझे शर्म आती है वह यह है कि getStaticPaths विधि के बिना, प्रत्येक पुनः लोड पर getStaticProps को कॉल किया जाता है। एक व्यवहार जो अच्छा हो सकता है वह यह है कि पहला कॉल json फ़ाइल बनाता है और अगला उसका उपयोग करता है।

क्या इंक्रीमेंटल बिल्ड की योजना बनाई गई है? तो केवल नई/बदली गई सामग्री का पुनर्निर्माण किया जाता है?

जैसा कि ऊपर बताया गया है, आप unstable_ उपसर्गों का उपयोग करके इसके अत्यधिक प्रयोगात्मक व्यवहार में शामिल हो सकते हैं!

मैं unstable_getServerProps विधि का परीक्षण करना चाहता हूं, लेकिन ऐसा लगता है कि इस समय इसे अनदेखा कर दिया गया है, और मैं इसे zeit/next.js रेपो में कहीं भी नहीं ढूंढ पा रहा हूं। क्या इसे अभी तक लागू नहीं किया गया है, या क्या मैं इसे गलत कर रहा हूँ?

क्या इंक्रीमेंटल बिल्ड की योजना बनाई गई है? तो केवल नई/बदली गई सामग्री का पुनर्निर्माण किया जाता है?

कार्यान्वयन को वृद्धिशील पुनर्निर्माणों को ध्यान में रखकर बनाया गया था, लेकिन यह अभी तक समर्थित नहीं है (न ही इस RFC में शामिल है)।

निश्चिंत रहें, वास्तुकला तैयार है और इन सुविधाओं के स्थिर होने के बाद हम इसकी खोज करेंगे।
यही कारण है कि getStaticProps प्रति पृष्ठ परिभाषित किया गया है, और पूरे आवेदन के लिए एक बार नहीं!

मैं अस्थिर_गेटसेवरप्रॉप्स विधि का परीक्षण करना चाहता हूं, लेकिन ऐसा लगता है कि इस समय इसे अनदेखा कर दिया गया है [...]

getServerProps पूर्वावलोकन में अभी तक उपलब्ध नहीं है, क्षमा करें!

getServerProps पूर्वावलोकन में अभी तक उपलब्ध नहीं है, क्षमा करें!

सर उठाने के लिए धन्यवाद। मैं निश्चित रूप से इस धागे को देख रहा हूँ, क्योंकि जब वह भूमि मेरे पास एक _bunch_ कोड होता है जिसे किसी एकल फ़ंक्शन का नाम बदलकर बदला जा सकता है! मैं

कृपया स्पष्ट करें, मैं 100% निश्चित नहीं हूं कि getServerProps / getStaticProps वर्तमान में उपयोग के लिए उपलब्ध हैं या नहीं।

इस सूत्र पर आधारित: नहीं

लेकिन अगर ऐसा है, तो मैं सोच रहा हूं कि मेरे टर्मिनल ने इसका संकेत क्यों दिया जब मैंने next build चलाया, अगर वे अभी तक उपलब्ध नहीं हैं? संदेश देखकर मुझे प्रारंभिक कार्य धारणा के साथ छोड़ दिया गया था कि ये विधियां उत्पादन में थीं, और मुझे यह पता लगाने में कुछ समय लगा कि वे नहीं थे। बस तर्क के बारे में उत्सुक हूं या अगर कुछ ऐसा है जिसे मैं गलत समझ रहा हूं।

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

(अगले संस्करण 9.1.6 पर)

धन्यवाद

@stevenjchang वे pages/**/*.js में निम्नलिखित सिंटैक्स का उपयोग करके उपलब्ध हैं:

export function unstable_getStaticPaths() {} // return [{params: {...}}, ...]
export function unstable_getStaticProps({params: {...}) {} // return {props: {...}}

और मुझे यह भी जोड़ना चाहिए, वे अद्भुत हैं, हालांकि वे अभी भी देव सर्वर का उपयोग करते समय किनारों के आसपास थोड़े मोटे हैं।

हालांकि वे अभी भी देव सर्वर का उपयोग करते समय किनारों के आसपास थोड़े मोटे हैं।
@mikestopcontinues

क्या आप कृपया इसके बारे में विस्तार से बता सकते हैं? किसी और ने हमें देव सर्वर अनुभव के बारे में नकारात्मक प्रतिक्रिया नहीं दी है, और हम इसे हल करना पसंद करेंगे!

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

"हर लोड पर" से आपका मतलब पेज लोड से है? या पुनर्निर्माण? या...?

@mmmef हर बार जब आप एक ही रास्ते पर जाते हैं, तो यह json का फिर से अनुरोध करता है। इसलिए यदि आप दो पृष्ठों के बीच आगे-पीछे क्लिक करते हैं, तो आप डेटा की प्रतीक्षा में बहुत समय व्यतीत करते हैं।

@mikestopcontinues यह इच्छित व्यवहार है, क्योंकि सबसे अद्यतित डेटा अक्सर विकास में बेहतर होता है। एक नए मुद्दे में कुछ बेहतर उत्तराधिकारियों पर चर्चा करने के लिए तैयार होंगे!

@timneutkens यह RFC बहुत आशाजनक लग रहा है। मेरे पास सुरक्षा के बारे में कुछ प्रश्न/चिंताएं हैं, और यह वास्तव में कैसे काम करता है।

आइए एक सामान्य व्यावसायिक मामला लें जो SSR और SSG दोनों पर निर्भर करता है।

संदर्भ

हम एक वेबसाइट (उर्फ "ऐप") पर कुछ जानकारी प्रदर्शित करना चाहते हैं।
उन सूचनाओं को एक बीडीडी में संग्रहीत किया जाता है जो कि ग्राफक्यूएल एपीआई के माध्यम से सुलभ है।
उनमें से कुछ जानकारी सार्वजनिक हैं, कुछ निजी हैं (यानी: उपयोगकर्ता ईमेल/पासवर्ड)।

ऐप दो चरणों का उपयोग करता है:

• एक "स्टेजिंग" चरण, जहां ग्राहक स्टेजिंग ऐप में रीयल-टाइम परिवर्तन देख सकता है (वे उन सूचनाओं को कुछ बैक-ऑफ़िस या इसी तरह के माध्यम से अपडेट करते हैं)
• एक "उत्पादन" चरण, जहां ग्राहक की कोई पहुंच नहीं है और वह स्वयं कुछ भी अपडेट नहीं कर सकता है। प्रोडक्शन ऐप को अपडेट करने के लिए, एक नया परिनियोजन करना होगा। (वे अपने उक्त बैक-ऑफ़िस से एक नया उत्पादन परिनियोजन करने के लिए कहते हैं)

इस परिदृश्य में, हम SSR और SSG दोनों का उपयोग करते हैं:

• स्टेजिंग ऐप SSR का उपयोग करता है, क्योंकि यह वास्तविक समय में GraphQL API (पेज बनाते समय) से डेटा प्राप्त करता है।
• प्रोडक्शन ऐप SSG का उपयोग करता है, क्योंकि जब कोई नया परिनियोजन किया जाता है, तो यह GraphQL API से डेटा प्राप्त करता है और इसमें से स्टैटिक्स पेज उत्पन्न करता है (इसलिए वे स्थिर हैं और अब और नहीं बदलेंगे, GraphQL API से कोई प्रश्न नहीं किया जाएगा रनटाइम पर (पेज लोड करते समय कम से कम नहीं))

यह परिदृश्य पर्याप्त सामान्य होना चाहिए, और एसएसजी उपयोग के प्रमुख उपयोग मामलों में से एक (आईएमएचओ) होना चाहिए।
प्रोडक्शन ऐप स्टेजिंग ऐप के स्नैपशॉट से ज्यादा कुछ नहीं है।

कुछ प्रश्न:

1. क्या यह इस आरएफसी के साथ संभव है ? किसी दिए गए "स्टेज" (उत्पादन/मंचन) के आधार पर एक ही ऐप का अलग-अलग व्यवहार करना
2. ग्राफक्यूएल एपीआई से प्राप्त डेटा को कैसे इंजेक्ट किया जाता है?
   
   
   
   • स्टेजिंग में, वे एसएसआर, या सीएसआर के माध्यम से गतिशील रूप से प्राप्त किए जाते हैं क्योंकि उपयोगकर्ता पृष्ठों के माध्यम से नेविगेट करता है (और सीएसआर के दौरान प्राप्त होने पर ब्राउज़र पर उपलब्ध होगा)
   
   
   • उत्पादन में, वे निर्माण समय पर लाए जाते हैं, लेकिन फिर, क्या वे जेएस वैश्विक चर के भीतर संग्रहीत होते हैं और इस प्रकार किसी के द्वारा पढ़ा जा सकता है? (सुरक्षा चिंता, जैसा कि हमें पता होना चाहिए कि संवेदनशील डेटा प्राप्त नहीं करना चाहिए जो ब्राउज़र पर उपलब्ध कराया जा सकता है, जैसा कि सीएसआर का उपयोग करते समय किया जाता है)
   
   
3. क्या आपको मिश्रित SSR/SSG के साथ इस दृष्टिकोण से कोई सरोकार होगा? (सुरक्षा, प्रदर्शन, रखरखाव, आदि)

आप इसे कब जारी करने की योजना बना रहे हैं? क्या यह एक प्रमुख अद्यतन (v10), या पिछड़ा-संगत अद्यतन होगा?

अरे,

क्या आपने किसी कस्टम सर्वर के साथ इस समाधान की कोशिश की है और इसे काम कर रहे हैं?

उदाहरण:

// server.js

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/blog/:id', (req, res) => {
    console.log('My params needed be passed to page:', req.params);
    return app.render(req, res, '/blogDetail', { id: req.params.id });
  });

  server.listen(port, err => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

// blogDetail.js
export async function unstable_getStaticProps(props) {
  console.log('What is passed', props);

  return {};
}

const BlogPostPage = ({ post }) => {
  return <div>Hey</div>;
}

export default BlogPostPage;

# Terminal output

My params needed be passed to page: { id: 'test' }
What is passed { params: undefined }

क्यों नहीं getStaticProps में क्वेरी स्ट्रिंग शामिल है? मेरे पास वर्तमान में एक पृष्ठ है जिसे मुझे फिर से प्रस्तुत किए बिना क्वेरी पैरा प्राप्त करने के लिए बस एसएसआर करना है। useRouter हुक का उपयोग करने से कई पुन: रेंडर होते हैं, क्योंकि क्वेरी प्रारंभ में एक खाली वस्तु है। यह एक ऐसा पृष्ठ है जिसका उपयोग रूपांतरण ट्रैकिंग के लिए किया जाता है, तो जाहिर है, यह एक गैर-शुरुआतकर्ता है।

@pjaws RFC विशेष रूप से उल्लेख करता है getStaticProps स्थिर पीढ़ी के लिए है। स्टेटिक एचटीएमएल एक क्वेरीस्ट्रिंग प्राप्त नहीं कर सकता है।

फिर यह डायनामिक URL पैरामीटर क्यों प्राप्त कर सकता है? यह कैसे अलग है?

मंगलवार, 14 जनवरी, 2020 को पूर्वाह्न 1:30 बजे टिम न्यूटकेन्स नोटिफिकेशन @github.com
लिखा था:

@pjaws https://github.com/pjaws RFC में विशेष रूप से इसका उल्लेख है
getStaticProps स्थिर पीढ़ी के लिए है। स्टेटिक HTML प्राप्त नहीं कर सकता a
क्वेरी स्ट्रिंग।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/zeit/next.js/issues/9524?email_source=notifications&email_token=AMVRRIQCKDJNF4MPWSLYNV3Q5WA2NA5CNFSM4JRPBEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63issueLNMWW74239T
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/AMVRRIRJXLYC4MC4U7DH7NDQ5WA2NANCNFSM4JRPBELQ
.

क्योंकि getStaticPaths आपको उन पृष्ठों को वापस करना होगा जो निर्माण समय पर प्रस्तुत किए जाएंगे।

ये परिवर्तन हमेशा की तरह बहुत ही आशाजनक, बढ़िया काम लगते हैं! मैं

मैं पृष्ठों पर साझा की गई डेटा आवश्यकताओं को पूरा करने के लिए getInitialProps में _app.js होने के उपयोग के मामले के बारे में सोचता हूं (उदाहरण के लिए संदर्भ प्रदाताओं की स्थापना)। क्या मैं सही ढंग से समझता हूं कि getStaticProps का उसी तरीके से उपयोग करना असंभव है? इसे केवल अलग-अलग पृष्ठों में परिभाषित करना संभव है?

मैं पृष्ठों पर साझा की गई डेटा आवश्यकताओं को पूरा करने के लिए _app.js में getInitialProps होने के उपयोग के मामले के बारे में सोचता हूं (उदाहरण के लिए संदर्भ प्रदाताओं की स्थापना)। क्या मैं सही ढंग से समझता हूं कि getStaticProps का उसी तरह उपयोग करना असंभव है? इसे केवल अलग-अलग पृष्ठों में परिभाषित करना संभव है?

सही है, प्रारंभ में यह केवल अलग-अलग पृष्ठों के लिए होगा। बाद में पुनर्विचार कर सकते हैं। स्थिर HTML को निर्यात करते समय _app के getInitialProps को अभी भी कॉल किया जाएगा ताकि आप getStaticProps पर बढ़ते जा सकें।

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

यहां दो प्राथमिकताएं हैं - कि परिसंपत्ति लिंक का उपयोग इस तरह किया जाए।
लेकिन अधिक संभावना है - संपत्ति डाउनलोड करें, एचटीएमएल बनाएं (स्थानीय रूप से लिंक करें) और फिर एक सीडीएन को सामने रखें। यह कहीं अधिक स्वीकार्य अभ्यास है।

यह Netlify जैसी परिनियोजन प्रणालियों के उपयोग के साथ भी बहुत अच्छी तरह से जुड़ा हुआ है - जिसमें DatoCMS या Graphcms जैसी किसी चीज़ की तुलना में विश्व स्तर पर उपलब्ध बुनियादी ढाँचा कहीं अधिक उपयुक्त है। तो अगर मैं तैनाती के रूप में Netlify का उपयोग कर रहा हूं, तो मैं चाहता हूं कि सब कुछ Netlify डोमेन से परोसा जाए और इसे अपना जादू काम करने दें।

@sandys अगर मैं https://github.com/zeit/next.js/issues/9054#issuecomment -570427085 में सही ढंग से समझता हूं तो आपको संपत्ति डाउनलोड करनी होगी, उन्हें .next/static तहत स्टोर करना होगा और एक लिंक बनाना होगा अपने आप को getStaticProps ।

स्थिर एपीआई मार्ग रखने का भी विचार है, लेकिन मुझे यकीन नहीं है कि आप इसके साथ ब्राउज़र कैशिंग व्यवहार को कैसे नियंत्रित करेंगे।

@Janpot इसे जोड़ने के लिए धन्यवाद। वहां की टिप्पणियों से संकेत मिलता है कि इस सामान को रोल-योर-ओन होना है।

कृपया इसे बिल्ट-इन करने के लिए मेरा अनुरोध जोड़ें। शायद # 9054 अधिक सामान्य है, लेकिन मैं SSG के दृष्टिकोण से सोच रहा हूं और यह अत्यंत आवश्यक है।

मैं उल्लेख करना भूल गया, लेकिन SSG के लिए एसेट हैशिंग भी आवश्यक होगी।

@ होमोकी , उस काम को करने में सक्षम नहीं है, क्या आपने इस बीच कोई प्रगति की है?

@ होमोकी , उस काम को करने में सक्षम नहीं है, क्या आपने इस बीच कोई प्रगति की है?

यह संभव नहीं है और इसकी योजना भी नहीं है: #10071

मैं

@sandys वास्तव में समाधान बहुत आसान है जब आप https://github.com/zeit/next.js/issues/9081 का उपयोग करते हैं, उदाहरण के लिए /images से सीएमएस में एक पुनर्लेखन जोड़ने के लिए। उदाहरण के लिए ZEIT अब सही हेडर जोड़े जाने पर यह पहले से ही परिणाम को कैश कर देगा, अतिरिक्त डाउनलोडिंग (बिल्ड पर बड़े पैमाने पर ओवरहेड) की कोई आवश्यकता नहीं है।

@timneutkens उत्तर देने के लिए धन्यवाद।
पूरी तरह से सुनिश्चित नहीं है कि आपका क्या मतलब है। तो हम netlify का उपयोग करते हैं - क्या आप सुझाव दे रहे हैं कि हम CMS url को ऐसे ही रखें और इसके ऊपर CDN की एक परत सामने रखें?
मुझे यकीन नहीं है कि अगर netlify (क्लाउडफ्रंट जिसे हम उपयोग करने की योजना बना रहे हैं) इन सभी सेवाओं के साथ निर्बाध रूप से काम कर सकता है।

यदि छवियों को डाउनलोड किया जाता है और तैनाती का हिस्सा बनाया जाता है, तो यह पूरी समस्या व्यापक रूप से सरल हो जाती है। क्योंकि मैं आधार यूआरएल से कैश करने के लिए सीडीएन सेट करता हूं (जो मेरे मामले में एस 3 से परोसा जाएगा)।

पूरी तरह से निश्चित नहीं है कि क्या आपका समाधान Zeit Now का उपयोग करके मुझ पर आधारित है

यदि छवियों को डाउनलोड किया जाता है और तैनाती का हिस्सा बनाया जाता है, तो यह पूरी समस्या व्यापक रूप से सरल हो जाती है। क्योंकि मैं आधार यूआरएल से कैश करने के लिए सीडीएन सेट करता हूं (जो मेरे मामले में एस 3 से परोसा जाएगा)।

यह वास्तव में निर्माण प्रक्रिया को और अधिक जटिल और 10x धीमा बनाता है, निश्चित रूप से सरल नहीं है।

पूरी तरह से निश्चित नहीं है कि क्या आपका समाधान Zeit Now का उपयोग करके मुझ पर आधारित है

दुनिया में हर प्रॉक्सी के साथ काम करता है। क्लाउडफ्रंट सहित।

@timneutkens हम वास्तव में निर्माण प्रक्रिया समय के लिए अज्ञेयवादी हैं। इससे कोई फर्क नहीं पड़ता कि इसमें अधिक समय लगता है। लेकिन कई कारणों से (ज्ञात आधार url से परोसी जा रही सभी संपत्तियों सहित), इसे बिल्ड में बेक किया जाना अत्यधिक बेहतर होगा।

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

इसके अलावा, मुझे क्षमा करें, लेकिन मुझे आपका समाधान समझ में नहीं आया। हमें इसे कैसे कॉन्फ़िगर करना चाहिए? मेरे पास नियंत्रण नहीं है कि सीएमएस किस यूआरएल का उपयोग करता है। उदाहरण के लिए, Datocms से की सेवा शुरू होता है www.datocms-assets.com/ । हम #9081 में समाधान का उपयोग कैसे करते हैं?

हम वास्तव में निर्माण प्रक्रिया समय के प्रति अज्ञेयवादी हैं। इससे कोई फर्क नहीं पड़ता कि इसमें अधिक समय लगता है

यह आपके आवेदन के लिए सही हो सकता है, लेकिन अधिकांश अनुप्रयोगों के लिए ऐसा नहीं है।

लेकिन कई कारणों से (ज्ञात आधार url से परोसी जा रही सभी संपत्तियों सहित), इसे बिल्ड में बेक किया जाना अत्यधिक बेहतर होगा।

यह वास्तव में कहा जाना जरूरी नहीं है, आप एक पुनर्लेखन का उपयोग कर सकते हैं जो /images/* को cms url के लिए प्रॉक्सी करता है, उदाहरण के लिए www.datocms-asset.com/* या इसी तरह के। और फिर /images का उपयोग करके सभी छवियों को लिंक करें।

ध्यान दें कि यह ऑफ-टॉपिक होना शुरू हो रहा है।

@sandys वास्तव में समाधान बहुत आसान होता है जब आप # 9081 का उपयोग उदाहरण/छवियों से सीएमएस में एक पुनर्लेख जोड़ने के लिए करते हैं। उदाहरण के लिए ZEIT अब सही हेडर जोड़े जाने पर यह पहले से ही परिणाम को कैश कर देगा, अतिरिक्त डाउनलोडिंग (बिल्ड पर बड़े पैमाने पर ओवरहेड) की कोई आवश्यकता नहीं है।

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

1. छवियों का अनुकूलन
2. छवियों को हैश करना और इस हैश के तहत उनकी सेवा करना
3. छवि url से हैश किए गए छवि url के लिए एक नक्शा प्रदान करें जिसे CMS पर अपने अपरिवर्तनीय समकक्ष के लिए छवि url को रीमैप करने के लिए getStaticProps में डाउनलोड किया जा सकता है

जो, मुझे लगता है, असंभव नहीं है। बस यह सुनिश्चित करना चाहते हैं कि यह प्रस्तावित सेटअप है।

@Janpot CMS प्रदाता पहले से ही छवियों आदि के लिए एक अद्वितीय url देकर इसे संभालते हैं।

यह आपके आवेदन के लिए सही हो सकता है, लेकिन अधिकांश अनुप्रयोगों के लिए ऐसा नहीं है।

फिर, मैं यहाँ अकेला नहीं हूँ। इसी तरह के कई अनुरोध हैं। मैं आपसे अनुरोध करता हूं कि इस पर विचार करें।

https://spectrum.chat/next-js/general/how-would-you-handle-importing-remote-images-on-nextjs-static-export~30b2ba84-bc27-4da7-9ec8-21e4d5d287a3

गैट्सबी साइड पर भी - https://github.com/gatsbyjs/gatsby/issues/14076

https://spectrum.chat/gatsby-js/general/adding-remote-images-during-node-creation~e704e6fb-24b2-46c6-b1fc-93189d2e28a4

https://github.com/njosefbeck/gatsby-source-stripe/#downloading -files

@sandys यह SSG RFC से असंबंधित है इसलिए रिलीज़ होने पर एक नया मुद्दा बनाने के लिए स्वतंत्र महसूस करें।

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

लेकिन, जैसा आप चाहते हैं - अपने निर्णय का सम्मान करें।

लेकिन यह कुछ ऐसा है जो next export वर्तमान में भी नहीं करता है। इसलिए यह पूरी तरह से नई बात क्यों है और इस RFC से असंबंधित है।

यह getServerProps और ऑन-डिमांड रेंडरिंग के साथ भी नहीं होगा।

@Janpot CMS प्रदाता पहले से ही छवियों आदि के लिए एक अद्वितीय url देकर इसे संभालते हैं।

हाँ, यह समझ में आता है। लेकिन इसका मतलब यह भी है कि यदि आप अपने प्रोजेक्ट में छवियों का उपयोग करते हैं और आप उन्हें अनुकूलित और कैश्ड करना चाहते हैं, तो आपके पास 2 विकल्प हैं:

1. एक कस्टम वेबपैक सेटअप बनाएं
2. बाहरी सीएमएस का उपयोग करें

संपादित करें:

और अगर मैं सही ढंग से समझूं, तो file-loader पहले से ही CSS के लिए शामिल है। क्या यह JS के लिए भी इसे सक्षम करने की बात नहीं है?

@Janpot संदीप ने जिस विशिष्ट बिंदु का उल्लेख किया है, वह यह है कि यूआरएल बाहरी स्रोत से आएगा, न कि परियोजना से। फ़ाइल-लोडर को डिफ़ॉल्ट रूप से शामिल करना एक अलग सुविधा अनुरोध है।

मैंने देखा है कि ZEIT Now में तैनात साइटों के लिए, जब मेरे पास नए स्थिर API का उपयोग करते हुए एक गतिशील URL वाला पृष्ठ होता है, तो उन पृष्ठों के लिए जो unstable_getStaticPaths का उपयोग करके स्थिर रूप से उत्पन्न नहीं होते हैं, फ़ंक्शन unstable_getStaticProps 404 लौटाने के बजाय रनटाइम पर सर्वर पर चलता है।

उदाहरण के लिए मेरे पास एक पृष्ठ है /blog/[slug].js , जिसका getStaticPaths सरणी देता है:

[{ params: { slug: 'hello' } }]

और मेरे getStaticProps में स्लग के आधार पर फ़ाइल पढ़ने के लिए कुछ तर्क हैं। जब मैं /blog/hello पर जाता हूं, तो पृष्ठ अपेक्षित रूप से पहले से रेंडर किया जाता है, लेकिन जब मैं /blog/doesnt-exist जैसे किसी अमान्य पृष्ठ पर जाता हूं, तो getStaticProps रनटाइम पर चलता है और मुझे इसके बजाय 500 त्रुटि मिलती है a 404. या यदि मैं त्रुटि प्रबंधन जोड़ता हूं, तो पृष्ठ getStaticPaths से आउटपुट में सूचीबद्ध नहीं होने के बावजूद, 404 के बजाय रेंडर करता है।

क्या यह तर्क जानबूझकर है?

यह एक महान सुधार है। ऐसा करने के लिए हम बस कुछ प्री-बिल्ड स्क्रिप्ट लिखने वाले थे।
मैंने अपनी एक साइट को अगले 9.2 पर unstable_getStaticPaths और unstable_getStaticProps पर ले जाने का परीक्षण किया, और इसने अच्छा काम किया।

exportPathMap की तुलना में हमारे पास एक प्रतिगमन है: exportPathMap का उपयोग करके पथ बनाते समय, आप कुछ इस तरह निर्दिष्ट कर सकते हैं:

{
 "/path/to/page": {page: "/index", query: { pageId: 123 } }
}

और स्थिर निर्माण का निर्माण होगा

/path
   /to
     /page
       index.html

जब आप टेम्पलेट [slug].jsx unstable_getStaticPaths से समतुल्य लौटाते हैं,

[{ slug: '/path/to/page' }]

अगला 9.2 नेस्टेड निर्देशिकाओं के बजाय '%2Fpath%2Fto%2Fpage' उत्पन्न करता है।

/%2Fpath%2Fto%2F
   index.html

हम किस प्रकार पृष्ठों का निर्माण कर रहे हैं, इसके लिए निर्देशिकाओं का निर्माण (मौजूदा ExportPathMap व्यवहार से मेल खाना) महत्वपूर्ण है। हम एक एकल टेम्पलेट फ़ाइल का उपयोग करते हैं लेकिन प्रकाशित पथ को मनमाने ढंग से नेस्ट किया जा सकता है।

@dpfavand उस स्थिति में आप एक कैच-ऑल रूट का उपयोग करना चाहेंगे: https://nextjs.org/blog/next-9-2#catch -all-dynamic-routes

संभावित रूप से जब आप स्लैश सहित पथ वापस करने का प्रयास करते हैं तो हम चेतावनी दे सकते हैं, लेकिन [slug].js का उपयोग करते समय व्यवहार सही है, आपके मामले में आप [...slug].js ।

इसके कब उतरने की उम्मीद है? क्या यह 9.2 के पैच में होगा या इसका अपना छोटा संस्करण होगा?

हम वास्तव में इस सुविधा के प्रति उत्साह की सराहना करते हैं। जैसा कि कहीं और उल्लेख किया गया है, हम आम तौर पर सुविधाओं के लिए समयसीमा साझा नहीं करते हैं क्योंकि हम यह सुनिश्चित करना चाहते हैं कि उनके पास सही डेवलपर अनुभव, बाधाएं और भविष्य का प्रमाण है।

जैसा कि यह एक नई सुविधा है, यह मामूली होगी।

हाँ, मैं इसे सामान्य रूप से समझ सकता हूँ लेकिन 9.1.7 ब्लॉग ने छाप छोड़ी
यह पहले से ही जंगली में था।

शुक्र, १७ जनवरी, २०२० को शाम ५:०५ बजे टिम न्यूटकेन्स नोटिफिकेशन @github.com
लिखा था:

हम वास्तव में इस सुविधा के प्रति उत्साह की सराहना करते हैं। उल्लेखानुसार
अन्य जगहों पर हम आमतौर पर सुविधाओं के लिए समयसीमा साझा नहीं करते हैं जैसा हम चाहते हैं
सुनिश्चित करें कि उनके पास सही डेवलपर अनुभव, बाधाएं और भविष्य है
सबूत-नेस।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपने टिप्पणी की थी।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/zeit/next.js/issues/9524?email_source=notifications&email_token=ADKINGF724256WCEFHBFIH3Q6ITRXA5CNFSM4JRPBEL2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJ57N5133
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/ADKINGBVCG6MFMOG5U2FGMDQ6ITRXANCNFSM4JRPBELQ
.

>

लैसिटर ग्रेग
[email protected] [email protected]
सेल (832) 495-9903

क्या getStaticProps जैसा कुछ है लेकिन यह प्रति पृष्ठ के बजाय पूरे ऐप के लिए केवल एक बार चलता है?

मेरा उपयोग मामला यह है कि मेरे पास एक प्रतिक्रिया संदर्भ ( PricingPlansContext ) है जिसका उपयोग कई पृष्ठों द्वारा किया जाता है और मैं चाहता हूं कि डेटा (मूल्य निर्धारण योजनाएं) मेरे बाहरी सर्वर से केवल एक बार, निर्माण समय पर पुनर्प्राप्त की जाए ( next export )। कभी भी रनटाइम पर और प्रत्येक पृष्ठ से getStaticProps जोड़े बिना।

संपादित करें: ऊपर एक संबंधित टिप्पणी मिली: https://github.com/zeit/next.js/issues/9524#issuecomment -574179540। उम्मीद है कि इस पर विचार किया जाएगा।

मैं उसके लिए babel plugin-preval` का उपयोग करता हूं, हालांकि मैंने लोगों को a . लिखते हुए भी देखा है
json फ़ाइल ExportPathMa () के भीतर next.config.js के साथ, जिसे वे तब आयात करते हैं
उनके कोड के भीतर।

मैंने अभी के लिए एक एनपीएम स्क्रिप्ट का उपयोग करके एक जेसन फ़ाइल लिखना समाप्त कर दिया है, लेकिन निर्यातपाथ मैप का सुझाव देने के लिए धन्यवाद, शायद यह एक बेहतर जगह है।

@dpfavand उस स्थिति में आप एक कैच-ऑल रूट का उपयोग करना चाहेंगे: https://nextjs.org/blog/next-9-2#catch -all-dynamic-routes

संभावित रूप से जब आप स्लैश सहित पथ वापस करने का प्रयास करते हैं तो हम चेतावनी दे सकते हैं, लेकिन [slug].js का उपयोग करते समय व्यवहार सही है, आपके मामले में आप [...slug].js ।

@timneutkens फॉलो-अप के लिए धन्यवाद। मैंने सफलता के बिना दो तरीकों की कोशिश की है। मूल रूप से स्लग मान को getStaticPaths में एक स्ट्रिंग के रूप में निर्दिष्ट करते समय, यह getStaticProps बिल्कुल भी पारित नहीं होता है। स्लग मान को सरणी के रूप में वापस करते समय, बिल्ड विफल हो जाता है क्योंकि मान एक स्ट्रिंग होना चाहिए।

केस 1, फ़ाइल को pages/[...slug].jsx मानते हुए, स्ट्रिंग के रूप में स्लग करें:

export async function unstable_getStaticPaths() {
    return [{ params: { slug: 'en/about' } }];
}

export async function unstable_getStaticProps({ params }) {
    console.log('params', params);
    return { slug: params.slug };
}

उपरोक्त मामले में, params में getStaticProps एक खाली वस्तु है - कोई slug कुंजी नहीं।

केस 2, pages/[...slug].jsx , सरणी के रूप में स्लग,

export async function unstable_getStaticPaths() {
    const allPaths = Object.keys(pathMap).map(slug => ({ params: { slug } }));
    return [{ params: { slug: ['en', 'about'] } }];
}
export async function unstable_getStaticProps({ params }) {
    console.log('params', params);
    return { slug: params.slug };
}

मामले 2 में, बिल्ड विफल रहता है

> Build error occurred
{ Error: A required parameter (slug) was not provided as a string.
    at _validParamKeys.forEach.validParamKey (/project/node_modules/next/dist/build/utils.js:21:569)
    at Array.forEach (<anonymous>)
    at toPrerender.forEach.entry (/project/node_modules/next/dist/build/utils.js:21:495)
    at Array.forEach (<anonymous>)
    at Object.isPageStatic (/project/node_modules/next/dist/build/utils.js:17:122)
    at process._tickCallback (internal/process/next_tick.js:68:7) type: 'Error' }

मुझे ऊपर दिए गए getStaticPaths उदाहरणों में केवल पथ पैरामीटर दिखाई देते हैं। क्या एसएसजी पथों के लिए यह संभव होगा जिसमें क्वेरी पैराम शामिल हों? उदाहरण के लिए:

/store/widgets/circles-n-squares?sort=price&minWeight=2&color=black

मैं विशेष रूप से एक ई-कॉमर्स साइट के दृष्टिकोण से सोच रहा हूं, जहां एक यूआरएल के pathname में उत्पाद खोज के हर एक पहलू को कवर करना मुश्किल होगा।

मैंने हाल ही में यहां एक संदेश पोस्ट किया है और वापस नहीं सुना है - अनिवार्य रूप से, getStaticProps getServerProps तरह व्यवहार कर रहा है जब कोई साइट ZEIT Now पर तैनात की जाती है (यानी getStaticPaths अनदेखा करना और अनुरोधों को संभालना गतिशील रूप से) - मुझे लगता है कि यह एक बग है?

@dpfavand मैं भी सटीक चीज़ का अनुभव कर रहा हूँ! सीएमएस में पृष्ठों के आधार पर गतिशील पेज रूटिंग के साथ चपलता सीएमएस और नेक्स्टजे के लिए एक

@timneutkens फॉलो-अप के लिए धन्यवाद। मैंने सफलता के बिना दो तरीकों की कोशिश की है। मूल रूप से स्लग मान को getStaticPaths में एक स्ट्रिंग के रूप में निर्दिष्ट करते समय, यह getStaticProps बिल्कुल भी पारित नहीं होता है।

केस 1, फ़ाइल को pages/[...slug].jsx मानते हुए, स्ट्रिंग के रूप में स्लग करें:

export async function unstable_getStaticPaths() {
  return [{ params: { slug: 'en/about' } }];
}

export async function unstable_getStaticProps({ params }) {
  console.log('params', params);
  return { slug: params.slug };
}

उपरोक्त मामले में, params में getStaticProps एक खाली वस्तु है - कोई slug कुंजी नहीं।

बीटीडब्ल्यू, छोटी सी दुनिया! Fastr_conf पर बोलने के लिए फिर से धन्यवाद।

हाय @timneutkens ,

मैं next.js को एक स्थिर साइट जनरेटर की तरह व्यवहार करने के विचार से बहुत उत्साहित हूं।

मैं पूछना चाहता हूं कि कैसे getStaticProps और getStaticPaths विधियों का उपयोग उस स्थिति में किया जा सकता है जब डेटा का एक बड़ा हिस्सा एक बार अनुरोध किया जाता है और फिर विभिन्न पृष्ठों को उत्पन्न करने के लिए उपयोग किया जाता है।

उदाहरण के लिए, मैं एक एपीआई-आधारित सीएमएस के जावास्क्रिप्ट एसडीके क्लाइंट का उपयोग कर रहा हूं जिसमें सभी उपलब्ध वस्तुओं को लाने की एक विधि है। इनमें से कुछ ऑब्जेक्ट साइट पृष्ठों का प्रतिनिधित्व करते हैं।

const entries = await cmsSdkCient.getEntries();

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

1. अपने डेटा और ssr: true साथ पृष्ठों का नक्शा प्रदान करता है जो निर्यात समय पर getInitialProps द्वारा उपभोग किया जाता है
2. वही डेटा लिखता है, इस बार ssr: false , init-props.json फाइलों के साथ, प्रत्येक पृष्ठ के पथ से मेल खाने वाले फ़ोल्डर में रखा गया है। फिर, जब क्लाइंट से getInitialProps को कॉल किया जाता है, तो आवश्यक डेटा मिलान किए गए पृष्ठ के init-props.json से लोड किया जाता है।

module.exports = {
  exportTrailingSlash: true,
  exportPathMap: (defaultPathMap, { outDir }) => {
    // load data from CMS
    const objects = await cmsSdkCient.getEntries();

    // create map between page paths and page data
    return objects.reduce((accum, object) => {

      // if the object does not have a slug, it is not a page
      if (!object.slug) return accum;

      const pagePath = '/' + object.slug;
      const ssrQueryData = Object.assign({ ssr: true }, object);
      const clientQueryData = Object.assign({ ssr: false }, object);

      // generate the map for export phase with {ssr: true}
      accum[pagePath] = {
        // using additional fields from the page object,
        // the pageFromPagePath() computes which page file should
        // be used to render the page object
        page: pageFromPagePath(object),
        query: ssrQueryData
      };

      // write json files that will be loaded by client
      if (outDir) {
        const jsonFilePath = path.join(outDir, _.trim(pagePath, '/'), 'init-props.json');
        fse.outputFileSync(jsonFilePath, JSON.stringify(clientQueryData));
      }

      return accum;
    }, {});
  }
}

Index.getInitialProps = async (context) => {
  const ssr = _.get(context, 'query.ssr', false);
  if (ssr) {
    // we are on server, return the data
    return _.get(context, 'query', {});
  } else {
    // we are on client side, request the data through /init-props.json endpoint
    const url = context.asPath + '/init-props.json';
    return fetch(url).then(response => {
      return response.json();
    });
  }
};

मैं getStaticProps और getStaticPaths विधियों का उपयोग करने का बड़ा लाभ देख सकता हूं जो JSON फ़ाइलों को सहेजने और क्लाइंट से उन्हें लोड करने से संबंधित मेरे अधिकांश कोड को कम कर देगा।

// pages/my_page.js
export async function getStaticProps(context) {
  const objects = await cmsSdkCient.getEntries();
  const props = _.find(object, { type: 'my_page' })
  return { props };
}

// pages/blog/[slug].js
export async function getStaticProps(context) {
  const objects = await cmsSdkCient.getEntries();
  const props = _.find(object, { type: 'post', slug: context.params.slug })
  return { props };
}

export async function getStaticPaths() {
  const objects = await cmsSdkCient.getEntries();
  return objects
    .filter(object => object.type === 'post')
    .map(object => ({ params: { slug: object.slug } }))
}

मुझे क्या परेशानी है, यह सवाल है कि मैं हर बार getStaticProps या getStaticPaths को कॉल करने के बजाय सभी प्रविष्टियों को एक बार लाने के लिए वर्कफ़्लो को कैसे अनुकूलित कर सकता हूं?

एक और सवाल, जरूरी नहीं कि इस मुद्दे से संबंधित हो, लेकिन क्योंकि हम एसएसजी और दूरस्थ डेटा स्रोतों की दुनिया में हैं, यह पूछने लायक है। यह मानते हुए कि next.js देव मोड में चलता है, कोई कैसे next.js को इन तरीकों को फिर से निष्पादित करने के लिए सूचित कर सकता है ताकि दूरस्थ डेटा को फिर से प्राप्त किया जा सके और साइट को फिर से बनाया जा सके।

@smnh चूंकि यह "सिर्फ जावास्क्रिप्ट" है, आप एक बार अपनी प्रविष्टियां प्राप्त कर सकते हैं और परिणामों को अपने डेटा लाने के तरीके में कैश कर सकते हैं। जब इसे किसी अन्य पृष्ठ की getStatic* विधियों में फिर से लागू किया जाता है, तो नेटवर्क फिर से हिट नहीं होगा।

जहाँ तक आपके दूसरे प्रश्न का प्रश्न है, यह अपने आप हो जाता है। next dev चलाएं और आप जाने के लिए तैयार हैं।

मुझे ऊपर दिए गए getStaticPaths उदाहरणों में केवल पथ पैरामीटर दिखाई देते हैं। क्या एसएसजी पथों के लिए यह संभव होगा जिसमें क्वेरी पैराम शामिल हों? उदाहरण के लिए:

/store/widgets/circles-n-squares?sort=price&minWeight=2&color=black

मैं विशेष रूप से एक ई-कॉमर्स साइट के दृष्टिकोण से सोच रहा हूं, जहां एक यूआरएल के pathname में उत्पाद खोज के हर एक पहलू को कवर करना मुश्किल होगा।

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

@dpfavand मैं भी सटीक चीज़ का अनुभव कर रहा हूँ! सीएमएस में पृष्ठों के आधार पर गतिशील पेज रूटिंग के साथ चपलता सीएमएस और नेक्स्टजे के लिए एक

@timneutkens फॉलो-अप के लिए धन्यवाद। मैंने सफलता के बिना दो तरीकों की कोशिश की है। मूल रूप से स्लग मान को getStaticPaths में एक स्ट्रिंग के रूप में निर्दिष्ट करते समय, यह getStaticProps बिल्कुल भी पारित नहीं होता है।
केस 1, फ़ाइल को pages/[...slug].jsx मानते हुए, स्ट्रिंग के रूप में स्लग करें:

export async function unstable_getStaticPaths() {
    return [{ params: { slug: 'en/about' } }];
}

export async function unstable_getStaticProps({ params }) {
    console.log('params', params);
    return { slug: params.slug };
}

उपरोक्त मामले में, params में getStaticProps एक खाली वस्तु है - कोई slug कुंजी नहीं।

बीटीडब्ल्यू, छोटी सी दुनिया! Fastr_conf पर बोलने के लिए फिर से धन्यवाद।

अरे! Nextjs टीम ने इसे संबोधित करना शुरू कर दिया, वर्तमान कैनरी कार्यान्वयन के साथ कुछ अतिरिक्त मुद्दों को संबोधित करने के लिए एक टिकट खुला है: https://github.com/zeit/next.js/issues/10190

@smnh मैं जो कर रहा हूं वह एक स्क्रिप्ट है जो साझा सामग्री को

पुनर्निर्माण के लिए, प्रासंगिक सामग्री में परिवर्तन होने पर Netlify बिल्ड हुक को ट्रिगर करने के लिए मेरे पास CMS में वेबहुक स्थापित हैं। GetStaticProps तब केवल पृष्ठ विशिष्ट सामग्री प्राप्त कर सकता है।

धन्यवाद @zeusdeux
पुनः:

जहाँ तक आपके दूसरे प्रश्न का प्रश्न है, यह अपने आप हो जाता है। अगला देव चलाएं और आप जाने के लिए अच्छे हैं।

अगर मैं उन्हें मॉड्यूल में कैश करता हूं और फिर सीएमएस में डेटा बदलता हूं, तो कैश कैसे अमान्य हो जाएगा और dev द्वारा फिर से चलाया जाएगा, लेकिन next.js को रोके बिना और इसे फिर से चलाए बिना :)

अगर मैं उन्हें मॉड्यूल में कैश करता हूं और फिर सीएमएस में डेटा बदलता हूं, तो कैश कैसे अमान्य हो जाएगा और dev द्वारा फिर से चलाया जाएगा, लेकिन next.js को रोके बिना और इसे फिर से चलाए बिना :)

getStaticPaths केवल एक उत्पादन निर्माण में लागू किया जाता है, इसलिए आप केवल उस फ़ंक्शन से कॉल किए जाने पर मॉड्यूल स्थिति में कैश करने के लिए फ़ेचिंग विधि बता सकते हैं।

अरे, मैंने नहीं देखा कि कोई भी उसी मुद्दे पर चलता है जैसा मैंने किया था।

मान लें कि मेरे पास कई मार्गों पर एक ही पृष्ठ है unstable_getStaticProps :

1. /providers/[category]/[city] 
2. /providers/[category] 

स्रोत कोड दोनों पृष्ठों के लिए समान है, इसलिए डुप्लिकेट करने की कोई आवश्यकता नहीं है। तो पहली फ़ाइल के लिए तर्क के साथ स्रोत कोड होता है, दूसरा केवल export { default } from './[city]'; जैसे पहले वाले को आयात करता है।

लेकिन यह एक त्रुटि फेंकता है कि getStaticProps से डेटा अपरिभाषित है। अगर मैं दोनों फाइलों में एक ही कोड को हार्डकॉपी करता हूं तो यह काम करता है।

@homoky आपको विधियों को फिर से निर्यात करने की आवश्यकता है:

export { default, unstable_getStaticProps } from './[city]';

मैं एसएसजी की कोशिश कर रहा हूं, लेकिन भाग्य के बिना।

एसएसजी में v9.2.1 परिणाम के साथ कोड नीचे होना चाहिए?

function Page({ stars }) {
  return <div>Next stars: {stars}</div>
}

Page.unstable_getStaticProps = async ctx => {
  return { props: { stars: 5 } }
}

export default Page

next build से मेरा कंसोल आउटपुट दिखाता है:

Page                                                           Size     First Load
┌ ○ /                                                          354 B       72.1 kB
...
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

@joostmeijles unstable_getStaticProps को पृष्ठ घटक से संलग्न करने के बजाय निर्यात करने की आवश्यकता है, उदाहरण के लिए

export const unstable_getStaticProps = async () => {
  return {
    props: { stars: 5 }
  }
}

@joostmeijles unstable_getStaticProps को पृष्ठ घटक से संलग्न करने के बजाय निर्यात करने की आवश्यकता है, उदाहरण के लिए

export const unstable_getStaticProps = async () => {
  return {
    props: { stars: 5 }
  }
}

धन्यवाद, यह इसे हल करता है।

यदि कोई इसका एक एंड-टू-एंड कामकाजी उदाहरण देखना चाहता है, तो एक कैच-ऑल रूट के साथ डायनेमिक पेज (सीएमएस से) बनाना और एसएसजी चेक आउट करना चाहता है https://github.com/agility/agilitycms-next-starter- एस एस जी

मैं एक-दो बार स्टम्प्ड हो गया और लगा कि यह दूसरों के लिए मददगार हो सकता है।

zeit.co/now पर परिनियोजन करते समय मैं getStaticProps साथ निर्माण के दौरान अगले API मार्गों तक कैसे पहुँच सकता हूँ? आइसोमॉर्फिक-फ़ेच के लिए एक संपूर्ण URL की आवश्यकता होती है; स्थानीय रूप से यह http://localhost : 3000 के साथ काम करता है लेकिन अब तैनाती के साथ नहीं (या मैंने इसे गलत किया ‍♂️)। कोई विचार?

अगर मैं सही हूं, तो एपीआई मार्गों को सर्वर रहित कार्यों के रूप में तैनात किया जा रहा है और मुझे लगता है कि वे निर्माण प्रक्रिया के दौरान तैयार नहीं हैं?

आप सीधे अपने एपीआई मार्ग के कार्य को कॉल करना चाहेंगे क्योंकि यह http पर जाने से बहुत कम ओवरहेड है।

आप सीधे अपने एपीआई मार्ग के कार्य को कॉल करना चाहेंगे क्योंकि यह http पर जाने से बहुत कम ओवरहेड है।

कोई भी संसाधन जो मैं उस विषय के बारे में दस्तावेज़ों में पढ़ सकता हूँ? मैं zeit.co/now पर माइग्रेशन के बीच में हूं :)

काफी शाब्दिक रूप से लिया गया, आयात करें और फ़ंक्शन को कॉल करें:

import MyFunction from '../lib/somewhere'


export async function /* unstable_ */getStaticProps() {
  const result = await MyFunction()
}

एक और सवाल: क्या getStaticProps / getStaticPaths और getServerProps साथ-साथ उपयोग करना संभव होगा? उदाहरण के लिए यदि मैंने एसएसजी के साथ कुछ पेज प्रीरेंडर किए हैं, लेकिन अगर सीडीएन कैश में कोई नहीं मिलता है, तो यह पेज ऑन-डिमांड बनाने के लिए एसएसआर पर वापस आ जाएगा?

getStaticProps SSR में वापस आ जाएगा और परिणाम को कैशे में जोड़ देगा,

getStaticProps SSR में वापस आ जाएगा और परिणाम को कैशे में जोड़ देगा,

@lfades , अगर मैं आपको सही ढंग से समझता हूं, तो मैं इसके बारे में सुपर हूं, क्योंकि इसका मतलब है कि मैं समय से पहले कई हजार पृष्ठों को देखने और उत्पन्न करने के बजाय कुछ लोकप्रिय पृष्ठों को प्री-रेंडर कर सकता हूं।

लेकिन सिर्फ यह सुनिश्चित करने के लिए कि मैं समझता हूं... मान लें कि मेरे पास /products/[productId].js गतिशील पथ पृष्ठ है। अगर मैं getStaticProps , और getStaticPaths से सीमित संख्या में परिणाम की आपूर्ति करता हूं, तो आप कह रहे हैं कि सीडीएन कैश में /products/123 नहीं मिला है (क्योंकि यह था' t में getStaticPaths ), यह SSR पर वापस आ जाएगा, getStaticProps चलाएगा, और फिर परिणाम को एक स्थिर पृष्ठ के रूप में कैश करेगा?

अनुवर्ती प्रश्न: यदि मैं getStaticPaths आपूर्ति बिल्कुल नहीं करता तो क्या यह भी काम करेगा?

@flintinatux हाँ और हाँ

getStaticProps SSR में वापस आ जाएगा और परिणाम को कैश में जोड़ देगा

यह एक समस्या है क्योंकि 404s करने का कोई तरीका नहीं है, क्योंकि getStaticProps res ऑब्जेक्ट को बदलने की अनुमति नहीं देता है - फ़ंक्शन कॉल के दौरान कोई त्रुटि होने पर या तो यह 200, या 500 होगा।

क्या इसे बदलने की योजना है?

@ davidbailey00 स्थिर वेबसाइट बनाते समय 404 पृष्ठों में पहले से ही 404 स्थिति कोड नहीं होता है।

बेशक अगर मैं एक पूर्ण स्थिर निर्यात करता हूं तो स्टेटस कोड करने का कोई तरीका नहीं है, क्योंकि सब कुछ सिर्फ एक फाइल है। मैं getStaticProps का उपयोग करके ZEIT Now में हाइब्रिड साइटों को तैनात करने के बारे में बात कर रहा हूं - ऐसा लगता है कि इसे getStaticPaths सम्मान करना चाहिए और 404 पृष्ठों की सेवा करनी चाहिए, बजाय इसके कि गतिशील पथ से मेल खाने वाले सभी पृष्ठों को इस पर ध्यान दिए बिना बलपूर्वक प्रस्तुत किया जाए।

यह सिर्फ अब पर काम नहीं करता है, वैसे ही next start ।

मैं दोहराता हूँ जैसा कि पहले कहा गया था: यह प्रायोगिक है और व्यवहार में कुछ भी अभी भी बदल सकता है।

लेकिन getServerProps या getInitialProps साथ 404 पृष्ठों की सेवा करना संभव है - यदि getStaticProps प्रतिक्रिया कोड पर विचार करते समय getStaticPaths अनदेखा करता है तो यह किसी भी साइट के लिए पूरी तरह से अव्यवहारिक है जो परवाह करता है अच्छा एसईओ।

हम शायद स्थिति कोड को संभालने के और तरीके पेश करेंगे, लेकिन ध्यान रखें कि अधिकांश स्थिर साइटें (जैसे सीआरए) /* से index.html जहां 404 अभी भी 200 है।

हाय दोस्तों, मेरा एक सीधा सवाल है, मैं कुछ पेजों को SSG में नए [unstable_]getStaticProps का उपयोग करके एक साधारण वेबसाइट बना रहा हूं। amp के अपवाद के साथ, यह अब तक ठीक काम कर रहा है।

यदि किसी पृष्ठ में [unstable_]getStaticProps , तो amp अक्षम है। यहाँ एक सरल उदाहरण अगले v9.2.1 के साथ काम कर रहा है जहाँ आप इसे देख सकते हैं:

import React from "react";
import { useAmp } from "next/amp";

export const config = { amp: `hybrid` };

const AmpExample = ({ date }) => {
  const isAmp = useAmp();
  return (
    <>
      <p>
        Welcome to the {isAmp ? `AMP` : `normal`} version of the Index page!!
      </p>
      <p>date: {date}</p>
    </>
  );
};
/**
 * If I get the dynamic data from getStaticProps,
 * page is SSG render but AMP is disabled when accessing
 * with `/ampExample?amp=1`
 */
export async function unstable_getStaticProps() {
  return {
    props: {
      date: new Date().toISOString(),
    },
  };
}

/**
 * If I get the dynamic data from getInitialProps,
 * page is SSR render but AMP is disabled when accessing
 * with `/ampExample?amp=1`
 */
// AmpExample.getInitialProps = () => {
//   return { date: new Date().toISOString() }
// }
export default AmpExample;

डेटा के साथ पेज SSG और amp काम करने के तरीके को समझने में कोई मदद?

नमस्ते, App घटक ( _app.tsx ) के लिए getStaticProps का समर्थन कैसे करें, यानी निर्माण चरण के दौरान सभी पृष्ठ घटकों के लिए सामान्य डेटा लाने जैसे मामलों के लिए?

नमस्ते, App घटक ( _app.tsx ) के लिए getStaticProps का समर्थन कैसे करें, यानी निर्माण चरण के दौरान सभी पृष्ठ घटकों के लिए सामान्य डेटा लाने जैसे मामलों के लिए?

@ pkral78 मैं आपको बता सकता हूं कि मैं विकास की वास्तविक स्थिति के साथ कैसे हल करता हूं।

मैंने "लेआउट एज़ ए हायर ऑर्डर कंपोनेंट (HOC)" दृष्टिकोण के साथ एक लेआउट बनाया (अब लर्निंग डॉक्स में नहीं 🤷‍♂️)।

वैसे भी, मैंने निम्नलिखित की तरह एक लेआउट बनाया है (सिर्फ एक उदाहरण):

import React from "react";
import Head from "next/head";

const withSSGLayout = Page => {
  const WithSSGLayout = props => {
    return (
      <>
        <Head>
          <title>My Web Page</title>
          <link rel="icon" href="/favicon.ico" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link
            href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
            rel="stylesheet"
          />
        </Head>
        <Page {...props} />
      </>
    );
  };

  WithSSGLayout.unstable_getStaticProps = async () => {
    const pageStaticProps = Page.unstable_getStaticProps
      ? await Page.unstable_getStaticProps()
      : {};

    // Here you can make parent level queries too
    return {
      props: {
        ...pageStaticProps.props,
        parentProp: `dynamic prop-${new Date().toISOString()}`,
      },
    };
  };
  return WithSSGLayout;
};

export default withSSGLayout;

और फिर उस पृष्ठ में जिसे आप इस दृष्टिकोण का उपयोग करना चाहते हैं, आप एचओसी को सरल रूप से जोड़ सकते हैं (आपको [unstable_]getStaticProps को स्पष्ट रूप से निर्यात करना होगा और एक साथ काम नहीं करना होगा), लेकिन मुझे उच्च स्तरीय अनुरोध करने का "अच्छा तरीका" मिला और प्रति पृष्ठ एसएसजी प्रश्न।

import React from "react";
import withSSGLayout from "../hocs/withSSGLayout";

export const config = { amp: `true` };

const Index = props => {
  const { date, parentProp } = props;
  return (
    <div>
      <h1>Example</h1>
      <h3>Local Prop?: {date}</h3>
      <h3>Parent Prop?: {parentProp}</h3>
    </div>
  );
};

// In theory you could do direct database queries
Index.unstable_getStaticProps = async () => {
  // Here you can make page level queries
  return {
    props: {
      date: new Date().toISOString(),
    },
  };
};
const IndexHOC = withSSGLayout(Index);

export const { unstable_getStaticProps } = IndexHOC;
export default IndexHOC;

अगर यह एक अच्छा तरीका है तो इसे समझना चाहेंगे। मेरे मामले में, मैं इस तकनीक का उपयोग पेरेंट में लिंक और पेज वाले में प्रति पेज कंटेंट को क्वेरी करने के लिए कर रहा हूं। मुझे उम्मीद है यह मदद करेगा।

@robertovg आपको मॉड्यूल स्तर पर निर्यात करना होगा क्योंकि कोड पेड़ से हिल गया है। जिस तरह से आपने इसे मॉडल किया है, उससे क्लाइंट-साइड पर अधिक कोड भेजे जाने का कारण बनता है।

@timneutkens क्या आप शायद इस छोटे से उदाहरण के लिए बेहतर समाधान प्रस्तावित कर सकते हैं? मैं बस "लेआउट लेवल एसएसजी क्वेरी" और "पेज लेवल एसएसजी क्वेरी" दोनों को किसी तरह से रखने की कोशिश कर रहा था और मैंने इस एचओसी लेआउट दृष्टिकोण के बारे में सोचा।

मेरे लिए मुख्य बाधा स्पष्ट रूप से "निर्यात [अस्थिर_] getStaticProps" था जिसे आपको एसएसजी पृष्ठ के रूप में चिह्नित करने के लिए प्रत्येक पृष्ठ पर होना चाहिए।

मैं वास्तव में कुछ और जानकारी की भी सराहना करता हूं कि क्या amp + SSG संगत होगा, मैंने पहले पूछा था।

धन्यवाद 🙏

@robertovg पहले, डेटा से लेआउट को अलग करें, इसलिए साझा लेआउट के लिए आपके पास कुछ इस तरह से सरल होगा:

import Layout from '../components/layout'

const Page = () => (
  <Layout>
    <h1>Hello World!</h1>
  </Layout>
)

export default Page

और फिर getStaticProps लिए किसी अन्य मॉड्यूल से एक विधि का उपयोग करके साझा डेटा प्राप्त करें, इसलिए पूरा उदाहरण इस तरह दिख सकता है:

import fetchSharedData from '../lib/fetch-shared-data'
import Layout from '../components/layout'

export const unstable_getStaticProps = async () => {
  const sharedData = await fetchSharedData()
  const pageProps = {...}

  return {  props: { ...sharedData, ...pageProps } }
}

const Page = () => (
  <Layout>
    <h1>Hello World!</h1>
  </Layout>
)

export default Page

@robertovg पहले, डेटा से लेआउट को अलग करें, इसलिए साझा लेआउट के लिए आपके पास कुछ इस तरह से सरल होगा:

import Layout from '../components/layout'

const Page = () => (
  <Layout>
    <h1>Hello World!</h1>
  </Layout>
)

export default Page

और फिर getStaticProps लिए किसी अन्य मॉड्यूल से एक विधि का उपयोग करके साझा डेटा प्राप्त करें, इसलिए पूरा उदाहरण इस तरह दिख सकता है:

import fetchSharedData from '../lib/fetch-shared-data'
import Layout from '../components/layout'

export const unstable_getStaticProps = async () => {
  const sharedData = await fetchSharedData()
  const pageProps = {...}

  return {  props: { ...sharedData, ...pageProps } }
}

const Page = () => (
  <Layout>
    <h1>Hello World!</h1>
  </Layout>
)

export default Page

मैं इस समाधान को देखता हूं और समझता हूं लेकिन मैं जिस समस्या को उठाने की कोशिश कर रहा था, वह यह थी कि साझा डेटा के उपयोग को कैसे बढ़ाया जाए।
उदाहरण के लिए, यदि आपके पास <Header /> जो लिंक प्राप्त करने के लिए sharedData का उपयोग करता है और वे एक हेडलेस सीएमएस से आ रहे हैं। आपको <Header /> को <Layout /> बच्चे के रूप में प्रॉप्स या किसी अन्य समाधान के साथ इंजेक्ट करना होगा। और आपको उन सभी पृष्ठों में <Header /> इंजेक्शन दोहराना होगा, जिनका आप उपयोग करना चाहते हैं।

एचओसी दृष्टिकोण के साथ आप एचओसी में एक बार <Header /> जोड़ देंगे।

इसलिए मैंने सोचा कि यदि संभव हो तो कोड दोहराव से बचने के लिए @ pkral78 द्वारा उठाया गया यह एक अच्छा बिंदु था।

इसलिए मैंने सोचा कि यदि संभव हो तो कोड दोहराव से बचने के लिए @ pkral78 द्वारा उठाया गया यह एक अच्छा बिंदु था।

यह मेरे दिमाग में था। _app पेज का अपना getStaticProps होना चाहिए जिसे पहले पेज रेंडर के दौरान एक बार कॉल किया जाता है और फिर सहेजे गए props को अगले रेंडर किए गए पेज पर पास कर दिया जाता है। लेकिन मैं अभी भी सोच रहा हूं कि क्या यह उचित अवधारणा है।

सुनिश्चित नहीं है कि इस तरह की चीज एक इच्छित उपयोग-मामला है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है:

// /pages/[...slug].jsx
import ReactDOMServer from "react-dom/server";

export async function unstable_getStaticProps({ params: { slug } }) {
  const filePath = "../content/" + slug.join("/") + ".mdx";
  const { default: Component } = await import(filePath);
  const content = ReactDOMServer.renderToStaticMarkup(<Component />);
  return {
    props: { title: slug.join(" "), content }
  };
}

export default function Page({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

यहां तक ​​​​कि अगर यह एक इच्छित उपयोग-मामला नहीं है, तो यह एक त्रुटि लॉग करता है जो थोड़ा संदिग्ध लगता है:

[ warn ]  ./pages/[...slug].jsx
Critical dependency: the request of a dependency is an expression

संपादित करें:

ओह, ठीक है, जब मैं करता हूं तो यह हल हो जाता है

const { default: Component } = await import(`../content/${slug.join("/")}.mdx`);

https://codesandbox.io/s/happy-oskar-40bug

यह आपके आयात फ़ाइल पथ के गतिशील होने की शिकायत कर रहा है

थू, ३० जनवरी २०२० को ००:२९ बजे, जन पोटम्स नोटिफिकेशन @github.com ने लिखा:

यकीन नहीं होता अगर इस तरह की बात
https://codesandbox.io/s/nifty-cache-jspqr एक इच्छित उपयोग-मामला है, लेकिन
यह काम नहीं लग रहा है:

// /पृष्ठ/[...स्लग].jsximport ReactDOMServer "react-dom/server" से;
निर्यात async समारोह अस्थिर_getStaticProps({ params: {स्लग}}) {
// यह भी कितना सुरक्षित है?
const filePath = "../content/" + slug.join("/") + ".mdx";
कॉन्स्ट {डिफ़ॉल्ट: घटक} = आयात की प्रतीक्षा करें (फ़ाइलपाथ);
कॉन्स्ट कंटेंट = ReactDOMServer.renderToStaticMarkup (घटक);
वापसी {
सहारा: {शीर्षक: slug.join(" "), सामग्री}
};
}
निर्यात डिफ़ॉल्ट फ़ंक्शन पृष्ठ ({शीर्षक, सामग्री}) {
वापसी (

{शीर्षक}

);
}

यहां तक ​​​​कि अगर यह एक इच्छित उपयोग-मामला नहीं है, तो यह एक त्रुटि लॉग करता है जो लगता है a
थोड़ा संदिग्ध:

[चेतावनी] ./पृष्ठ/[...स्लग].jsx
गंभीर निर्भरता: एक निर्भरता का अनुरोध एक अभिव्यक्ति है

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/zeit/next.js/issues/9524?email_source=notifications&email_token=AAADKRKOL34WKTG7J5QFRJ3RAIGPBA5CNFSM4JRPBEL2YY3PNVWWWK3TUL52HS4DFVREXG43VMVBW63DNMVK-5ZYLOY
या सदस्यता समाप्त करें
https://github.com/notifications/unsubscribe-auth/AAADKRIWNA2DSMWFRGD453DRAIGPBANCNFSM4JRPBELQ
.

इसलिए मैंने सोचा कि यदि संभव हो तो कोड दोहराव से बचने के लिए @ pkral78 द्वारा उठाया गया यह एक अच्छा बिंदु था।

यह मेरे दिमाग में था। _app पृष्ठ का अपना getStaticProps होना चाहिए जिसे पहले पृष्ठ रेंडर के दौरान एक बार कॉल किया जाता है और फिर सहेजे गए props को अगले रेंडर किए गए पृष्ठों में पास कर दिया जाता है। लेकिन मैं अभी भी सोच रहा हूं कि क्या यह एक उचित अवधारणा है।

@ pkral78 , ऐसा इसलिए हो सकता है क्योंकि अधिकांश एसएसजी साइटों में मैं नेक्स्ट के साथ लागू होने की कल्पना करता हूं, मैं एक "सामान्य टुकड़ा" (शीर्षलेख, पाद लेख, साइड बार्स ...) रखना चाहता हूं। और क्यों न केवल उस सामान्य टुकड़े के लिए _app में क्वेरी बनाई, यदि आपको इसकी आवश्यकता है, और इसे प्रत्येक पृष्ठ पर मैन्युअल रूप से बिना बाल पृष्ठों में उपलब्ध कराएं।

मेरी एकमात्र चिंता यह है कि यदि आप इसे _app.js में डालते हैं, तो हम पृष्ठ के आधार पर एक से अधिक "कॉमन पीस" प्राप्त करने में सक्षम नहीं हो सकते। इस विचार के साथ कि मैं प्रोटोटाइप कर रहा था, मैं इसे लेआउट में रखने में सक्षम होना चाहता था क्योंकि यह हमें आपके द्वारा प्रस्तुत किए जाने वाले पेज के प्रकार के आधार पर कई लेआउट रखने की अनुमति देगा, "इसीलिए मैंने withSSGLayout को कॉल किया मेरा एचओसी क्योंकि मैं न केवल एसएसजी पेज बल्कि एसएसआर और पूरी तरह से क्लाइंट बेस वाले, या एक से अधिक एसएसजीलाउट बनाने की योजना बना रहा था। मैं यह किया जा सकता था अगर लेआउट माता-पिता getStaticProps विधि के लिए भी जिम्मेदार हो सकते हैं।

वैसे भी, नेक्स्ट में SSG होने से यह किसी भी तरह की वेब साइट के लिए टूल बन जाएगा

@Janpot https://github.com/zeit/next.js/issues/9524#issuecomment -580012327 के संबंध में

import() में कभी भी गतिशील पथों का उपयोग

@timneutkens ज़रूर, समझ में आता है। क्या getStaticProps केवल बाहरी एपीआई को क्वेरी करने के लिए है, फाइल सिस्टम के लिए नहीं?

@ जेनपोट आप फाइल सिस्टम से पढ़ सकते हैं, अक्सर आप कुछ बाहरी एपीआई से पूछताछ कर लेंगे।

@timneutkens ठीक है, @mdx-js/runtime का उपयोग करने के लिए बेहतर है, मुझे लगता है कि @next/mdx पर भरोसा करने के बजाय।

import ReactDOMServer from "react-dom/server";
import { promises as fs } from "fs";
import MDX from "@mdx-js/runtime";

export async function unstable_getStaticProps({ params: { slug } }) {
  const mdxContent = await fs.readFile(`./content/${slug.join('/')}.mdx`, {
    encoding: "utf-8"
  });
  const content = ReactDOMServer.renderToStaticMarkup(<MDX>{mdxContent}</MDX>);
  return {
    props: { title: slug.join(" "), content }
  };
}

export default function Page({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

@ जनपोट हाँ! आप सादे मार्कडाउन का भी उपयोग कर सकते हैं, यही हम nextjs.org/docs के लिए करते हैं।

https://github.com/zeit/next.js/issues/9524#issuecomment -580207073 के संबंध में, यह ठीक वैसा ही है जैसा मैं वर्तमान में SSR के साथ Next का उपयोग करता हूं। मेरे पास एक ग्राफक्यूएल अनुरोध है जो लेआउट स्तर पर किया जाता है, और इसकी सामग्री ऐप के सामान्य घटकों (नवबार, पाद लेख, और गतिशील बच्चों) के साथ साझा की जाती है। फिर, गतिशील बच्चे आमतौर पर पृष्ठ-विशिष्ट सामग्री के लिए एक और ग्राफ़कॉल अनुरोध करते हैं।

इस प्रकार, इसका पुन: उपयोग करने का एक तरीका महत्वपूर्ण लगता है, मैं उन सामान्य डेटा को लाने के लिए प्रत्येक पृष्ठ पर कोड डुप्लिकेट नहीं करना चाहता हूं।

अरे!
मैं यहाँ बिलकुल नया हूँ। बस ऐप को नेक्स्टजेएस में माइग्रेट करने पर काम करना शुरू कर दिया।

एक बुनियादी उपयोग मामला है जो इस सुविधा से बहुत लाभान्वित होगा - कई भाषा संस्करण। जिस वेब ऐप पर मैं काम कर रहा हूं, उसमें 16 भाषा संस्करण हैं जिनमें एक दिन में 100.000+ पृष्ठ दृश्य हैं और उदाहरण के लिए केवल स्थिर रूप से उत्पन्न करने में सक्षम होने के कारण लैंडिंग पृष्ठ शानदार होगा लेकिन समस्या रूटिंग है।

सर्वर साइड रेंडरिंग के साथ मैं अनुरोध हेडर या कुकीज़ पढ़ सकता हूं और उचित भाषा संस्करण प्रस्तुत कर सकता हूं, लेकिन इसके बिना, हर संस्करण के लिए पथ बनाने का एकमात्र समाधान है जैसे /en, /de, /fr और "/" मेक नेक्स्टजेएस सिर्फ रीडायरेक्ट करते हैं?

ReactDOMServer.renderToStaticMarkup बारे में जानने के बाद मैंने इसे अपने unstable_getStaticProps फ़ंक्शन में जोड़ा और मैंने पाया कि इसने मेरे (मोबाइल) पेजस्पीड स्कोर को 96 से बढ़ाकर 100 कर दिया है। .

मैं जावास्क्रिप्ट के बिना पेज पर जा सकता हूं और यह ठीक लोड होता है, इसलिए ऐसा प्रतीत होता है कि रिएक्ट एसएसजी का उपयोग करने के बावजूद पेज लोड पर काम कर रहा है।

हो सकता है कि यह रिएक्ट के आसपास मेरी समझ की कमी है, लेकिन मुझे उम्मीद है कि जावास्क्रिप्ट के साथ और उसके बिना प्रदर्शन समान होगा, और मैं घटकों को मदद करने के लिए पूर्व-प्रतिपादन की उम्मीद नहीं करूंगा (मैंने सोचा था कि एसएसजी यही कर रहा था)।

क्या अपेक्षित है, एक बग है, या कुछ और जो मैं गलत कर रहा हूँ?

पूर्व-प्रतिबद्ध: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2F5e310826bcf5030008a91209--josephduffynextjs.netlify.com%2Fposts%2Fgathered-1-0-1&tab=mobile
प्रतिबद्ध: https://github.com/JosephDuffy/josephduffy.co.uk/pull/54/commits/d23898b874e5088ebcfabf577ee396b476ed97e4
पोस्ट-कमिट: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2F5e3371beda1b8f0009368ef9--josephduffynextjs.netlify.com%2Fposts%2Fgathered-1-0-1&tab=mobile

@ जोसेफ डफी

तो ऐसा प्रतीत होता है कि प्रतिक्रिया एसएसजी का उपयोग करने के बावजूद पेज लोड पर काम कर रही है।

यह डोम को हाइड्रेट कर रहा है। मूल रूप से:

1. आपका ब्राउज़र SSR html को ब्राउज़र DOM में लोड करता है
2. रिएक्ट पूरे वर्चुअल डोम का पुनर्निर्माण करता है
3. प्रतिक्रिया इन डोम को पार करती है और उन्हें सिंक करती है (हाइड्रेशन)

यदि आपकी सामग्री वास्तव में स्थिर है, जैसे कि कोई साइड इफेक्ट या ईवेंट हैंडलर नहीं हैं, तो चरण 2 और 3 एक तरह से अनावश्यक हैं। अपनी विधि के साथ आप मूल रूप से अपने घटक पेड़ को 1 घटक के साथ 1 घटक तक कम कर देते हैं, जो कि रिएक्ट को प्रस्तुत करने और हाइड्रेट करने के लिए बहुत तेज़ है। (+ dangerouslySetInnerHTM जलयोजन के दौरान अनदेखा किया जाता है)

<div dangerouslySetInnerHTML={{ __html: props.htmlContent }} />

ध्यान रखें कि इस पद्धति के साथ ईवेंट हैंडलर और साइड इफेक्ट काम नहीं करेंगे।

संपादित करें:

एक विचार यह हो सकता है कि किसी पृष्ठ पर डिफ़ॉल्ट निर्यात को छोड़ने की अनुमति दी जाए यदि getStaticProps स्थिर html लौटाता है। अर्थात

export async function unstable_getStaticProps() {
  // ...
  return {
    props: { dangerouslySetInnerHTML: { __html: '<div>static content</div>' } }
  };
}

चूंकि क्लाइंट साइड को कुछ भी प्रस्तुत करने की आवश्यकता नहीं है, next.js अपने रनटाइम को पेज से बाहर कर सकता है और केवल HTML को इनलाइन कर सकता है जो getStaticProps लौटा है। और यह ठीक उसी तरह काम करेगा जैसे dangerouslySetInnerHTML का उपयोग next.js रूट नोड पर किया गया था।
मुझे लगता है कि कम शक्तिशाली होने के बावजूद आंशिक जलयोजन की तुलना में इसे लागू करना आसान होगा। यहां रिएक्ट की शब्दावली का पुन: उपयोग करने से यह भ्रम कम हो सकता है कि यह सुविधा कैसे काम करेगी।

मैं एक स्थिर साइट को Next.js पर माइग्रेट करने का प्रयास कर रहा हूं और मैं ब्लॉग पोस्ट के सभी .html रूपों को .html में समाप्त नहीं होने वाले संस्करणों पर रीडायरेक्ट करना चाहता हूं। ऐसा लगता है कि getStaticProps को वर्तमान में संदर्भ नहीं मिलता है इसलिए मैं आने वाले स्लग और रीडायरेक्ट के लिए जांच नहीं कर सकता। यह मददगार होगा यदि getStaticProps को पूर्ण संदर्भ मिले ताकि मैं इसके साथ कुछ सशर्त चीजें कर सकूं।

@nodabladam ऐसा लगता है कि आप कस्टम रूट आरएफसी: # 9081 की तलाश में हैं।

वह RFC आपको कुछ इस तरह परिभाषित करने की अनुमति देगा:

// next.config.js
module.exports = {
  redirects() {
    return [
      // Redirect from the old HTML version of a blog post
      {
        source: "/blog/:post.html",
        destination: "/blog/:post",
        permanent: true
      }
    ];
  }
};

आप वर्तमान में इस सुविधा को experimental कुंजी के अंतर्गत आज़मा सकते हैं:

// next.config.js
module.exports = {
  experimental: {
    redirects() {
      // ...
    }
  }
};

मैंने अपनी एक परियोजना (लगभग 8K पृष्ठ) पर getStaticProps और getStaticPathNames लागू किया है।

हालाँकि आउटपुट फ़ाइलों की गणना प्रति परिनियोजन फ़ाइलों की 10K सीमा में की जाती है। 8K पृष्ठों के साथ आपको 16K आउटपुट फ़ाइलें मिलती हैं क्योंकि प्रत्येक पृष्ठ को एक json फ़ाइल भी मिलती है।

क्या इस सीमा को बढ़ाने की कोई योजना है? या क्या मैं इस सीमा के आसपास काम कर सकता हूं?

मेरी भी यही समस्या है।
मैं समझता हूं कि वे उस सीमा को उठाना चाह रहे हैं, लेकिन मुझे नहीं पता कि इसे कब लागू किया जाएगा।

तो मैं सभी पृष्ठों पर getStaticProps का उपयोग करता हूं और उनमें से कुछ पर केवल स्टेटिकपैथ प्राप्त करता हूं और यह काम करता है (मेरा उत्पाद पृष्ठ कुल पृष्ठों का 70% उत्पन्न करता है इसलिए मैंने इसमें कोई getStaticPaths नहीं डाला)। मैं सीमा के भीतर रहता हूं लेकिन यह सही नहीं है, पहला लोड काफी लंबा है और 404 त्रुटियों को संभालना मुश्किल है।

मेरी भी यही समस्या है।
मैं समझता हूं कि वे उस सीमा को उठाना चाह रहे हैं, लेकिन मुझे नहीं पता कि इसे कब लागू किया जाएगा।

तो मैं सभी पृष्ठों पर getStaticProps का उपयोग करता हूं और उनमें से कुछ पर केवल स्टेटिकपैथ प्राप्त करता हूं और यह काम करता है (मेरा उत्पाद पृष्ठ कुल पृष्ठों का 70% उत्पन्न करता है इसलिए मैंने इसमें कोई getStaticPaths नहीं डाला)। मैं सीमा के भीतर रहता हूं लेकिन यह सही नहीं है, पहला लोड काफी लंबा है और 404 त्रुटियों को संभालना मुश्किल है।

मुझे उम्मीद है कि वे जल्द ही सीमा बढ़ा देंगे, हालांकि मुझे उम्मीद है कि यह 20K नहीं होगा .. यह लंबे समय में मेरे लिए पर्याप्त नहीं होगा।

मैं getStaticPaths के साथ पहले लोड समय से बचना चाहता हूं .. मुझे Zeit Now के अलावा अन्य समाधानों की तलाश करनी पड़ सकती है

Next.js स्वचालित रूप से एक एपीआई एंडपॉइंट का खुलासा करेगा जो getServerProps को कॉल करने का परिणाम देता है। [...] Next.js इस एक्सपोज़्ड एपीआई एंडपॉइंट को JSON डेटा प्राप्त करने के लिए लाएगा जो पेज क्लाइंट-साइड को रेंडर करने के लिए आवश्यक प्रॉप्स में बदल जाता है।

Next.js वास्तविक मार्ग परिवर्तन करने और पृष्ठ घटक प्रस्तुत करने से पहले इस समापन बिंदु से डेटा प्राप्त करेगा (यह कम से कम डिफ़ॉल्ट रूप से, इसे किसी अन्य तरीके से नहीं कर सकता है)। इसलिए उपयोगकर्ता कुछ पृष्ठों के सांख्यिकीय रूप से उत्पन्न होने के कारण एक अत्यंत तेज़ साइट का अनुभव कर सकता है, लेकिन यदि वे किसी SSR पृष्ठ के लिंक पर क्लिक करते हैं, तो मार्ग परिवर्तन से थोड़ी देर पहले अचानक साइट "हैंग" हो जाएगी।

क्या घटक _first_ लोड करने का कोई अनुशंसित तरीका है ताकि इसे लोडिंग संकेतक, एनिमेटेड प्लेसहोल्डर इत्यादि के साथ पॉप्युलेट किया जा सके? (उन्हें वर्तमान पृष्ठ में जोड़ने के बजाय।) यदि नहीं, तो क्या यह नई प्रस्तावित सुविधाओं के लिए प्रासंगिक हो सकता है? मैंने इसे रेंडर विधि के अंदर getInitialProps और हुक के संयोजन का उपयोग करके हासिल किया, लेकिन यह गन्दा लगता है।

मुझे लगता है कि यह यूएक्स पैटर्न (तत्काल पृष्ठ स्विच) कई (अधिकांश?) द्वारा पसंद किया जाता है, लेकिन मैंने अभी तक नेक्स्ट.जेएस का उपयोग करके इसका कोई उदाहरण नहीं देखा है। मैंने केवल कुछ दिनों के लिए ढांचे का उपयोग किया है, इसलिए अगर मैं गलत हूं तो कृपया मुझे सुधारें।

नई सुविधाओं के बारे में वास्तव में उत्साहित! आपके काम के लिए धन्यवाद।

@nicoqh , पेज ट्रांज़िशन के बारे में आपकी चिंताएँ SSG के लिए विशिष्ट नहीं हैं, क्योंकि हैंग वर्तमान getInitialProps । मैं nprogress का उपयोग कम से कम शीर्ष पर एक प्रगति पट्टी दिखाने के लिए करता हूं, जबकि अगला पृष्ठ लोड हो रहा है, लेकिन मुझे कानूनी पृष्ठ संक्रमण होने का यह उदाहरण भी दिखाई देता है जो आप जो वर्णन कर रहे हैं उसके करीब ध्वनि करते हैं। मैंने इसे स्वयं नहीं किया है, लेकिन मुझे आशा है कि इससे आपको जो चाहिए वह मदद करता है:
https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions

ऐसा लगता है कि json फ़ाइल /_next/data/BUILD_ID/<file>.json जो लौटाई गई है वह एसेटप्रिफ़िक्स का सम्मान नहीं करती है। यह मेरे उत्पादन वातावरण में मेरे लिए फ़ाइल को 404 का कारण बनता है क्योंकि मेरे पास एक ऐसा सेटअप है जो उम्मीद करता है कि सब कुछ _next एक संपत्ति है जो सीडीएन के माध्यम से जाती है। ये जोंस फाइलें अंततः एसेटप्रिफ़िक्स (सीडीएन) के माध्यम से सही होनी चाहिए?

मेरी भी यही समस्या है।
मैं समझता हूं कि वे उस सीमा को उठाना चाह रहे हैं, लेकिन मुझे नहीं पता कि इसे कब लागू किया जाएगा।
तो मैं सभी पृष्ठों पर getStaticProps का उपयोग करता हूं और उनमें से कुछ पर केवल स्टेटिकपैथ प्राप्त करता हूं और यह काम करता है (मेरा उत्पाद पृष्ठ कुल पृष्ठों का 70% उत्पन्न करता है इसलिए मैंने इसमें कोई getStaticPaths नहीं डाला)। मैं सीमा के भीतर रहता हूं लेकिन यह सही नहीं है, पहला लोड काफी लंबा है और 404 त्रुटियों को संभालना मुश्किल है।

मुझे उम्मीद है कि वे जल्द ही सीमा बढ़ा देंगे, हालांकि मुझे उम्मीद है कि यह 20K नहीं होगा .. यह लंबे समय में मेरे लिए पर्याप्त नहीं होगा।

मैं getStaticPaths के साथ पहले लोड समय से बचना चाहता हूं .. मुझे Zeit Now के अलावा अन्य समाधानों की तलाश करनी पड़ सकती है

@erhankaradeniz और @ziltosh हमें इसे बहुत जल्द शुरू करना चाहिए। यदि आप उस ASAP के साथ सहायता प्राप्त करना चाहते हैं, तो आप मुझे सीधे या [email protected] पर पिंग कर सकते हैं और वे आपको सुलझा लेंगे।

मेरी भी यही समस्या है।
मैं समझता हूं कि वे उस सीमा को उठाना चाह रहे हैं, लेकिन मुझे नहीं पता कि इसे कब लागू किया जाएगा।
तो मैं सभी पृष्ठों पर getStaticProps का उपयोग करता हूं और उनमें से कुछ पर केवल स्टेटिकपैथ प्राप्त करता हूं और यह काम करता है (मेरा उत्पाद पृष्ठ कुल पृष्ठों का 70% उत्पन्न करता है इसलिए मैंने इसमें कोई getStaticPaths नहीं डाला)। मैं सीमा के भीतर रहता हूं लेकिन यह सही नहीं है, पहला लोड काफी लंबा है और 404 त्रुटियों को संभालना मुश्किल है।

मुझे उम्मीद है कि वे जल्द ही सीमा बढ़ा देंगे, हालांकि मुझे उम्मीद है कि यह 20K नहीं होगा .. यह लंबे समय में मेरे लिए पर्याप्त नहीं होगा।
मैं getStaticPaths के साथ पहले लोड समय से बचना चाहता हूं .. मुझे Zeit Now के अलावा अन्य समाधानों की तलाश करनी पड़ सकती है

@erhankaradeniz और @Ziltosh हमें इसे बहुत जल्द शुरू करना चाहिए। यदि आप उस ASAP के साथ सहायता प्राप्त करना चाहते हैं, तो आप मुझे सीधे या [email protected] पर पिंग कर सकते हैं और वे आपको सुलझा लेंगे।

धन्यवाद @kvangundy
मैंने इस मुद्दे के संबंध में ट्विटर पर आपसे संपर्क किया है ;-)

@erhankaradeniz क्या आप इसके बजाय [email protected] पर ईमेल कर सकते हैं? इस तरह यह हमारे सिस्टम में सही तरीके से खत्म हो जाता है।

@flintinatux , टिप के लिए धन्यवाद। मैंने उदाहरण देखा है, और यह डेटा लोड करने से पहले पेज घटक को लोड करने में मदद नहीं करता है, इसलिए इन-पेज प्लेसहोल्डर आदि संभव नहीं हैं। हालांकि, यह एक दिलचस्प उदाहरण है, धन्यवाद!

मुझे लगता है कि इसे इस मुद्दे में संबोधित नहीं किया जा रहा है, जिसका अर्थ है कि यह विषय से दूर है, इसलिए मुझे इस पर चर्चा करने के लिए कहीं और मिल जाएगा :)

मुझे लगता है कि getInitialProps को getStaticProps और getServerProps में विभाजित करने का दृष्टिकोण बहुत साफ है! मेरे पास एक प्रश्न है कि यह हमारे उपयोग-मामले को कैसे प्रभावित करता है:
हम 2 अलग-अलग बिल्ड बनाना चाहते हैं: एक हमारी उत्पाद साइट के लिए एक स्थिर संस्करण, और एक संपादन वातावरण के लिए SSR का उपयोग करने वाला एक संस्करण।

मैं सोच रहा था कि मैं सशर्त रूप से getStaticProps बनाम getServerProps को बिल्ड के आधार पर स्थिर तरीकों के रूप में संलग्न कर सकता हूं (https://github.com/zeit/next.js/issues/9524#issuecomment- के समान- 558617056), लेकिन मुझे यकीन नहीं है कि सशर्त रूप से उन्हें निर्यात करना संभव होगा या नहीं। कोई विचार अगर निर्माण के आधार पर गतिशील/स्थैतिक का समर्थन करना संभव होगा?

के साथ संबंध:

• लोड हो रहा है स्थिति: https://github.com/zeit/next.js/issues/9524#issuecomment -581494508
  
  
  
  • अभी काम किया जा रहा है (#10424)।
  
  
• पूर्वावलोकन: https://github.com/zeit/next.js/issues/9524#issuecomment -582607806
  
  
  
  • काम चल रहा है, पीआर बाद में खोला जाएगा।
  
  

RFC को बाद में परिवर्तनों को प्रतिबिंबित करने के लिए अपडेट किया जाएगा, फिर भी हमारे ऐप्स में वास्तविक दुनिया के उपयोग पर पुनरावृति होगी।

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

मैंने स्थिर पृष्ठ _पृष्ठ/[स्लग] .js_ प्रस्तुत करने के लिए गतिशील मार्ग स्थापित किया है। _getStaticPaths_ उन सभी पृष्ठों को प्राप्त कर रहा है जिन्हें मैं स्थिर रूप से प्रस्तुत करना चाहता हूं। मेरे पास डेटा को क्वेरी करने और इसे रेंडर फ़ंक्शन में पास करने के लिए _getStaticProps_ है। _getStaticPaths_ में दिए गए सभी पेज बिल्ड पर _.next/server/static_ के अंदर HTML फ़ाइलों के रूप में प्रस्तुत किए जाते हैं। महान!

अब मैं npm run start चलाता हूं और इन पृष्ठों को जैसा उन्हें करना चाहिए। लेकिन अनुपलब्ध url (जैसे _/foo_) का अनुरोध करने से _.next/server/static_ के अंदर नई स्थिर HTML और JSON फ़ाइलें उत्पन्न होती हैं। यह अच्छा नहीं है। मैं सर्वर को अन्य सभी यूआरएल को _pages/_error.js_ पर रीडायरेक्ट करने के लिए कैसे बना सकता हूं?

https://github.com/zeit/next.js/issues/9524#issuecomment -582777067

हम उसे भी कवर कर रहे हैं।

अब मैं npm रन स्टार्ट चलाता हूं और इन पेजों के लिए जैसा उन्हें करना चाहिए। लेकिन एक लापता url (जैसे /foo) का अनुरोध करने से .next/server/static के अंदर नई स्थिर HTML और JSON फ़ाइलें उत्पन्न होती हैं। यह अच्छा नहीं है। मैं सर्वर को अन्य सभी यूआरएल को पेज/_error.js पर रीडायरेक्ट करने के लिए कैसे बना सकता हूं?

यह अभी भी उड़ान में है और अभी अप्रत्याशित व्यवहार नहीं है।

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

@timneutkens धन्यवाद! मैं अस्थिरता को समझता हूं। क्या आपको कोई आइडिया है कि इसे कैसे मैनेज किया जाए? कोड के माध्यम से चला गया और देखा कि _unstable_getStaticProps_ के अंदर एक त्रुटि फेंकने से त्रुटि पृष्ठ प्रस्तुत होता है। यह जाने का एक अच्छा तरीका हो सकता है। मुझे त्रुटि को आगे बढ़ाने के लिए बस एक तरीके की आवश्यकता होगी क्योंकि यह _pages/_error.js_ के लिए है। मैं इसे ४०४ भेजना चाहूंगा। अब यह ५०० के रूप में जाता है।

मैंने इसे अन्य थ्रेड्स में पहले भी कई बार पोस्ट किया है, लेकिन "_error पर जाना" अप्रत्याशित व्यवहार है, अभी आपके पृष्ठ को 404 स्थिति प्रस्तुत करनी चाहिए। सीधे शब्दों में कहें तो if(!data.something) { return <My404Component /> } , और फिर My404Component को noindex मेटा टैग सेट करना चाहिए।

सचमुच? दस्तावेज़ीकरण स्पष्ट रूप से 404 के लिए _pages/_error.js_ का उपयोग करने का निर्देश देता है।

देखें: https://nextjs.org/docs/advanced-features/custom-error-page

@ jiv-e जो कि ४०४ के कारण होता है:

• पृष्ठ नहीं मिला
• फ़ाइल प्राप्त नहीं हुई

यदि आपके पास गतिशील मार्ग हैं तो आपको "404" मामले को संभालना होगा जैसे मैंने कहा, उदाहरण के लिए https://nextjs.org/docs/advanced-features/custom-error-page#reuse -the-built-in-error- पृष्ठ

समझ गया! धन्यवाद!

मैं निर्माण समय पर अनुवाद/भाषा कुंजी लाने के लिए getStaticProps का उपयोग करना चाहता हूं क्योंकि वे संभवतः 1-2 बार महीने या प्रति वर्ष भी बदलेंगे। डीओएम के भीतर जेएसओएन/प्रोप के रूप में भी उनकी आवश्यकता नहीं है। समस्या यह है कि मैं पेड़ के नीचे उस घटक को कुंजी पास नहीं करना चाहता जहां मैं वास्तव में उनका उपयोग करता हूं - मेरे उपयोग के मामले के लिए कौन से दृष्टिकोण उपयुक्त हैं?

useTranslation () हुक (या HOC) संदर्भ के साथ?

यह अच्छा होगा यदि AppTree NextGetStaticProps Context ( getStaticProps({ AppTree }) ) का हिस्सा होगा। अन्यथा ssg पर apollos getDataFromTree जैसी चीजें चलाना संभव नहीं होगा।

इस बिंदु पर हम AppTree ट्रैवर्सल को getStaticProps में अनुमति देने की योजना नहीं बना रहे हैं क्योंकि यह प्रदर्शन के लिए वास्तव में खराब है (कंपनियों से लगातार प्रतिक्रिया)। जब आप किसी पृष्ठ पर getStaticProps जोड़ते हैं तो यह अभी भी वृद्धिशील अपनाने की अनुमति देने के लिए _app के getInitialProps के माध्यम से जाता है, इसलिए यह अभी भी अपोलो के साथ वास्तव में काम करेगा।

यह अच्छा होगा यदि हमारे पास एक ही समय में amp: 'hybrid' और SSG कार्यक्षमता हो।
इसे इस तरह के पेज के लिए दो फाइलें बनाकर हासिल किया जा सकता है यानी:

• (एसएसजी) index.html
• (एएमपी) index.amp.html

यह प्रॉक्सी को ?amp=1 क्वेरी पैरामीटर के आधार पर amp दस्तावेज़ को हल करने की अनुमति देगा।

यह अच्छा होगा यदि हमारे पास एक ही समय में amp: 'hybrid' और SSG कार्यक्षमता हो।
इसे इस तरह के पेज के लिए दो फाइलें बनाकर हासिल किया जा सकता है यानी:

• (एसएसजी) index.html
• (एएमपी) index.amp.html

यह प्रॉक्सी को ?amp=1 क्वेरी पैरामीटर के आधार पर amp दस्तावेज़ को हल करने की अनुमति देगा।

बिल्कुल @Dacturne , यह एकमात्र नकारात्मक पहलू है जिसे मैं पहले से ही परियोजनाओं पर SSG का उपयोग करना शुरू करने के लिए देख रहा हूं क्योंकि मैं इस थ्रेड में समय पहले टिप्पणी कर रहा था।

मैं

@jansedlon मैंने आपके प्रश्न का उत्तर देते हुए एक ब्लॉग पोस्ट बनाया है:

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

https://paqmind.com/hi/blog/ssr-is-not-the-future

(यहां पोस्ट नहीं कर रहा क्योंकि यह बहुत बड़ा है)

@ ivan-kleshnin मैंने एक त्वरित नज़र डाली है और यह बहुत रोमांचक लग रहा है! आपने शायद मुझे सैकड़ों घंटे बचाए होंगे! बहुत बहुत धन्यवाद, मैं आज बाद में और गहराई से देखूंगा।

https://github.com/zeit/next.js/issues/9524#issuecomment -582799948

@jansedlon जैसा कि पहले कहा गया था कि हम इस संबंध में कुछ पर काम कर रहे हैं जो @ ivan-kleshnin के ब्लॉगपोस्ट में शामिल नहीं है। उम्मीद है कि बहुत जल्द इस पर और जानकारी साझा कर पाएंगे।

@timneutkens अब तक के परिवर्तनों से प्यार है 🙏 क्या आपके पास पूर्ण स्थिर + अंतर्राष्ट्रीयकरण में सुधार / समर्थन करने की कोई योजना है?

हम Tinacms.org के Gatsby से Next.js पर माइग्रेशन में नए getStaticProps / getStaticPaths API का उपयोग कर रहे हैं, और अब तक यह बहुत अच्छा रहा है!

RSS फ़ीड बनाने में एक बाधा हमारे सामने आई है। आदर्श रूप से हम इसे स्थिर रूप से उत्पन्न करना चाहते हैं, क्योंकि यह जिस सामग्री का संदर्भ देता है वह स्थिर रूप से उत्पन्न होता है। मुझे वर्तमान में ऐसा करने का कोई तरीका नहीं दिख रहा है, इसलिए इसके बजाय हम सामग्री से पूछताछ करके और प्रतिक्रिया के लिए एक्सएमएल लिखकर इसे सर्वर-साइड संभाल रहे हैं।

क्या गैर-एचटीएमएल सामग्री प्रकारों के लिए स्थिर पीढ़ी का समर्थन करने के बारे में कोई चर्चा हुई है?

FYI करें हमने अभी zeit पर getStaticProps का उपयोग करना शुरू किया और --prod ध्वज का उपयोग करके रिलीज़ किया और नई रिलीज़ पर json फ़ाइलों के लिए कैश साफ़ नहीं किया जा रहा था। हमारे उत्पादन रिलीज को वापस उपनाम सुविधा का उपयोग करने के लिए स्विच करना काम कर गया और कैश साफ़ हो गया।

हम Tinacms.org के Gatsby से Next.js पर माइग्रेशन में नए getStaticProps / getStaticPaths API का उपयोग कर रहे हैं, और अब तक यह बहुत अच्छा रहा है!

RSS फ़ीड बनाने में एक बाधा हमारे सामने आई है। आदर्श रूप से हम इसे स्थिर रूप से उत्पन्न करना चाहते हैं, क्योंकि यह जिस सामग्री का संदर्भ देता है वह स्थिर रूप से उत्पन्न होता है। मुझे वर्तमान में ऐसा करने का कोई तरीका नहीं दिख रहा है, इसलिए इसके बजाय हम सामग्री से पूछताछ करके और प्रतिक्रिया के लिए एक्सएमएल लिखकर इसे सर्वर-साइड संभाल रहे हैं।

क्या गैर-एचटीएमएल सामग्री प्रकारों के लिए स्थिर पीढ़ी का समर्थन करने के बारे में कोई चर्चा हुई है?

मैं इसे अपने लिए सोच रहा था और मुझे अभी यह पता चला है। यहाँ मेरी स्क्रिप्ट है:

"scripts": {
    "dev": " next",
    "build": "yarn sitemap && next build",
    "start": "next start",
    "sitemap": "ts-node --project ./cli/tsconfig.spec.json ./cli/generateSitemap.ts"
  },

इससे पहले next build कहा जाता है yarn sitemap कि स्थिर साइटमैप जनरेट करता है। उदाहरण के लिए, आप सभी डेटा को json में कैश करने के लिए एक ही तकनीक का उपयोग कर सकते हैं, जिसकी आपको getStaticProps में आवश्यकता होगी और आप इसे कई पृष्ठों पर पुन: उपयोग कर सकते हैं।

RFC को अपडेट किया, getStaticPaths व्यवहार को थोड़ा बदल दिया (आपको अब paths कुंजी वापस करने की आवश्यकता है, यह getStaticProps प्रतिबिंबित करता है जहां props को वापस करना है। यह परिवर्तन अभी तक Next.js में नहीं आया है।

fallback व्यवहार के लिए एक स्पष्टीकरण भी जोड़ा गया (पृष्ठों की ऑन-डिमांड पृष्ठभूमि निर्माण जो निर्माण समय पर निर्यात नहीं किए गए थे)।

RFC में एक और अपडेट किया, Loading स्थिति के संबंध में क्लाइंट नेविगेशन में बदलाव के लिए स्पष्टीकरण जोड़ा।

हम उपयोगकर्ताओं के लिए यह जानने का एक तरीका जोड़ना चाह सकते हैं कि लोडिंग स्थिति को रिएक्ट हुक के माध्यम से प्रस्तुत किया जा रहा है या नहीं

महान सामान! मैं बस सोच रहा था, क्या एक JSON फ़ाइल (जैसे कोड-विभाजन लेकिन डेटा के लिए) का उपयोग करके कई मार्गों के बीच डेटा साझा करने के लिए स्थिर रूप से जेनरेट किए गए पृष्ठों का कोई तरीका होगा?

मैं नवीनतम canary बिल्ड तक पहुंचा और तुरंत नए Loading राज्य से थोड़ा सा हो गया। अतीत में, सुरक्षित रूप से यह मान लेना अच्छा रहा है कि दृश्य परत का प्रतिपादन शुरू होने से पहले ही मुझे सही डेटा मिल गया है। जबरन अतुल्यकालिक लोडिंग उस से एक बड़ा प्रस्थान है। मुझे वास्तव में सभी बॉयलरप्लेट एंडपॉइंट्स को चीरने में बहुत मज़ा आया है, जो कि नए ऑटो-जेनरेटेड एसएसआर एंडपॉइंट्स को बदल देंगे, लेकिन मैं नए Loading राज्यों को शामिल करने के लिए हर पेज को फिर से डिज़ाइन करने की योजना नहीं बना रहा था।

मैं एक तेज TTFB की इच्छा को समझता हूं, और भविष्य में जो मेरे ऐप के लिए एक अच्छी सुविधा हो सकती है। लेकिन क्या Loading स्थिति को fallback: false लिए getStaticPaths समान एक ऑप्ट-इन या ऑप्ट-आउट सुविधा बनाना संभव होगा? शायद पृष्ठ पर export const enableLoadingState = false , या next.config.js में साइट-व्यापी।

https://github.com/zeit/next.js/issues/9524#issuecomment -583962425

फिर से एक अनुस्मारक कि आप एक प्रयोगात्मक सुविधा का उपयोग कर रहे हैं और हम वर्तमान में व्यवहार के साथ प्रयोग कर रहे हैं।

मैंने अपनी (प्रयोगात्मक) एसएसजी वेबसाइट को अभी (डिफ़ॉल्ट सेटअप का उपयोग करके) तैनात किया है। यह ठीक काम करता है, लेकिन साइट ब्राउज़ करते समय मुझे नेटवर्क टैब में 404 त्रुटियां दिखाई देती हैं। सभी 404 त्रुटियां _next/static/pages/[slug].js इशारा करती हैं।

क्या यह अपेक्षित व्यवहार है जबकि यह प्रायोगिक है? या मुझे कुछ सेटिंग्स बदलनी चाहिए?

@joostmeijles ऐसा लगता है कि आप सही href और as से next/link । डायनामिक पेज के लिए href को पेज href='/[slug]' और as को यूआरएल होना चाहिए as='/slug-1'

मुझे निर्माण के दौरान कंसोल में 3 लॉग मिल रहे हैं, क्या यह एक बग है?

// Page is showing three logs despite static path only having 2 entries and output generating only two files as intended
export default function Page(props){
    console.log("Page - should only show twice", props); 
    return <><h1>Page</h1></>
}

export async function unstable_getStaticProps(props) {
    console.log("unstable_getStaticProps - should only show twice", props);
    return {
      props
    };

}

export async function unstable_getStaticPaths() {
    console.log("show once")
    return {
        paths: [
        { params: { year: "1901" } },
        { params: { year: "1902" } },
        ]
    }
}

नहीं, यह RFC में fallback अनुसार अपेक्षित है।

नहीं, यह RFC में fallback अनुसार अपेक्षित है।

export async function unstable_getStaticPaths() {
    console.log("show once")
    return {
        fallback: false,
        paths: [
        // This renders /blog/hello-world to HTML at build time
        { params: { year: "1901" } },
        { params: { year: "1902" } },
        ]
    }
}

मैंने ऑप्ट आउट करने का प्रयास किया लेकिन मुझे यह त्रुटि मिल रही है।

त्रुटि: / [वर्ष] (फ़ॉलबैक) में अस्थिर_गेटस्टैटिकपाथ से लौटाई गई अतिरिक्त कुंजियाँ वर्तमान में अनुमत एकमात्र फ़ील्ड paths

फिर से एक अनुस्मारक कि आप एक प्रयोगात्मक सुविधा का उपयोग कर रहे हैं और हम वर्तमान में व्यवहार के साथ प्रयोग कर रहे हैं और सब कुछ लागू नहीं किया गया है।

क्या यह सुविधा getStaticProps केवल पृष्ठों के लिए उपलब्ध होगी?
ऐप/दस्तावेज़ के लिए भी दिलचस्प होगा, उदाहरण के लिए एप्लिकेशन के लिए कुछ वैश्विक कॉन्फ़िगरेशन प्राप्त करें?

मैंने इसे 'सफलतापूर्वक' कार्यान्वित किया है और मैं अब तक के परिणामों से खुश हूं .. लेकिन मुझे आश्चर्य है कि बाद के निर्माण को 'तेज' बनाने का कोई तरीका है? उदाहरण के लिए जांचें कि क्या एसएसजी उत्पन्न पृष्ठ नहीं बदले हैं और उन्हें फिर से उत्पन्न नहीं करते हैं? (शायद मेरी ओर से इच्छाधारी सोच)

@timneutkens क्या एसएसजी पृष्ठों के लिए

@timneutkens क्या एसएसजी पृष्ठों के लिए

हाँ यह एक बढ़िया विकल्प होगा। वर्तमान में स्वयं को SSR के साथ उत्पन्न कर रहा हूं। (लेकिन साइटमैप.एक्सएमएल फ़ाइल लोड होने में अधिक समय लेती है)

https://github.com/zeit/next.js/issues/9524#issuecomment -585293270

प्रारंभ में केवल पृष्ठों के लिए क्योंकि अन्य कार्य होंगे जो getStaticProps के लैंड होने के बाद उसे प्रभावित करते हैं।

https://github.com/zeit/next.js/issues/9524#issuecomment -586957539

हाँ, लेकिन इस RFC के भाग के रूप में नहीं। इस भूमि के बाद एक अनुवर्ती कार्रवाई होगी।

@timneutkens मुझे लगता है कि एसएसजी पृष्ठों के लिए कार्यान्वयन आसान है क्योंकि आप हर बार एक यूआरआई को एक सरणी में धक्का दे सकते हैं अगला एक स्थिर पृष्ठ बनाता है और फिर, जब यह समाप्त होता है, तो बस प्रत्येक एक्सएमएल टैग में सरणी को मैप करें, इसमें शामिल हों और इसे बीच में डालें एक <sitemapindex> टैग का। getStaticProps में excludeFromSitemap नामक रिटर्न ऑब्जेक्ट में एक और कुंजी हो सकती है, इसलिए डिफ़ॉल्ट सभी पृष्ठों को sitemap.xml में शामिल करने के लिए डिफ़ॉल्ट होगा लेकिन ऑप्ट आउट करने के विकल्प के साथ।

यदि ऐसा होता, तो डेवलपर्स का इस पर अच्छा नियंत्रण होता कि कौन सा स्थिर पृष्ठ साइटमैप में जाएगा (उदाहरण के लिए: यदि पृष्ठ [foo] का getStaticPaths फ़ंक्शन foo साथ पथ लौटाता है 'abc' और 'xyz' लेकिन साइटमैप में केवल 'abc' फ़ाइल होनी चाहिए, डेवलपर excludeFromSitemap से true सेट करने में सक्षम होगा ==='xyz' में getStaticProps ।

साथ ही, SSR और स्थिर पृष्ठों के लिए, पृष्ठ फ़ाइल से एक स्थिरांक (यानी export const excludeFromSitemap = true; ) निर्यात करना संभव हो सकता है, जैसे getServerProps , getStaticPaths और getStaticProps निर्यात किए जाते हैं।

SSG पृष्ठों में यदि निर्यातित excludeFromSitemap स्थिरांक (पृष्ठ डिफ़ॉल्ट) है और वह कुंजी getStaticProps फ़ंक्शन (पथ विशिष्ट) से लौटाए गए ऑब्जेक्ट में भी है, तो निर्यात किया गया मान डिफ़ॉल्ट के रूप में कार्य करना चाहिए उस पृष्ठ के सभी पथों के लिए मान और पथ विशिष्ट excludeFromSitemap , जब getStaticProps ऑब्जेक्ट में मौजूद हो, तो पृष्ठ के डिफ़ॉल्ट को ओवरराइड करना चाहिए (ताकि एक पृष्ठ export cosnt excludeFromSitemap = true और फिर उस विशिष्ट पथ को छोड़कर साइटमैप से सभी पथों को बाहर करने के लिए getStaticProps मूल्य false से लौटाई गई वस्तु में excludeFromSitemap कुंजी जोड़ें)।

सरणी में जोड़ने के लिए कोड कुछ इस तरह होगा (मैंने सत्य तालिका की गणना की और कर्णघ मानचित्र के साथ न्यूनतम बूलियन अभिव्यक्ति प्राप्त की):

//...somewhere else
const validExcludeFromSitemapTypes = ['boolean','undefined'];

//...for each path
const isSSG = !!getStaticPropsReturnedObj && typeof getStaticPropsReturnedObj === "object";
if(
    validExcludeFromSitemapTypes.indexOf(typeof pageExports.excludeFromSitemap)<0 ||
    (isSSG && validExcludeFromSitemapTypes.indexOf(typeof getStaticPropsReturnedObj.excludeFromSitemap)<0)
) {
    throw new Error("'excludeFromSitemap' can either be ommited (undefined) or be a boolean");
}
const defaultExcludedValue = !!pageExports.excludeFromSitemap;
const hasSpecificExcluded = isSSG && typeof getStaticPropsReturnedObj.excludeFromSitemap !== "undefined";
const specificExcludedValue =  isSSG ? !!getStaticPropsReturnedObj.excludeFromSitemap : false;

if(!specificExcludedValue && (!defaultExcludedValue || hasSpecificExcluded))
    sitemapURIs.push(correctlyEncodedURI);

सरणी को साइटमैप में बदलना ऐसा करना जितना आसान होगा (मान लें कि सरणी में यूआरआई पहले से एन्कोडेड हैं और !excludeFromSitemap द्वारा फ़िल्टर किए गए हैं):

function createSitemap(sitemapURIs: string[]): string {
    return `<sitemapindex>${sitemapURIs.map(u=>`<sitemap><loc>u/loc></sitemap>`).join('')}</sitemapindex>`;
}

मुझे लगता है कि यह सुविधा नेक्स्ट.जेएस में अच्छी तरह से बैठेगी क्योंकि इसके मिशन का एक हिस्सा उपयोगकर्ताओं को 100 एसईओ स्कोर देना है और sitemap.xml होने से बहुत मदद मिलेगी! ( robots.txt संभावित रूप से else जोड़कर भी उत्पन्न किया जा सकता है जो उस स्थिति को साइटमैप सरणी में पथ जोड़ता है ताकि उस पथ को अस्वीकृत पृष्ठों की एक और सरणी में जोड़ा जा सके)

वर्तमान रिलीज़ संस्करण में, unstable_getStaticPaths के साथ unstable_getStaticProps फ़ंक्शन का उपयोग करते समय, आप /api/ में रहने वाले कार्यों के लिए एपीआई कॉल नहीं कर सकते।
चूंकि सर्वर नहीं चल रहा है, इस तरह से संबंधित अनुरोध करना और स्थिर प्रॉप्स उत्पन्न करना असंभव है।
आपको या तो पथ कार्यों की आपूर्ति नहीं करनी है (जो मूल रूप से इस एसएसआर को कैश के साथ बनाता है, जो अभी भी अच्छा है!) या एसएसजी के बजाय एसएसआर पर निर्भर है।

शायद यह इस सुविधा के लिए एक अच्छा अतिरिक्त होगा? मैं अनिश्चित हूं कि यहां सबसे अच्छा तरीका क्या होगा, मैंने कहीं और एक प्रस्ताव पढ़ा है, जिसमें एसएसआर और /api मार्गों के साथ http अनुरोध को शॉर्टकट करने का सुझाव दिया गया है, यह यहां भी काम आएगा।

लेकिन यह सब निश्चित रूप से बिल्ड वातावरण में चल रहे कोड का मतलब होगा, जो अन्य सेवाओं/डीबी कॉल या इसी तरह के कॉल करेगा। इसे लागू करते समय स्पष्ट किया जाना चाहिए, लेकिन यह इस सुविधा के लिए एक अच्छा अतिरिक्त होगा।

@reckter हाँ, मैंने अभी कुछ ऐसा ही किया है। मुझे अपने डीबी से प्रत्येक अलग पृष्ठ अनुरोध के लिए कनेक्ट करना पड़ा, जबकि वे स्थिर रूप से जेनरेट किए जा रहे थे। बहुत अजीब लगा...

मुझे आशा है कि यह अंतिम उपयोग का मामला नहीं है

किसी प्रकार की इनिशियलाइज़ेशन स्क्रिप्ट के लिए अच्छा होगा जिसे आप next.config या कुछ और से सेटअप कर सकते हैं ...

@reckter एसएसजी/एसएसआर से एपीआई मार्गों पर HTTP अनुरोधों को शॉर्टकट करने का एक तरीका बहुत अच्छा होगा! उन परिदृश्यों में से किसी एक पर खुद से नेटवर्क अनुरोध करना अजीब लगता है।

वैसे भी, एसएसजी के दौरान एपीआई मार्गों तक पहुँचने का एक संभावित समाधान यह होगा कि स्थिर पृष्ठों को संकलित करने से पहले एक स्थानीय सर्वर केवल /api मार्गों को चला रहा हो! तो निर्माण कदम होंगे:

1. एक सर्वर लॉन्च करें (शायद "एपीआई संकलन सर्वर" या ऐसा कुछ कहा जाता है) केवल /api मार्गों की सेवा कर रहा है
2. भागो unstable_getStaticPaths
3. unstable_getStaticProps चलाएँ
4. स्थिर पृष्ठों को संकलित करें

@reckter मूल रूप से आपको एपीआई मार्गों को कॉल करने की आवश्यकता नहीं है, आप इसे सीधे लागू करने वाले फ़ंक्शन को कॉल कर सकते हैं, यह http कारणों पर जाने वाले बहुत से ओवरहेड से भी बचता है।

मूल रूप से यदि आपके पास वर्तमान में एक एपीआई मार्ग है जो इस तरह दिखता है:

import myDb from 'mydatabaseprovider'
const db = myDb()

export default async (req, res) => {
  cont myData = await db.query('posts')
  res.json(myData)
}

आप इसे इसमें बदल देंगे:

import myDb from 'mydatabaseprovider'
const db = myDb()

export async function getData() {
  const myData = await db.query('posts')
  return myData
}

export default (req, res) => {
  const myData = await getData()
  res.json(myData)
}

और फिर अपने पेज में:

import {getData} from './api/myfunction'

export async function getStaticProps() {
  const myData = await getData()
  return {
    props: {
     myData
   }
  }
}

ग्राफक्यूएल एपीआई के लिए ऐसा करना मुश्किल होगा। और अधिकांश आरईएसटी के लिए भी।

एपीआई कॉल! = डीबी से प्राप्त करना (सामान्य रूप से)
एपीआई परत में लगभग हमेशा कुछ व्यावसायिक तर्क होते हैं जैसे फ़ील्ड का नाम बदलना, डेटा सुधार करना, आदि।

मुझे यकीन है कि आपके पास pages/api कॉल को अस्वीकार करने के कारण हैं... लेकिन वास्तविक एपीआई का बाईपास आसान या सस्ता नहीं होगा। और कुछ अतिरिक्त मिलीसेकंड अतिरिक्त कोड/जटिलता आईएमओ के लिए शुल्क से अधिक नहीं होंगे।

साथ ही यह अजीब लगता है कि किसी भी एपीआई के अनुरोधों की अनुमति दी जाएगी। अपनों के सिवा

उदाहरण के लिए unstable_getStaticPaths का उपयोग करने से पृष्ठ पुनः लोड हो जाता है, उदाहरण के लिए Redux में वर्तमान स्थिति खो जाती है। क्या भविष्य में इस व्यवहार को बदला जाएगा?

संपादित करें: ऐसा लगता है कि लिंक या राउटर में as विकल्प का उपयोग करके इस व्यवहार को दरकिनार किया जा सकता है

<Link
  href='/item/[key]'
  as={`/item/${itemName}`}
>

router.push(
  '/item/[key]',
  `/item/${itemName}`
);

@meesvandongen यह हमेशा से ऐसा ही था। यदि आपका <Link> अमान्य है, तो यह आपको बैकएंड भाग में ले जाता है, मूल रूप से <a> रूप में काम करता है। [key] जैसे गतिशील अंशों को संगत मानों के साथ जोड़ा जाना चाहिए।

@reaktivo pages/[lang]/blog/[id].js -> getStaticPaths स्थिर रूप से रेंडर करने के लिए सभी url प्रदान करते हैं।

https://github.com/zeit/next.js/issues/9524#issuecomment -562625858
इस मामले में इसे index.js को छोड़कर प्रत्येक पृष्ठ के लिए getStaticPaths और getStaticProps फ़ंक्शन जोड़ने की आवश्यकता है।
यदि कुछ mdx पृष्ठ हैं, तो परियोजना को बनाए रखना अधिक कठिन है

स्थिर getStaticPaths getStaticProps विधियों में परिवर्तन या उनके साथ संगत पर विचार करें। https://github.com/zeit/next.js/issues/9524#issuecomment -558617056
यदि ऐसा है, तो पृष्ठ को उच्च-क्रम फ़ंक्शन या उच्च-आदेश घटक (HOC) द्वारा लपेटा जा सकता है।
इस तरह कोड अधिक रखरखाव योग्य और टाइपस्क्रिप्ट के लिए अधिक सुविधाजनक है।

ट्री-हिलिंग बनाम डायनेमिक। क्या सिरदर्द व्यापार-बंद है।😂

9.2.3-canary.13 मैंने इस तरह getStaticPaths में fallback: false का उपयोग करने का प्रयास किया:

  return {
    fallback: false,
    paths: slugs.map(slug => ({params: {slug: slug}}))
  }

लेकिन यह निम्न त्रुटि के साथ विफल रहता है:

Error: Extra keys returned from unstable_getStaticPaths in /blog/[slug] (fallback) Expected: { paths: [] }

9.2.3-canary.13 मैंने इस तरह getStaticPaths में fallback: false का उपयोग करने का प्रयास किया:

  return {
    fallback: false,
    paths: slugs.map(slug => ({params: {slug: slug}}))
  }

लेकिन यह निम्न त्रुटि के साथ विफल रहता है:

Error: Extra keys returned from unstable_getStaticPaths in /blog/[slug] (fallback) Expected: { paths: [] }

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

मैंने अभी तक नेक्स्टज पर अपना संस्करण अपडेट नहीं किया है, लेकिन यह समान होना चाहिए:

return data.map(item => {
    return {
      params: {
        slug: item.slug,
      },
    }
  })

@jorngeorg यह एक खुला पीआर है: https://github.com/zeit/next.js/pull/10701

शानदार योगदान! यह वास्तव में स्थैतिक प्रतिपादन प्रक्रिया में सुधार करता है।

मैं डॉक्स में जोड़ने की सलाह देता हूं कि गतिशील मार्गों पर, "फ़ॉलबैक" बिना किसी कॉल के getStaticProps उत्पन्न हो जाएगा - जिसका अर्थ है कि आपको अपने घटक को उस मामले के लिए कोड करना होगा जहां प्रोप खाली है।

वैकल्पिक रूप से आप फ़ॉलबैक बनाते समय बिना किसी संदर्भ के getStaticProps पर कॉल करने के लिए व्यवहार को बदल सकते हैं। यह इस बात के अनुरूप होगा कि next export वर्तमान में कैसे काम करता है (उदाहरण के लिए /p/[id].js को बिना किसी संदर्भ के getInitialProps चलाकर /p/[id].html में निर्यात किया जाता है)।

• getStaticProps - next build समय पर स्थिर पीढ़ी (एसएसजी) में ऑप्ट-इन करें।
• getServerProps - सर्वर-साइड रेंडरिंग (SSR) में ऑप्ट-इन करें जो ऑन-डिमांड रेंडर करता है।

१०७२२

getServerProps का नाम बदलकर getServerSideProps करें।

मैं डॉक्स में जोड़ने की सलाह देता हूं कि गतिशील मार्गों पर, "फ़ॉलबैक" बिना किसी कॉल के getStaticProps उत्पन्न हो जाएगा - जिसका अर्थ है कि आपको अपने घटक को उस मामले के लिए कोड करना होगा जहां प्रोप खाली है।

इसका उल्लेख करने के लिए अच्छा बिंदु! मेरे पास कुछ बिल्ड/तैनाती त्रुटियां भी थीं क्योंकि मैंने इसे याद किया है।

परिवर्तनों को दर्शाने के लिए RFC को अपडेट किया गया

@timneutkens

• उसी पथ के बाद के अनुरोध उत्पन्न पृष्ठ की सेवा करेंगे

मुझे लगता है कि इसका मतलब है कि Next.js जेनरेट किए गए पेज को कैश करेगा? क्या यह इन-मेमोरी कैश है? क्या यह कैश सीमा से बंधा है या इसका परिणाम मेमोरी लीक हो सकता है?

जब आप next start का उपयोग करते हैं तो यह वर्तमान कैशिंग उदाहरण के समान lru-cache का उपयोग करता है, वर्तमान में डिफ़ॉल्ट सीमा 50MB है, हम इसे बाद में कॉन्फ़िगर करने योग्य बना सकते हैं: https://github.com/zeit/next.js/ ब्लॉब/कैनरी/पैकेज/नेक्स्ट/नेक्स्ट-सर्वर/सर्वर/spr-cache.ts#L90

जब आप ZEIT Now पर होस्ट करते हैं तो सीडीएन/प्रॉक्सी पर पीढ़ी और कैशिंग होती है, इसलिए यह थोड़ा अलग काम करता है और आपको मेमोरी लीक के बारे में चिंता करने की ज़रूरत नहीं है या यदि आप lru सीमा से अधिक जा रहे हैं।

ठीक है, उचित लगता है। एक समझदार डिफ़ॉल्ट व्यवहार के रूप में मेरे मन में कमोबेश यही था।

• getStaticProps - next build समय पर स्थिर पीढ़ी (एसएसजी) में ऑप्ट-इन करें।
• getServerProps - सर्वर-साइड रेंडरिंग (SSR) में ऑप्ट-इन करें जो ऑन-डिमांड रेंडर करता है।

१०७२२

getServerProps का नाम बदलकर getServerSideProps करें।

हालांकि नाम बदलें क्यों? IMHO getServerProps टाइप करने के लिए पर्याप्त सटीक और छोटा है, साइड जोड़ना मेरे लिए बेमानी लगता है।

मैं सोच रहा था कि क्या GetStaticPaths विधि में कोई बदलाव किया गया है? मेरे गतिशील पृष्ठ अब स्थिर पृष्ठों के रूप में उत्पन्न नहीं होते हैं, उन्हें अब लैम्ब्डा कार्यों के रूप में निर्यात किया जाता है?

क्या मैं सही हूं जब डिफ़ॉल्ट व्यवहार अब यह है कि पृष्ठों को पहले लैम्ब्डा के रूप में प्रस्तुत किया जाता है और केवल एक विशिष्ट पृष्ठ पर जाने के बाद पृष्ठ एक स्थिर पृष्ठ पर उत्पन्न होता है? (जैसा कि फ़ॉलबैक में बताया गया है)

@erhankaradeniz getStaticPaths कोई परिवर्तन नहीं किया गया है जिसके परिणामस्वरूप आपका पृष्ठ लैम्बडास होगा। यह संभवतः उपयोग में त्रुटि है।

क्या आप कृपया अपना कोड दिखा सकते हैं ताकि हम समस्या की पहचान कर सकें?

@Timer अभी के लिए मैं वापस [email protected] पर वापस आ गया पैरा का उपयोग कर सकता हूं, जब तक कि मुझे पता नहीं चलता कि यह पथों के साथ काम क्यों नहीं कर रहा है।

इस प्रकार मैंने वर्तमान में अपने पथ तैयार किए हैं:

return cityData.map(city => {
    return {
      params: {
        country: city.countrySlug,
        city: city.slug,
      },
    }
  })

और एक अन्य पृष्ठ में मैं करता हूं:

return cityData.map(city => {
    return {
      params: {
        country: city.countrySlug,
        city: city.slug,
      },
    }
  })

पथों के साथ इसे नई कैनरी रिलीज़ में बदलने में कामयाब नहीं हुआ है। मैं कुछ गलत कर रहा हूं, क्योंकि कंसोल.लॉग getStaticPath भीतर भी ट्रिगर नहीं होते हैं

मुझे नेस्टेड पथ प्रीरेंडरिंग और एसएसजी से परेशानी है:

// pages/[lang]/[...slugs].js

export async function getStaticPaths() {
  let knex = await import("knex/client").then(m => m.default)
  let pages = await knex("page").select(["lang", "url"])
  return {
    fallback: true,
    paths: pages.map(page => {
      return {
        params: {
          lang: page.lang,
          slugs: page.url == "/" ? [] : page.url.slice(1).split("/"),
        }
      }
    }),
  }
}

फलस्वरूप होता है

Error occurred prerendering page "/en/". Read more: https://err.sh/next.js/prerender-error:
Error: The provided export path '/en/' doesn't match the '/[lang]/[...slugs]' page.

होम पेज के लिए। किसी कारण से NextJS मिलान करने में विफल रहता है

{lang: "en", slugs: []}

प्रति

/[lang]/[...slugs]

अगर मैं {lang: "en", slugs: ["/"]} प्रदान करता हूं तो यह बनाता है लेकिन गलत यूआरएल के साथ:

├ ● /[lang]/[...slugs]      875 B        204 kB
├   ├ /en/credits
├   ├ /en/%2F

रिकॉर्ड के लिए, getServerSideProps समान सेटअप के साथ ठीक काम करता है।

मुझे पता है कि यह प्रायोगिक है लेकिन यह धागा प्रतिक्रिया देने के लिए है, है ना?

pages/[lang]/[...slugs].js मेल खाता है /en/abcdef न कि /en , इसके लिए आपको वर्तमान में pages/[lang]/index.js ।

इसके लिए एक सुविधा अनुरोध खुला है: https://github.com/zeit/next.js/issues/10488

सबसे पहले तो ये कमाल है। मैं Next.js में ऐसा कुछ होने की उम्मीद कर रहा हूं ताकि मैं अंततः Gatsby.js से दूर जा सकूं और एक हाइब्रिड ऐप (स्थिर + गतिशील) हो।

🚀 मैंने कैनरी की कोशिश की और आधा बेक्ड जटिल ऐप संस्करण ठीक काम किया। मैं स्वीकार करता हूं कि मैंने यहां सभी टिप्पणियों को नहीं पढ़ा है, लेकिन यह सुनिश्चित नहीं है कि ट्री-हिलिंग अभी तक लागू की गई है।

🤔 getStaticPaths बहुत अधिक setStaticPaths जैसा लगता है जहां हम SSG व्यवहार के लिए स्थिर पथ को परिभाषित कर रहे हैं। इस तरह ने मुझे थोड़ा भ्रमित किया।

🧐 मुझे आश्चर्य है कि क्या हम श्रेणियों का निर्माण करके निर्माण समय में सुधार कर सकते हैं? मुझे पता है कि यह सेटअप को जटिल करेगा लेकिन यह इसके लायक होगा। मुझे समझाने दो:

क्या होगा यदि हमारे पास setBuildCategory जैसा कुछ है जो इसे blog या pages या जो भी कोई 2020-content चाहता है। तब SSG निर्माता उस पृष्ठ की श्रेणी की तलाश करता है जिसे बदल दिया गया था और केवल उस श्रेणी को कैश + नए रेंडर के संयोजन से फिर से बनाने का प्रयास करता है। ऐसा कुछ हमें SSG को तेज़ बनाने में मदद कर सकता है और उन चीज़ों के लिए बड़े निर्माण समय से बच सकता है जिनमें बहुत अधिक परिवर्तन होने की संभावना नहीं है लेकिन फिर भी बदल सकते हैं इसलिए संग्रहीत नहीं किया जा सकता है।

अगर यह कुछ समझ में आता है; एक कॉल पर कूदने और इस बारे में बात करने में मुझे खुशी हो रही है।

कस्टम सर्वर कार्यान्वयन के साथ getServerSideProps को कैसे संभालें?

if (pathname === '/a') {
  app.render(req, res, '/b', query)
}

ऊपर के उदाहरण में, /a से पेज pages/b.js रेंडर हो जाएगा। लेकिन /a क्लाइंट-साइड रीडायरेक्शन a.json फ़ाइल को डाउनलोड करने का प्रयास करता है, जो इस मामले में मौजूद नहीं है।

क्या हमें अलग-अलग JSON फ़ाइलों को रेंडर करने के लिए /_next/data/{BUILD_ID}/{PAGE}.json अनुरोधों के लिए समान शर्तें रखनी चाहिए?

GetStaticPaths में fallback: true का उपयोग करने के लिए, मैं req ऑब्जेक्ट कैसे प्राप्त करूं? वर्तमान में ऐसा प्रतीत होता है कि मैं नहीं कर सकता। मुझे इसकी आवश्यकता है कि मार्ग को प्रमाणित करने के लिए ब्राउज़र से कुछ कुकीज़ प्राप्त करें

@tylermcrobert जब कोई अनुरोध नहीं है तो आप कुकीज़ को हथियाने की कल्पना कैसे करते हैं ?!
वास्तविक आगंतुक अनुरोधों के आधार पर बैकएंड वाले मार्गों को "स्थिर" और "गतिशील" की परिभाषाओं द्वारा स्थिर नहीं बनाया जा सकता है। यह कहने के लिए नहीं कि आप स्थिर और प्रामाणिक को संयोजित नहीं कर सकते... यह केवल लेख का भाग है जो पृष्ठों के बजाय API और क्लाइंट कोड से संबंधित होगा।

कस्टम सर्वर कार्यान्वयन के साथ getServerSideProps को कैसे संभालें?

if (pathname === '/a') {
  app.render(req, res, '/b', query)
}

ऊपर के उदाहरण में, /a से पेज pages/b.js रेंडर हो जाएगा। लेकिन /a क्लाइंट-साइड रीडायरेक्शन a.json फ़ाइल को डाउनलोड करने का प्रयास करता है, जो इस मामले में मौजूद नहीं है।

क्या हमें अलग-अलग JSON फ़ाइलों को रेंडर करने के लिए /_next/data/{BUILD_ID}/{PAGE}.json अनुरोधों के लिए समान शर्तें रखनी चाहिए?

Next.js डायनामिक रूट पैरामीटर का समर्थन करता है, इसलिए कस्टम सर्वर में रीमैपिंग की अब शायद ही कभी आवश्यकता होती है: https://nextjs.org/docs/routing/dynamic-routes

आपके द्वारा पहले से उल्लिखित दृष्टिकोण <Link> साथ काम नहीं करता है (एक पूर्ण पृष्ठ संक्रमण का कारण होगा) इसलिए getServerSideProps पहले से ही काम करता है।

@tylermcrobert जब कोई अनुरोध नहीं है तो आप कुकीज़ को हथियाने की कल्पना कैसे करते हैं ?!
वास्तविक आगंतुक अनुरोधों के आधार पर बैकएंड वाले मार्गों को "स्थिर" और "गतिशील" की परिभाषाओं द्वारा स्थिर नहीं बनाया जा सकता है। यह कहने के लिए नहीं कि आप स्थिर और प्रामाणिक को संयोजित नहीं कर सकते... यह केवल लेख का भाग है जो पृष्ठों के बजाय API और क्लाइंट कोड से संबंधित होगा।

हो सकता है कि मैं उस मामले में फ़ॉलबैक विकल्प को गलत समझ रहा हूँ। आप जो कह रहे हैं वह बिल्ड-टाइम संदर्भ में पूरी तरह से समझ में आता है।

जब कोई पूर्वनिर्धारित मार्ग नहीं है, तो क्या fallback: true नहीं है? उस स्थिति में, ब्राउज़र से फ़ॉलबैक प्राप्त किया जाएगा, नहीं?

@tylermcrobert हाँ fallback: true मामले में एक अनुरोध है लेकिन एपीआई को "सबसे कम आम भाजक" द्वारा एकीकृत किया जाना है। मैं एक ऐसी कार्य प्रणाली की कल्पना नहीं कर सकता जहां सब कुछ परिसर के एक सेट के साथ बनाया गया हो और फिर इसे परिसर के एक पूरी तरह से अलग सेट के साथ क्रमिक रूप से अपडेट किया गया हो। यह समर्थन करने के लिए एक आपदा होगी।

मुझे लगता है कि आप इस बिंदु को याद करते हैं कि उन वृद्धिशील बिल्डों को अभी भी बिल्ड के बीच कैश किया जाएगा। तो पहले विज़िटर की भूमिका सभी परिणामी उपयोगकर्ताओं के लिए बिल्ड परिणाम को प्रभावित करेगी! एक बुरा विचार लगता है।

@ ivan-kleshnin मैं समझता हूं और निश्चित रूप से सहमत हूं। मेरे विशिष्ट उपयोग के मामले के कारण मैं पूछता हूं।

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

उस पूर्वावलोकन तक पहुंचने के लिए, मुझे एपीआई पूर्वावलोकन रेफरी तक पहुंच की आवश्यकता है जो कुकी के माध्यम से दिया जाता है।

क्या यह एक ऐसा मामला है जहां मुझे पूरी तरह से useStaticProps स्क्रैप करना चाहिए? मैं स्थिर बिल्ड के लाभ को खोने से नफरत करूंगा क्योंकि मैं अपने दस्तावेज़ों का पूर्वावलोकन नहीं कर सकता।

गैट्सबी जैसी किसी चीज़ पर इस आरएफसी का आकर्षण यह है कि यह हमें स्थिर साइट पीढ़ी के साथ "हाइब्रिड नियंत्रण" देता है जिससे हेडलेस सीएमएस के साथ काम करने में दर्द कम हो जाता है

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

बने रहें, और जल्द ही

तो अगर मैं इसे सही समझता हूं, तो हम फ़ॉलबैक सत्य का उपयोग करने में सक्षम होते हैं, उदाहरण के लिए मेरे मामले में एक उपयोगकर्ता पंजीकृत करता है (कोई स्थिर पृष्ठ उत्पन्न नहीं होता है क्योंकि यह एक नया पृष्ठ/उपयोगकर्ता है) लेकिन जब प्रोफ़ाइल को विज़िट मिलती है तो यह स्वचालित रूप से जेनरेट हो जाती है?

एर्हान कराडेनिज़
http://www.erhankaradeniz.com

४ मार्च २०२० को २०:२५ बजे टिम न्यूटकेन्स नोटिफिकेशन @github.com ने लिखा:

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

बने रहें, और जल्द ही

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें, या सदस्यता समाप्त करें।

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

इसके लिए जल्द ही डॉक्स उतारे जाएंगे।

हाँ मेरा मतलब प्लेसहोल्डर पेज था .. मैं वास्तव में क्लाइंट-साइड पर यूजरडेटा लाऊंगा।

@timneutkens क्या विशिष्ट रूप से उत्पन्न पृष्ठों को हटाने या पुनर्निर्माण करने का कोई तरीका होगा?

नमस्ते!!! इष्टतम अनुप्रयोग की तरह ध्वनि। मुझे रिएक्ट और नेक्स्ट दोनों से प्यार है !!! हमारे लिए उपयोग करने के लिए सब कुछ इतना सुंदर और सरल बना दिया !! लेकिन उदाहरण में धारणा ब्लॉग शामिल है। मैं एक हेडलेस सीएमएस से पूछताछ करते समय कार्यान्वयन का एक उदाहरण देखना चाहता हूं और एक स्थिर वस्तु के रूप में निर्यात के रूप में प्रति पृष्ठ/पोस्ट प्राप्त करना चाहता हूं।

// चीयर्स, चूंकि यह शुक्रवार के करीब है !!!

@timneutkens यह रोमांचक है

एक परिदृश्य जिसे हम अक्सर हिट करते हैं और मेरे पास अभी तक next.js या gatsby के साथ डायनेमिक रूट या लूप में प्रोजेक्ट बनाने के अलावा कोई सही समाधान नहीं है:

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

मेरा प्रश्न/विचार: क्या आपको कोई रास्ता दिखाई देता है (भविष्य में?) getStaticPaths किसी ऐसी चीज़ के आधार पर पृष्ठ उत्पन्न कर सकता है जो मार्ग परम नहीं है लेकिन उनके बीच स्विच करने के लिए अनुरोध स्तर पर उपयोग किया जा सकता है (उदाहरण के लिए सर्वर रहित फ़ंक्शन locale आधार पर स्थिर, पूर्व-निर्मित परिणाम देता है)

कंक्रीट का मतलब यह होगा कि https://mysite.com/my-product और https://mysite.co.uk/my-product दो अलग-अलग स्थिर पृष्ठों की सेवा करेगा, लेकिन हमें अपना अगला ऐप 50x बार जनरेट किए बिना या हर अनुरोध पर एक सीएमएस हिट करने की आवश्यकता नहीं होगी😅

अग्रिम धन्यवाद और आपके विचार सुनने के लिए उत्सुक हैं, खासकर यदि यह भविष्य के लिए कुछ ऐसा है जिसे हल किया जा सकता है / आसपास काम किया जा सकता है ❤️

मैं एक उपयोग के मामले के बारे में सोच रहा हूं जहां मैं एसईओ के लिए उच्च-ट्रैफिक लैंडिंग पृष्ठों के लिए और सर्वर लोड को कम करने के लिए एसएसजी का उपयोग करना चाहता हूं, लेकिन फिर भी वर्तमान डेटा को हाइड्रेशन के बाद और क्लाइंट साइड रूटिंग पर इस पृष्ठ पर उपयोग करना चाहता हूं। क्या यह संभव होगा?

तो मूल रूप से इस पृष्ठ पर क्लाइंट साइड रूटिंग पर, व्यवहार getInitialProps जैसा होना चाहिए (पृष्ठ दिखाई देने से पहले वर्तमान डेटा प्राप्त किया जाता है)। और इस पृष्ठ पर सर्वर साइड रूटिंग पर, स्थिर एचटीएमएल परोसा जाना चाहिए और हाइड्रेटेड होना चाहिए, और फिर (वैकल्पिक रूप से) पृष्ठ पर कुछ डेटा अपडेट करने के लिए कुछ एपीआई प्रतिक्रियाएं प्राप्त की जानी चाहिए।

मैंने बस इसे आज़माने के लिए unstable_getStaticProps साथ खेला और मैं एक मजेदार संघर्ष में भाग गया: getStaticProps साथ एपीआई मार्गों का उपयोग करना मुश्किल है।

कोड के शब्दार्थ पर ध्यान न दें, लेकिन केवल डेटा प्रवाह प्रवाह:

// pages/api/healthcheck.ts
import { NextApiResponse, NextApiRequest } from 'next';

export type ApiHealthCheckResponse = {
  message: 'ok';
};

const healthCheckHandler = (
  req: NextApiRequest,
  res: NextApiResponse<ApiHealthCheckResponse | ''>,
) => {
  if (req.method === 'GET') {
    return res.status(200).json({ message: 'ok' });
  }

  return res.status(405).send('');
};

export default healthCheckHandler;

// pages/index.js
// ...

export async function unstable_getStaticProps() {
  return {
    props: {
      healthcheck: (await fetch('localhost:3000/api/healthcheck').json())
    },
  };
}

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

@martpie आप इस टिप्पणी को देखना चाहेंगे: https://github.com/zeit/next.js/issues/9524#issuecomment -589772756

नेक्स्ट-जेन स्टेटिक साइट जेनरेशन (SSG) सपोर्ट नेक्स्ट.js 9.3 में स्टेबल के रूप में जारी किया गया है!

इस रिलीज़ में "पूर्वावलोकन मोड" के लिए समर्थन, या स्थिर रूप से पहले से रेंडर किए गए पृष्ठ को बायपास करने और अधिकृत उपयोगकर्ताओं के लिए पृष्ठ को ऑन-डिमांड प्रस्तुत करने की क्षमता भी शामिल है।

आप इसके बारे में हमारे ब्लॉग पोस्ट में पढ़ सकते डॉक्स में कूदें!

कृपया किसी भी प्रश्न को Next.js GitHub समुदाय में पोस्ट करें!

यह बहुत अच्छा है! कड़ी मेहनत के लिए धन्यवाद!

ऐसा लगता है कि यह नई सुविधा अब गाथा और रेडक्स के साथ काम नहीं कर रही है