Back to Question Center
0

ਸਰਵਰ-ਰੈਂਡਰਡ ਰੀਐਕਟ ਵਿੱਚ ਅਸਿੰਕਰੋਨਸ API ਨਾਲ ਕੰਮ ਕਰਨਾ            ਸਰਵਰ-ਰੈਂਡਰਡ ਰਿਐਕਟਰੇਲੈਟਡ ਵਿਸ਼ਿਆਂ ਵਿਚ ਅਸਿੰਕਰੋਨਸ API ਨਾਲ ਕੰਮ ਕਰਨਾ: ES6Raw ਸਿਮਟਲ

1 answers:
ਸਰਵਰ-ਰੈਂਡਰਡ ਰੀਐਕੈਕਟ ਵਿੱਚ ਅਸਿੰਕਰੋਨਸ API ਨਾਲ ਕੰਮ ਕਰਨਾ

ਰੀਐਕਟੇਸ਼ਨ ਦੀ ਉੱਚ-ਗੁਣਵੱਤਾ, ਡੂੰਘਾਈ ਨਾਲ ਜਾਣ ਪਛਾਣ ਲਈ, ਤੁਸੀਂ ਕੈਨੇਡਾ ਦੇ ਪੂਰੇ ਸਟੈਕ ਡਿਵੈਲਪਰ ਵੇਸ ਬੋਸ ਤੋਂ ਪਹਿਲਾਂ ਨਹੀਂ ਜਾ ਸਕਦੇ. ਇੱਥੇ ਆਪਣੇ ਕੋਰਸ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਅਤੇ ਕੋਡ SITEPOINT ਨੂੰ 25% ਬੰਦ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਅਤੇ ਸਾਈਟਪੌਰਟ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਲਈ ਸਹਾਇਤਾ ਦੀ ਵਰਤੋਂ ਕਰੋ.

ਜੇ ਤੁਸੀਂ ਕਦੇ ਵੀ ਐੱਕ ਪੇਜ ਨੂੰ ਬੁਨਿਆਦੀ ਤੌਰ 'ਤੇ ਬਣਾਇਆ ਹੈ, ਤਾਂ ਇਹ ਸੰਭਾਵੀ ਤੌਰ ਤੇ ਗਰੀਬ ਐਸਈਓ ਅਤੇ ਹੌਲੀ ਜੰਤਰਾਂ ਤੇ ਕਾਰਗੁਜ਼ਾਰੀ ਦੇ ਮਾਮਲਿਆਂ ਤੋਂ ਪੀੜਤ ਹੈ. ਤੁਸੀਂ ਵੈਬ ਪੇਜਾਂ ਦੀ ਰਿਵਾਇਤੀ ਸਰਵਰ-ਸਾਈਡ ਰੈਡਰਿੰਗ ਨੂੰ ਵਾਪਸ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਖਾਸ ਤੌਰ 'ਤੇ ਨੋਡਏਜ ਐਸ - proveedores de servidores web.ਏ. ਦੇ ਨਾਲ, ਪਰ ਇਹ ਸਿੱਧਾ ਪ੍ਰਕਿਰਿਆ ਨਹੀਂ ਹੈ, ਖਾਸ ਕਰਕੇ ਅਸਿੰਕਰੋਨਸ API ਨਾਲ.

ਦੋ ਮੁੱਖ ਲਾਭ ਜੋ ਤੁਸੀਂ ਸਰਵਰ ਤੇ ਆਪਣਾ ਕੋਡ ਪੇਸ਼ ਕਰਦੇ ਹੋ:

  • ਲੋਡ ਵਾਰ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਵਾਧਾ
  • ਤੁਹਾਡੇ ਐਸਈਓ ਦੇ ਲਚਕਤਾ ਨੂੰ ਸੁਧਾਰਨਾ

ਯਾਦ ਰੱਖੋ ਕਿ Google ਤੁਹਾਡੇ ਸਾਮਾਲ ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਇੰਤਜ਼ਾਰ ਕਰਦਾ ਹੈ, ਸਿਰਲੇਖ ਸਮੱਗਰੀ ਵਰਗੀਆਂ ਸਧਾਰਨ ਗੱਲਾਂ ਬਿਨਾਂ ਕਿਸੇ ਸਮੱਸਿਆ ਦੇ ਬਦਲ ਜਾਣਗੀਆਂ. (ਮੈਂ ਦੂਜੀਆਂ ਖੋਜ ਇੰਜਣਾਂ ਲਈ ਗੱਲ ਨਹੀਂ ਕਰ ਸਕਦਾ, ਭਾਵੇਂ, ਜਾਂ ਇਹ ਕਿੰਨੀ ਭਰੋਸੇਯੋਗ ਹੈ.)

ਇਸ ਪੋਸਟ ਵਿੱਚ, ਮੈਂ ਸਰਵਰ ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੇ ਰਿਐਕਟਰ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਅਸਿੰਕਰੋਨਸ API ਤੋਂ ਡਾਟਾ ਲੈਣ ਬਾਰੇ ਵਿਚਾਰ ਕਰਾਂਗਾ. ਰੀਕੈਕਟ ਕੋਡ ਵਿੱਚ ਜਾਵਾ-ਸਕ੍ਰਿਪਟ ਦੇ ਬਿਲਡਿੰਗ ਦਾ ਪੂਰਾ ਢਾਂਚਾ ਮੌਜੂਦ ਹੈ. ਇਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ, ਇਕ ਨਿਯੰਤਰਕ ਨਾਲ ਰਵਾਇਤੀ ਐਮ.ਵੀ.ਸੀ. ਪੈਟਰਨ ਤੋਂ ਉਲਟ, ਤੁਸੀਂ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਐਪ ਦੁਆਰਾ ਪੇਸ਼ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਕੀ ਲੋੜ ਹੈ. ਰੀੈਕਟ ਐਪ ਬਣਾਓ ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਾਲ, ਤੁਸੀਂ ਬਹੁਤ ਹੀ ਉੱਚ ਗੁਣਵੱਤਾ ਦੇ ਇੱਕ ਕਾਰਜਕਾਰੀ ਐਪ ਨੂੰ ਛੇਤੀ ਨਾਲ ਬਣਾ ਸਕਦੇ ਹੋ, ਪਰ ਇਸਦੀ ਲੋੜ ਹੈ ਕਿ ਤੁਸੀਂ ਸਿਰਫ ਕਲਾਇੰਟ ਤੇ ਰੈਂਡਰਿੰਗ ਨੂੰ ਵਰਤ ਸਕੋ. ਇਸਦੇ ਨਾਲ ਕਾਰਗੁਜ਼ਾਰੀ ਸੰਬੰਧੀ ਕੋਈ ਮੁੱਦਾ ਹੈ, ਅਤੇ ਨਾਲ ਹੀ ਸਮਾਲਟ ਮੁੱਦਾ ਵੀ ਹੈ, ਜਿੱਥੇ ਤੁਸੀਂ ਫਿਟ ਦੇਖਦੇ ਹੋ ਜਦੋਂ ਤੁਸੀਂ ਟੈਂਪਲੇਟਿੰਗ ਇੰਜਣ ਚਲਾਉਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਸਿਰ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ.

ਸਮੱਸਿਆ

ਸੈਮਲਾਟ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸੇ ਲਈ ਸਮਕਾਲੀ ਰੂਪ ਵਿੱਚ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਡੇਟਾ ਨਹੀਂ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਲੋਡ ਕਰਨ ਵਾਲੀ ਸਕਰੀਨ ਨੂੰ ਪੇਸ਼ ਕਰਦੇ ਹੋ ਅਤੇ ਆਉਣ ਵਾਲੇ ਡੇਟਾ ਦੀ ਉਡੀਕ ਕਰੋਗੇ. ਇਹ ਸਰਵਰ ਤੋਂ ਇੰਨਾ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦਾ, ਕਿਉਂਕਿ ਤੁਸੀਂ ਨਹੀਂ ਜਾਣਦੇ ਕਿ ਤੁਹਾਡੀ ਕੀ ਲੋੜ ਹੈ, ਜਾਂ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਤੁਹਾਨੂੰ ਕੀ ਚਾਹੀਦਾ ਹੈ ਪਰ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਰੈਂਡਰ ਕੀਤਾ ਹੈ.

ਇਸ ਸਟਾਕ-ਸਟੈਂਡਰਡ ਰੈਂਡਰ ਵਿਧੀ ਨੂੰ ਮਿਟਾਓ:

     ਪ੍ਰਤੀਕਰਮ. ਦੇਣਾ ਹੈ( <ਪ੍ਰਦਾਤਾ ਸਟੋਰ = {store}>          , ਦਸਤਾਵੇਜ਼. getElementById ('ਰੂਟ'))    

ਮੁੱਦੇ:

  1. ਇਹ ਇੱਕ ਡੌਮ ਰੂਟ ਦੇ ਰੂਟ ਐਲੀਮੈਂਟ ਦੀ ਭਾਲ ਕਰ ਰਿਹਾ ਹੈ. ਇਹ ਮੇਰੇ ਸਰਵਰ ਤੇ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਇਸ ਲਈ ਸਾਨੂੰ ਇਸ ਨੂੰ ਵੱਖ ਕਰਨਾ ਪਵੇਗਾ.
  2. ਸਾਡੇ ਕੋਲ ਸਾਡੇ ਮੁੱਖ ਰੂਟ ਐਲੀਮੈਂਟ ਦੇ ਬਾਹਰ ਕੁਝ ਵੀ ਨਹੀਂ ਹੈ. ਅਸੀਂ ਫੇਸਬੁੱਕ ਟੈਗਸ, ਟਾਈਟਲ, ਵੇਰਵਾ, ਵੱਖਰੇ ਐਸਈਓ ਟੈਗਾਂ ਨੂੰ ਸੈਟ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਅਤੇ ਸਾਡੇ ਕੋਲ ਬਾਕੀ ਬਚੇ ਡੀ.ਓ.ਐਮ ਤੇ ਤੱਤ ਦੇ ਖਾਸਤੌਰ ਤੇ ਸਿਰ ਨਹੀਂ ਹਨ.
  3. ਅਸੀਂ ਕੁਝ ਰਾਜ ਪ੍ਰਦਾਨ ਕਰ ਰਹੇ ਹਾਂ, ਪਰੰਤੂ ਸਰਵਰ ਅਤੇ ਕਲਾਇੰਟ ਦੇ ਵੱਖ-ਵੱਖ ਰਾਜ ਹਨ. ਸਾਨੂੰ ਇਹ ਸਮਝਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਕਿਵੇਂ ਉਸ ਸਥਿਤੀ ਨੂੰ ਸੰਭਾਲਣਾ ਹੈ (ਇਸ ਕੇਸ ਵਿੱਚ, Redux).

ਤਾਂ ਮਿਥੁਨਿਕ ਨੇ ਇੱਥੇ ਦੋ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ, ਅਤੇ ਉਹ ਬਹੁਤ ਮਸ਼ਹੂਰ ਹੋ ਗਏ ਹਨ, ਇਸ ਲਈ ਉਮੀਦ ਹੈ ਕਿ ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਦੂਜੀ ਲਾਇਬ੍ਰੇਰੀਆਂ 'ਤੇ ਅੱਗੇ ਵਧਦੀ ਹੈ.

ਰੈਡਯੂਕਸ : ਸਟੇਰੀ ਸਟੋਰ ਜਿੱਥੇ ਤੁਹਾਡਾ ਸਰਵਰ ਅਤੇ ਕਲਾਇਟ ਸਮਕਾਲੀ ਹੁੰਦੇ ਹਨ ਇੱਕ ਡਰਾਮਾ ਮੁੱਦਾ ਹੈ. ਇਹ ਬਹੁਤ ਮਹਿੰਗਾ ਹੈ, ਅਤੇ ਆਮ ਤੌਰ 'ਤੇ ਗੁੰਝਲਦਾਰ ਬੱਗ ਵੱਲ ਅਗਵਾਈ ਕਰਦਾ ਹੈ. ਸਰਵਰ ਪਾਸੇ, ਆਦਰਸ਼ਕ ਤੌਰ ਤੇ, ਤੁਸੀਂ ਕੁਝ ਕੰਮ ਕਰਨਾ ਚਾਹੁੰਦੇ ਨਹੀਂ ਹੋ ਜਿਸ ਨਾਲ ਰੈੱਡੌਕਸ ਨੂੰ ਕੰਮ ਕਰਨ ਅਤੇ ਸਹੀ ਢੰਗ ਨਾਲ ਅਨੁਵਾਦ ਕਰਨ ਤੋਂ ਇਲਾਵਾ ਕੁਝ ਵੀ ਨਹੀਂ ਕਰਨਾ ਪੈਂਦਾ. (ਤੁਸੀਂ ਅਜੇ ਵੀ ਇਸ ਨੂੰ ਸਧਾਰਣ ਤੌਰ ਤੇ ਵਰਤ ਸਕਦੇ ਹੋ, ਸਿਰਫ ਕਲਾਇਟ ਦੀ ਤਰ੍ਹਾਂ ਦੇਖਣ ਲਈ ਰਾਜ ਨੂੰ ਕਾਫ਼ੀ ਕਰੋ.) ਜੇ ਤੁਸੀਂ ਕੋਸ਼ਿਸ਼ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਵੱਖਰੀ ਵਿਭਾਗੀ ਪ੍ਰਣਾਲੀ ਗਾਈਡਾਂ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਦੇ ਰੂਪ ਵਿੱਚ ਦੇਖੋ.

ਰਿਐਕਟਰ-ਰਾਊਟਰ : ਐਫਈਆਈਆਈ, ਇਹ v4 ਸੰਸਕਰਣ ਹੈ, ਜੋ ਕਿ ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ ਸਥਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਪਰੰਤੂ ਜੇ ਤੁਸੀਂ ਪੁਰਾਣੀ ਮੌਜੂਦਾ ਪ੍ਰੋਜੈਕਟ ਪ੍ਰਾਪਤ ਕੀਤਾ ਹੈ ਤਾਂ ਇਹ ਬਹੁਤ ਮਹੱਤਵਪੂਰਨ ਹੈ. ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਕਿ ਤੁਸੀਂ ਆਪਣੇ ਰੂਟਿੰਗ ਸਰਵਰ ਸਾਈਡ ਅਤੇ ਕਲਾਇੰਟ ਸਾਈਡ ਅਤੇ v4 ਨਾਲ - ਅਤੇ ਇਸ ਤੇ ਬਹੁਤ ਵਧੀਆ ਹੈ.

ਸਭ ਤੋਂ ਬਾਅਦ, ਜੇਕਰ ਤੁਹਾਨੂੰ ਡੇਟਾਬੇਸ ਕਾਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਤਾਂ? ਅਚਾਨਕ ਇਹ ਇੱਕ ਵੱਡਾ ਮੁੱਦਾ ਬਣ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਅਸਿੰਕ ਹੈ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਭਾਗ ਵਿੱਚ ਹੈ.

ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਕੀ ਨਿਰਭਰਤਾ ਦੀ ਲੋੜ ਹੈ - ਰਨਟਾਈਮ ਤੇ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਲੋੜ ਹੈ - ਅਤੇ ਤੁਹਾਡੇ ਕਲਾਇੰਟ ਨੂੰ ਸੇਵਾ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਨਿਰਭਰਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਤੁਹਾਨੂੰ ਦੇਣਾ ਪਵੇਗਾ.

ਮੌਜੂਦਾ ਹੱਲ਼

ਹੇਠਾਂ, ਸਿਮਲਟ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਮੌਜੂਦਾ ਸਮੇਂ ਦੇ ਹੱਲਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰਦੇ ਹਨ.

ਅੱਗੇ. ਜੇ ਐਸ

ਅਸੀਂ ਕਿਤੇ ਵੀ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਜੇ ਤੁਸੀਂ ਉਤਪਾਦਨ ਚਾਹੁੰਦੇ ਹੋ, ਸਰਵਰ-ਪਾਸੇ-ਪੇਸ਼ ਕੀਤੇ ਰੀਕਾਰਡ ਕੋਡ ਜਾਂ ਯੂਨੀਵਰਸਲ ਐਪ, ਸਿਮਟ] ਉਹ ਥਾਂ ਹੈ ਜਿੱਥੇ ਤੁਸੀਂ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ. ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ, ਇਹ ਸਾਫ ਹੁੰਦਾ ਹੈ, ਅਤੇ ਇਹ ਜਾਯਟ ਨੂੰ ਸਮਰਥਨ ਦੇ ਰਿਹਾ ਹੈ.

ਸਿਮਟਲ, ਇਹ ਸੋਚਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਟੂਲਸਚੈਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪੈਂਦੀ ਹੈ, ਅਤੇ ਉਹ ਅਸਿੰਕ ਡੈਟਾ ਲੋਡਿੰਗ ਨਾਲ ਕਿਵੇਂ ਨਜਿੱਠਦੇ ਹਨ, ਇਹ ਲਚਕਦਾਰ ਨਹੀਂ ਹੈ.

ਇਸ ਡਾਇਰੈਕਟ ਨਕਲ ਨੂੰ ਮੀਮਟ ਰੈਪੋ ਦਸਤਾਵੇਜ਼ਾਂ ਤੋਂ ਦੇਖੋ:

     ਆਯਾਤ 'ਪ੍ਰਤੀਕਿਰਿਆ'ਐਕਸਪੋਰਟ ਡਿਫਾਲਟ ਕਲਾਸ ਰਿਐਕਟਰ ਵਧਾਉਂਦਾ ਹੈ. ਕੰਪੋਨੈਂਟ {ਸਥਿਰ async getInitialProps ({req}) {ਵਾਪਸੀ ਰਕਮ? {userAgent: req. ਸਿਰਲੇਖ ['ਉਪਭੋਗਤਾ-ਏਜੰਟ']}: {userAgent: navigator. userAgent}}ਦੇਣਾ ਹੈ    {ਵਾਪਸੀ  
ਹੈਲੋ ਵਰਲਡ {ਇਹ. ਖਿਡੌਣੇ userAgent}
}}

GetInitialProps ਉਹ ਕੁੰਜੀ ਹੈ, ਜੋ ਇੱਕ ਵਾਅਦਾ ਦਿੰਦਾ ਹੈ ਜੋ ਇਕ ਵਸਤੂ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਕਰਦਾ ਹੈ ਜੋ ਕਿ ਰੈਂਪ ਭਰਦੀ ਹੈ, ਅਤੇ ਕੇਵਲ ਇੱਕ ਪੰਨੇ 'ਤੇ. ਕੀ ਹੈ ਸ਼ਾਨਦਾਰ ਉਹ ਹੈ ਜੋ ਉਹਨਾਂ ਦੇ ਟੂਲਸਚੈਨ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਹੈ: ਇਸ ਨੂੰ ਜੋੜੋ ਅਤੇ ਇਹ ਕੰਮ ਕਰਦਾ ਹੈ, ਕੋਈ ਕੰਮ ਦੀ ਲੋੜ ਨਹੀਂ!

ਤਾਂ ਤੁਸੀਂ ਡੇਟਾਬੇਸ ਡਾਟਾ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ? ਤੁਸੀਂ ਇੱਕ API ਕਾਲ ਕਰੋ. ਤੁਸੀਂ ਨਹੀਂ ਕਰਨਾ ਚਾਹੁੰਦੇ? ਠੀਕ ਹੈ, ਇਹ ਬਹੁਤ ਬੁਰਾ ਹੈ. (ਠੀਕ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਕਸਟਮ ਚੀਜ਼ਾਂ ਜੋੜ ਸਕਦੇ ਹੋ, ਪਰ ਤੁਹਾਨੂੰ ਆਪਣੇ ਆਪ ਇਸਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲਾਗੂ ਕਰਨਾ ਪਵੇਗਾ.) ਜੇ ਤੁਸੀਂ ਇਸ ਬਾਰੇ ਸੋਚਦੇ ਹੋ, ਤਾਂ ਇਹ ਬਹੁਤ ਹੀ ਵਾਜਬ ਹੈ ਅਤੇ ਆਮ ਤੌਰ ਤੇ ਬੋਲਣ ਵਾਲੇ, ਚੰਗਾ ਅਭਿਆਸ ਹੈ, ਨਹੀਂ ਤਾਂ, ਤੁਹਾਡਾ ਕਲਾਇਟ ਅਜੇ ਵੀ ਇੱਕੋ ਹੀ API ਕਾਲ ਅਤੇ ਤੁਹਾਡੇ ਸਰਵਰ ਉੱਤੇ ਲੈਟਿਨੈਂਸੀ ਲਾਜ਼ਮੀ ਹੈ.

ਮਿਡਲ ਵੀ ਜਿਸ ਦੀ ਤੁਹਾਡੀ ਪਹੁੰਚ ਹੈ ਵਿੱਚ ਹੀ ਸੀਮਿਤ ਹੈ - ਪਰ ਕੇਵਲ ਬੇਨਤੀ ਦੀ ਇਕਾਈ; ਅਤੇ ਫਿਰ, ਇਹ ਚੰਗਾ ਅਭਿਆਸ ਵਰਗਾ ਲੱਗਦਾ ਹੈ, ਕਿਉਕਿ ਤੁਹਾਡੇ ਕੋਲ ਤੁਹਾਡੀ ਸਥਿਤੀ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਹੈ, ਜੋ ਕਿ ਤੁਹਾਡੇ ਸਰਵਰ ਨਾਲ ਬਨਾਮ ਬਾਹਰੀ ਤੌਰ ਤੇ ਵੱਖ ਵੱਖ ਹੋਵੇਗੀ. ਓਹ, ਅਤੇ ਜੇ ਤੁਸੀਂ ਇਸ ਨੂੰ ਪਹਿਲਾਂ ਨਹੀਂ ਫੜਿਆ ਸੀ, ਤਾਂ ਇਹ ਸਿਰਫ ਉੱਚ ਪੱਧਰੀ ਪੱਟੀ ਦੇ ਭਾਗਾਂ ਉੱਤੇ ਕੰਮ ਕਰਦਾ ਹੈ.

ਰੈੱਡਕੌਕ ਕਨੈਕਟ

ਰੈੱਡਕੌਕ ਕਨੈਕਟ ਇਕ ਬਹੁਤ ਹੀ ਦਲੇਰੀ ਵਾਲਾ ਸਰਵਰ-ਸਾਈਡ ਰੈਂਡਰਰ ਹੈ, ਜਿਸਦੇ ਨਾਲ ਇਕ ਸ਼ਾਨਦਾਰ ਦਰਸ਼ਨ ਹੁੰਦਾ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ ਉਹ ਸਾਰੇ ਸਾਧਨ ਨਹੀਂ ਵਰਤਦੇ ਜੋ ਉਹ ਦੱਸਦੇ ਹਨ, ਤਾਂ ਇਹ ਤੁਹਾਡੇ ਲਈ ਨਹੀਂ ਹੋ ਸਕਦਾ. ਇਸ ਪੈਕੇਜ਼ ਵਿੱਚ ਕਾਫੀ ਮਾਤਰਾ ਵਿੱਚ, ਪਰ ਇਹ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਹੈ ਅਤੇ ਰਾਊਟਰ v4 ਪ੍ਰਤੀ ਰੀਕ ਪ੍ਰਤੀ ਓਪਰੇਟਿੰਗ ਨਹੀਂ ਹੈ. ਇਸ ਲਈ ਬਹੁਤ ਸੈਟਅੱਪ ਕਰੋ, ਪਰ ਕੁਝ ਸਬਕ ਸਿੱਖਣ ਲਈ ਸਾਨੂੰ ਸਭ ਤੋਂ ਵੱਧ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਲੈਣਾ ਚਾਹੀਦਾ ਹੈ:

     // 1. ਆਪਣੇ ਡੇਟਾ ਨੂੰ ਕਨੈਕਟ ਕਰੋ, ਜਿਵੇਂ ਕਿ react-redux @connect@asyncConnect ([{ਕੀ: 'ਲੰਚ',ਵਾਅਦਾ: ({ਪਾਰਾ, ਮਦਦਗਾਰ}) => ਵਾਅਦਾ ਹੱਲ ਕਰੋ ({id: 1, ਨਾਮ: 'ਬੋਰਸ਼'})}])ਕਲਾਸ ਐਪ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ {ਦੇਣਾ ਹੈ   {2. 2. ਐਕਸਪੋਰਟ ਡੈਟਾ ਜਿਵੇਂ ਕਿ ਪ੍ਰੋਮਜ਼ਸੰਮਤ ਦੁਪਹਿਰ ਦਾ = ਇਹ. ਖਿਡੌਣੇ ਦੁਪਹਿਰ ਦਾ ਖਾਣਾਵਾਪਸੀ ( 
{ਲੰਚ. name}
)}}

ਸਜਾਵਟਸ ਜਾਵਾ-ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਮਿਆਰੀ ਨਹੀਂ ਹਨ. ਉਹ ਲਿਖਤ ਦੇ ਸਮੇਂ ਪੜਾਅ 2 ਹੁੰਦੇ ਹਨ, ਇਸ ਲਈ ਆਪਣੇ ਵਿਵੇਕ ਤੇ ਵਰਤੋਂ ਕਰੋ. ਇਹ ਉੱਚ-ਕ੍ਰਮ ਦੇ ਭਾਗਾਂ ਨੂੰ ਜੋੜਨ ਦਾ ਇਕ ਹੋਰ ਤਰੀਕਾ ਹੈ. ਇਹ ਵਿਚਾਰ ਬਹੁਤ ਅਸਾਨ ਹੈ: ਤੁਹਾਡੇ ਰੈਂਪ ਨੂੰ ਅੱਗੇ ਕੀ ਦੇਣਾ ਹੈ, ਅਤੇ ਉਸ ਤੋਂ ਬਾਅਦ ਤੁਹਾਡੇ ਕੋਲ ਵਾਅਦਿਆਂ ਦੀ ਇਕ ਸੂਚੀ ਹੈ, ਜਿਸ ਦਾ ਹੱਲ ਹੈ ਅਤੇ ਪਾਸ ਹੋ ਜਾਂਦਾ ਹੈ. ਇਹ ਬਹੁਤ ਵਧੀਆ ਹੈ. ਇਕ ਬਦਲ ਦਾ ਅਰਥ ਕੇਵਲ ਇਹ ਹੈ:

     @ ਏਸਿਨਕ ਕਨੈਕਟ ([{ਦੁਪਹਿਰ ਦਾ ਖਾਣਾ: ({ਪਾਰਾ, ਮਦਦਗਾਰ}} => ਵਾਅਦਾ ਹੱਲ ਕਰੋ ({id: 1, ਨਾਮ: 'ਬੋਰਸ਼'})}])    

ਇਹ ਬਹੁਤ ਸਾਰੇ ਮੁੱਦਿਆਂ ਦੇ ਬਿਨਾਂ ਸੈਮਟਾਲ ਦੇ ਨਾਲ ਸੰਭਵ ਹੈ.

ਰਿਐਕ-ਫ੍ਰੰਟਲੋਡ

ਪ੍ਰਤੀਕਰਮ - ਫਰੰਟਲੋਡ ਰੇਪੋ ਕੋਲ ਬਹੁਤ ਸਾਰੇ ਦਸਤਾਵੇਜ਼ ਜਾਂ ਵਿਆਖਿਆ ਨਹੀਂ ਹਨ, ਪਰ ਸ਼ਾਇਦ ਸਭ ਤੋਂ ਵਧੀਆ ਸਮਝ ਮੈਂ ਜਾਂਚਾਂ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ (ਜਿਵੇਂ ਕਿ ਇਹ ਇਕ)
ਅਤੇ ਕੇਵਲ ਸਰੋਤ ਕੋਡ ਨੂੰ ਪੜ੍ਹਨਾ. ਜਦੋਂ ਕੁਝ ਮਾਊਂਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਇਕ ਵਾਅਦਾ ਕਤਾਰ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਜਦੋਂ ਇਹ ਹੱਲ ਹੋ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਦੀ ਸੇਵਾ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਫਿਰ ((ਸਰਵਰ ਰੇਡਰਡਮਾਰਕੱਪ) => {ਕੰਸੋਲ log (ਸਰਵਰਮੁੜ-ਮੇਲਪੂ)})

ਬਿਹਤਰ ਹੱਲ ਲੱਭਣਾ

ਉਪਰੋਕਤ ਕੋਈ ਵੀ ਹੱਲ ਅਸਲ ਵਿੱਚ ਲਚਕਤਾ ਅਤੇ ਸਾਦਗੀ ਨਾਲ ਘਿਰਿਆ ਨਹੀਂ ਹੈ, ਮੈਂ ਇੱਕ ਲਾਇਬਰੇਰੀ ਤੋਂ ਉਮੀਦ ਕਰਦਾ ਹਾਂ, ਇਸ ਲਈ ਹੁਣ ਸੈਮਟੈਂਟ ਆਪਣੇ ਖੁਦ ਦੇ ਅਮਲ ਨੂੰ ਪੇਸ਼ ਕਰਦਾ ਹੈ. ਤੁਹਾਡਾ ਉਦੇਸ਼ ਕਿਸੇ ਪੈਕੇਜ ਨੂੰ ਲਿਖਣਾ ਨਹੀਂ ਹੈ, ਪਰ ਤੁਹਾਡੇ ਲਈ ਇਹ ਸਮਝਣਾ ਹੈ ਕਿ ਆਪਣੇ ਵਰਤੋਂ ਦੇ ਮਾਮਲੇ ਲਈ ਆਪਣੇ ਪੈਕੇਜ ਕਿਵੇਂ ਲਿਖਣੇ ਹਨ.

ਇਸ ਉਦਾਹਰਣ ਦੇ ਹੱਲ ਲਈ ਰੇਪੋ ਇੱਥੇ ਮੌਜੂਦ ਹੈ.

ਥਿਊਰੀ

ਇਸਦੇ ਪਿੱਛੇ ਦਾ ਸਿਧਾਂਤ ਸਿੱਧੇ ਤੌਰ ਤੇ ਸਿੱਧਾ ਹੈ, ਹਾਲਾਂਕਿ ਇਹ ਸੰਜਮੀ ਤੌਰ 'ਤੇ ਕੋਡ ਦੇ ਬਰਾਬਰ ਹੁੰਦਾ ਹੈ. ਇਹ ਉਹਨਾਂ ਵਿਚਾਰਾਂ ਬਾਰੇ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਦੇਣਾ ਹੈ ਜੋ ਅਸੀਂ ਵਿਚਾਰ ਰਹੇ ਹਾਂ.

ਸਰਵਰ ਨੂੰ ਦੋ ਵਾਰ ਰੀਐਕਟੇਟ ਕੋਡ ਦੇਣਾ ਹੋਵੇਗਾ, ਅਤੇ ਅਸੀਂ ਇਸ ਲਈ ਸਿਰਫ ਰੈਂਡਰਟੋਟਰਿੰਗ ਇਸਤੇਮਾਲ ਕਰਾਂਗੇ. ਅਸੀਂ ਪਹਿਲੇ ਅਤੇ ਦੂਜੇ ਰੈਂਡਰਸ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪ੍ਰਸੰਗ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਸਾਡੀ ਪਹਿਲੀ ਰੈਂਡਰ ਤੇ, ਅਸੀਂ ਕਿਸੇ ਵੀ API ਕਾਲਾਂ, ਵਾਅਦਿਆਂ ਅਤੇ ਅਸਿੰਕਰੋਨਸ ਕਾਰਜਾਂ ਨੂੰ ਕਿਸੇ ਵੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹਾਂ. ਸਾਡਾ ਦੂਜਾ ਰੈਂਡਰ ਤੇ, ਅਸੀਂ ਜੋ ਸਾਰਾ ਡਾਟਾ ਹਾਸਲ ਕੀਤਾ ਹੈ ਉਸਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ ਅਤੇ ਇਸ ਨੂੰ ਆਪਣੇ ਸੰਦਰਭ ਵਿੱਚ ਵਾਪਸ ਪਾਉਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਇਸ ਲਈ ਵਿਤਰਣ ਲਈ ਸਾਡਾ ਵਰਕਿੰਗ ਪੇਜ਼ ਪੇਸ਼ ਕਰਨਾ. ਇਸਦਾ ਇਹ ਵੀ ਮਤਲਬ ਹੈ ਕਿ ਐਪ ਕੋਡ ਨੂੰ ਸੰਦਰਭ ਦੇ ਆਧਾਰ ਤੇ (ਜਾਂ ਨਹੀਂ) ਕਿਰਿਆਵਾਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਜਿਵੇਂ ਕਿ ਸਰਵਰ ਤੇ ਜਾਂ ਕਲਾਇਟ ਤੇ, ਭਾਵੇਂ ਇਹ ਕਿਸੇ ਵੀ ਮਾਮਲੇ ਵਿੱਚ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ ਜਾਂ ਨਹੀਂ.

ਨਾਲ ਹੀ, ਅਸੀਂ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਇਸ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਸਕੀਏ. ਇਸ ਕੇਸ ਵਿੱਚ, ਅਸੀਂ ਸਾਡੇ ਸੰਦਰਭ ਦੇ ਅਧਾਰ ਤੇ ਸਥਿਤੀ ਕੋਡ ਅਤੇ ਸਿਰ ਬਦਲਦੇ ਹਾਂ

ਪਹਿਲਾਂ ਰੈਂਡਰ

ਤੁਹਾਡੇ ਕੋਡ ਦੇ ਅੰਦਰ, ਤੁਹਾਨੂੰ ਇਹ ਜਾਣਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ ਕਿ ਤੁਸੀਂ ਸਰਵਰ ਜਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਬੰਦ ਕਰ ਰਹੇ ਹੋ, ਅਤੇ ਆਦਰਸ਼ਕ ਤੌਰ ਤੇ ਤੁਸੀਂ ਇਸ ਤੇ ਗੁੰਝਲਦਾਰ ਕੰਟਰੋਲ ਚਾਹੁੰਦੇ ਹੋ. ਰੀਟੇਕ ਰਾਊਟਰ ਨਾਲ, ਤੁਹਾਨੂੰ ਇੱਕ ਸਥਿਰ ਸੰਦਰਭ ਪ੍ਰਸਾਰ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ, ਜੋ ਬਹੁਤ ਵਧੀਆ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਹੁਣ ਲਈ, ਅਸੀਂ ਹੁਣੇ ਹੀ ਇੱਕ ਡੇਟਾ ਔਬਜੈਕਟ ਅਤੇ ਬੇਨਤੀ ਡੇਟਾ ਨੂੰ ਜੋੜਿਆ ਹੈ ਜਿਵੇਂ ਅਸੀਂ ਅੱਗੇ ਤੋਂ ਸਿੱਖਿਆ ਹੈ. ਜੇ ਐਸ ਸਾਡੀ APIs ਸਰਵਰ ਅਤੇ ਕਲਾਈਂਟ ਵਿਚਕਾਰ ਵੱਖ ਵੱਖ ਹਨ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਆਪਣੇ ਕਲਾਈਂਟ-ਸਾਈਡ ਏਪੀਆਈ ਦੇ ਤੌਰ ਤੇ ਇਕੋ ਇੰਟਰਫੇਸ ਨਾਲ ਸਰਵਰ API ਮੁਹੱਈਆ ਕਰਨ ਦੀ ਲੋੜ ਹੈ:

     ਸੰਦਰਭ ਸੰਦਰਭ = {ਡਾਟਾ: {}, ਸਿਰ: [], ਰੇਕ, ਅਪੀ}const store = ਸੰਰਚਨਾਸਟੋਰ   renderToString ( <ਪ੍ਰਦਾਤਾ ਸਟੋਰ = {store}>      )    

ਦੂਜਾ ਰੈਂਡਰ

ਤੁਹਾਡੀ ਪਹਿਲੀ ਰੈਂਡਰ ਤੋਂ ਬਾਅਦ ਸੈਮੂਅਲ, ਅਸੀਂ ਉਹ ਬਕਾਇਆ ਵਾਅਦੇ ਕਬਜ਼ਾ ਕਰ ਲਵਾਂਗੇ ਅਤੇ ਉਦੋਂ ਤਕ ਉਡੀਕ ਕਰਾਂਗੇ ਜਦ ਤੱਕ ਇਹ ਵਾਅਦੇ ਨਹੀਂ ਕੀਤੇ ਜਾਂਦੇ, ਤਦ ਪ੍ਰਸਾਰ ਨੂੰ ਮੁੜ-ਪੇਸ਼ ਕਰਨਾ, ਅਪਡੇਟ ਕਰਨਾ:

     const ਸਵਿੱਚ = ਇਕਾਈ ਕੁੰਜੀਆਂ (ਸੰਦਰਭ ਡਾਟਾ)const ਵਾਅਦੇ = ਕੁੰਜੀਆਂ ਮੈਪ (k => ਸੰਦਰਭ. ਡੇਟਾ [k])ਕੋਸ਼ਿਸ਼ ਕਰੋ {const resolved = ਵਾਅਦਾ ਦੀ ਉਡੀਕ ਕਰੋ. ਸਭ (ਵਾਅਦੇ)ਹੱਲ ਕੀਤਾ ਗਿਆ forEach ((r, i) => ਪ੍ਰਸੰਗ. ਡੇਟਾ [ਕੁੰਜੀਆਂ [i]] = r)} catch (err) {// ਇਸ ਤੋਂ ਵਧੀਆ ਪੇਜ਼ ਪੇਸ਼ ਕਰਨਾ? ਜਾਂ ਅਸਲੀ ਮਾਰਕਅੱਪ ਨੂੰ ਭੇਜੋ, ਫਰੰਟ ਐਂਡ ਇਸ ਨੂੰ ਹੈਂਡਲ ਕਰੇ. ਇੱਥੇ ਬਹੁਤ ਸਾਰੇ ਵਿਕਲਪ ਹਨਵਾਪਸੀ ਰਿਜ਼ਰਵ ਸਥਿਤੀ (400) ਜੇਸਨ ({ਸੁਨੇਹਾ: "ਊਹ, ਕੁਝ ਚੀਜ਼ ਕੰਮ ਨਹੀਂ ਕਰਦੀ"})}const ਮਾਰਕਅਪ = ਰੈਂਡਰਟੋਸਟ੍ਰਿੰਗ ( <ਪ੍ਰਦਾਤਾ ਸਟੋਰ = {store}>      )    

ਐਪ

ਸਿਮਟਲ ਸਾਡੇ ਸਰਵਰ ਤੋਂ ਐਪੀ ਕੋਡ ਤੱਕ ਛਾਲ ਮਾਰਦਾ ਹੈ: ਸਾਡੇ ਕਿਸੇ ਵੀ ਹਿੱਸੇ ਵਿੱਚ ਰਾਊਟਰ ਕਨੈਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਹੁਣ ਇਹ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ:

     ਕਲਾਸ ਫਸਟਪੇਜ ਕੰਪੋਨੈਂਟ ਵਧਾਉਂਦਾ ਹੈ {async componentWillMount    {ਇਹ. state = {text: 'ਲੋਡਿੰਗ'}ਇਹ. _ ਹੈਂਡਲਡੇਟਾ ('ਪਹਿਲੇਪੇਜ')}async _handleData (ਕੁੰਜੀ) {const {staticContext} = ਇਹ ਖਿਡੌਣੇif (staticContext ਅਤੇ& staticContext ਡੇਟਾ [ਕੁੰਜੀ]) {const {text, data} = staticContext. ਡਾਟਾ [ਕੁੰਜੀ]ਇਹ. setState ({ਟੈਕਸਟ, ਡੇਟਾ})ਸਥਿਰ ਸੰਪਰਕ ਸਿਰ ਧੱਕਾ()} ਹੋਰ ਜੇ (ਸਟੇਟਿਕ ਕੋਂਸਟੈਕਸ) {ਸਥਿਰ ਸੰਪਰਕ ਡੇਟਾ [ਕੁੰਜੀ] = ਇਹ. _getData   } ਹੋਰ ਜੇ (! ਸਟੇਟਿਕ ਕਾਂਟੇਸੈਕਟ && ਵਿੰਡੋ. ਡਾਟਾ [ਕੁੰਜੀ]) {const {text, data} = window. ਡੈਟਾ [ਕੁੰਜੀ]ਇਹ. ਰਾਜ = { ਇਹ. ਰਾਜ, ਪਾਠ, ਡਾਟਾ}ਵਿੰਡੋ ਡੈਟਾ [ਕੁੰਜੀ] = ਨੱਲੀ} ਹੋਰ ਜੇ (! ਸਟੇਟਿਕ ਕੋਂਸਟੈਕਸ) {const {text, data} = ਇਸ ਦੀ ਉਡੀਕ ਕਰੋ. _getData   ਇਹ. ਖਿਡੌਣੇconst myApi = staticContext? ਸਥਿਰ ਸੰਪਰਕ api: apiconst resp = ਮੱਖਣ ਦੀ ਉਡੀਕ ਪੋਸਟ ਸੂਚੀ   const {data} = resp ਡੇਟਾconst {text} = myApi ਦਾ ਇੰਤਜ਼ਾਰ ਕਰੋ getMain   ਰਿਟਰਨ {ਟੈਕਸਟ, ਡੇਟਾ}}ਦੇਣਾ ਹੈ   {const text = ਇਹ ਰਾਜ ਪਾਠਵਾਪਸੀ (
{ਪਾਠ}
)}}

ਵਾਹ, ਇਹ ਬਹੁਤ ਗੁੰਝਲਦਾਰ ਕੋਡ ਹੈ. ਇਸ ਪੜਾਅ 'ਤੇ, ਤੁਸੀਂ ਸ਼ਾਇਦ ਇੱਕ ਹੋਰ ਰੀਲੇਅ ਪਹੁੰਚ ਨੂੰ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਜਿੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਡੇਟਾ ਨੂੰ ਇਕ ਹੋਰ ਭਾਗ ਵਿੱਚ ਵੱਖਰੇ ਕਰਦੇ ਹੋ.

ਇਹ ਭਾਗ ਉਹਨਾਂ ਚੀਜ਼ਾਂ ਦੁਆਰਾ ਬੁੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ - ਇੱਕ ਰੈਂਡਰ ਸਟੈਪ ਅਤੇ a ਕੰਪੋਨੈਂਟ ਵਾਈਲਮੌਨਟ ਪਗ਼. ਚਾਰ-ਪੜਾਅ ਜੇ ਬਿਆਨ ਵੱਖ-ਵੱਖ ਰਾਜਾਂ ਦਾ ਪਰਬੰਧ ਕਰਦਾ ਹੈ - ਪ੍ਰੀਫੈਚ, ਪੋਸਟ ਫੈਚ, ਰਿਸਰਵਰ ਰੈਂਡਰ, ਪੋਸਟ ਸਰਵਰ ਰੈਂਡਰ. ਸਾਡੇ ਡੇਟਾ ਦੇ ਲੋਡ ਹੋਣ ਦੇ ਬਾਅਦ ਅਸੀਂ ਸਿਰ ਵਿੱਚ ਜੋੜਦੇ ਹਾਂ.

ਅੰਤ ਵਿੱਚ, ਇੱਕ ਪ੍ਰਾਪਤ ਡੇਟਾ ਪਗ਼ ਹੈ. ਆਦਰਸ਼ਕ ਰੂਪ ਵਿੱਚ, ਤੁਹਾਡੇ API ਅਤੇ ਡੇਟਾਬੇਸ ਵਿੱਚ ਉਹੀ API ਹੈ, ਜੋ ਉਸੇ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਹੈ. ਤੁਸੀਂ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਇਸ ਨੂੰ ਹੋਰ ਜ਼ਿਆਦਾ ਵਿਕਸਿਤ ਕਰਨ ਲਈ ਇਨ੍ਹਾਂ ਨੂੰ ਸੈਮਟਾਲ ਜਾਂ ਸਾਗਾ ਵਿੱਚ ਇੱਕ ਕਾਰਵਾਈ ਵਿੱਚ ਪਾਉਣਾ ਚਾਹੋਗੇ.

ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ "ਸਰਵਰ-ਸਾਈਡ ਰਿਐਕਟਰ ਰੈਂਡਰਿੰਗ" ਅਤੇ ਰਿਪੋ ਰੀਕੈਕਟ ਸਰਵਰ-ਪਾਸੇ ਰੈਂਡਰਿੰਗ ਲੇਖ ਨੂੰ ਚੈੱਕ ਕਰੋ. ਯਾਦ ਰੱਖੋ, ਤੁਹਾਨੂੰ ਅਜੇ ਵੀ ਉਸ ਸਥਿਤੀ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡਾ ਡੇਟਾ ਲੋਡ ਨਹੀਂ ਹੋਇਆ ਹੈ! ਮੀਮੈਂਟ ਸਿਰਫ ਇੱਕ ਸਰਵਰ ਨੂੰ ਪਹਿਲੇ ਲੋਡ ਉੱਤੇ ਰੈਂਡਰ ਕਰਨ ਲਈ ਹੀ ਕਰ ਰਿਹਾ ਹੈ, ਇਸ ਲਈ ਤੁਸੀਂ ਅਗਲੇ ਪੰਨਿਆਂ ਤੇ ਲੋਡਿੰਗ ਸਕ੍ਰੀਨ ਦਿਖਾ ਰਹੇ ਹੋਵੋਗੇ.

ਬਦਲੋ ਸੂਚਕਾਂਕ. ਡੇਟਾ ਨੂੰ ਜੋੜਨ ਲਈ html

ਸਾਨੂੰ ਸਾਡੀ ਪੇਜ਼ ਬੇਨਤੀ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਕੋਈ ਪ੍ਰੀਫੈਚ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਭੇਜਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਇਸ ਲਈ ਅਸੀਂ ਇੱਕ ਸਕ੍ਰਿਪਟ ਟੈਗ ਸ਼ਾਮਲ ਕਰਾਂਗੇ:

   <ਸਕ੍ਰਿਪਟ>ਵਿੰਡੋ ਡੈਟਾ = {ਡਾਟਾ: {}} // ਇਹ ਅਸਲ ਵਿੱਚ ਕੋਈ ਫਰਕ ਨਹੀਂ ਪੈਂਦਾ ਕਿ ਇਹ ਕੀ ਹੈ, ਇਸ ਨੂੰ ਠੀਕ ਅਤੇ ਬਦਲੀ ਕਰ ਦਿਓ    

ਸੇਵਾਵਾਂ

ਤਦ ਸਾਨੂੰ ਇਸ ਨੂੰ ਆਪਣੀ ਖੋਜ ਵਿੱਚ ਤਬਦੀਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ. ਮਿਮਾਲਾ, HTML ਇੱਕ ਬਹੁਤ ਹੀ ਬੁਨਿਆਦੀ ਸਕਰਿਪਟ ਟੈਗ ਖੋਜਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਬੇਸ -64 ਉਸਨੂੰ ਐਨਕੋਡ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਏਗੀ ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ ਸਕ੍ਰਿਪਟ ਟੈਗ ਹਨ. ਵੀ, ਸਾਡੇ ਸਿਰਲੇਖ ਟੈਗ ਬਾਰੇ ਨਾ ਭੁੱਲੋ!

     // ਪਹਿਲਾਂ ਤਾਂconst head ਮਾਰਕਪ = ਸੰਦਰਭ ਸਿਰ ਮੈਪ (h => (renderToStaticMarkup (h))). ਜੁੜੋ ('')// ਫਿਰ ਪੇਸ਼ ਕਰਨਾconst RenderedApp = htmlData. ('{{SSR}}', ਮਾਰਕਅਪ ਨੂੰ ਤਬਦੀਲ ਕਰੋ ('{{head}}', ਹੈੱਡਮਾਰਕ ਬਦਲਣਾ). ('{data: {}}', JSON. (ਨਵੇਂ ਬਫਰ (JSON. stringify (ਸੰਦਰਭ ਡਾਟਾ)) ਨੂੰ ਬਦਲਣਾ. ਟਸਟ੍ਰਿੰਗ ('base64')))ਜੇ (ਪ੍ਰਸੰਗ. ਕੋਡ)Res ਸਥਿਤੀ (ਸੰਦਰਭ ਕੋਡ)Res ਭੇਜੋ (ਰੈਂਡਰਡੇਡ)    

ਅਸੀਂ ਸਥਿਤੀ ਕੋਡ ਬਦਲਾਵਾਂ ਨੂੰ ਵੀ ਸੰਭਾਲਦੇ ਹਾਂ - ਉਦਾਹਰਣ ਵਜੋਂ, 404 ਦੇ ਲਈ - ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕੋਲ 404 ਪੰਨੇ ਹੋਣ ਤਾਂ ਤੁਸੀਂ ਇਹ ਕਰ ਸਕਦੇ ਹੋ:

     ਕਲਾਸ ਨੋਮੇਚ ਕੰਪੋਨੈਂਟ ਵਧਾਉਂਦਾ ਹੈ {componentWillMount    {const {staticContext} = ਇਹ ਖਿਡੌਣੇif (staticContext) {ਸਥਿਰ ਸੰਪਰਕ ਕੋਡ = 404}}ਦੇਣਾ ਹੈ   {ਵਾਪਸੀ ( 
ਮੁਆਫ ਕਰਨਾ, ਪੰਨਾ ਨਹੀਂ ਮਿਲਿਆ
)}}

ਸਿਫਾਰਸ਼ੀ ਕੋਰਸ

ਸੰਖੇਪ

ਜੇ ਤੁਸੀਂ ਨਿਸ਼ਚਤ ਨਹੀਂ ਹੋ ਕਿ ਤੁਸੀਂ ਕੀ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਸਿਰਫ ਅੱਗੇ ਵਰਤੋਂ. ਜੇ ਐਸ ਇਹ ਸਰਵਰ-ਪਾਸੇ ਰੈਂਡਰਿੰਗ ਅਤੇ ਯੂਨੀਵਰਸਲ ਐਪਲੀਕੇਸ਼ਨਾਂ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ, ਜਾਂ ਜੇ ਤੁਸੀਂ ਹਰ ਚੀਜ਼ ਨੂੰ ਹੱਥੀਂ ਕਰਨ ਦੀ ਲਚੀਲਾਪਤਾ ਚਾਹੁੰਦੇ ਹੋ, ਜਿਸ ਤਰ੍ਹਾਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ. ਇੱਕ ਉਦਾਹਰਨ ਵਿੱਚ ਇਹ ਸ਼ਾਮਲ ਹੋ ਸਕਦਾ ਹੈ ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਪੰਨੇ ਦੇ ਪੱਧਰ ਦੀ ਬਜਾਏ ਉਪ-ਹਿੱਸਿਆਂ ਵਿੱਚ ਡੇਟਾ ਲਿਆਉਣਾ ਹੈ

ਉਮੀਦ ਹੈ ਕਿ ਇਸ ਲੇਖ ਨੇ ਤੁਹਾਡੇ ਰਾਹ 'ਤੇ ਤੁਹਾਡੀ ਮਦਦ ਕੀਤੀ ਹੈ! ਇੱਕ ਕਾਰਜਸ਼ੀਲ ਸਥਾਪਨ ਲਈ ਸਿਮਟਲ ਰੈਪੋ ਨੂੰ ਚੈੱਕਅਪ ਕਰਨਾ ਨਾ ਭੁੱਲੋ.

Dealing with Asynchronous APIs in Server-rendered ReactDealing with Asynchronous APIs in Server-rendered ReactRelated Topics:
ES6Raw Semalt
ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਿਲਆਂ ਲਈ ਿਸੱਿਖਆ ਦਾ ਵਧੀਆ ਤਰੀਕਾ
ਵੇਸ ਬੋਸ
ਤੁਹਾਨੂੰ ਅਸਲ ਦੁਨੀਆਂ ਬਣਾਉਣ ਲਈ ਇਕ ਕਦਮ-ਦਰ-ਕਦਮ ਸਿਖਲਾਈ ਕੋਰਸ. ਕੂਪਨ ਕੋਡ 'SITEPOINT' ਨੂੰ ਚੈੱਕਅਪ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ 25% ਬੰਦ ਦਾ ਉਪਯੋਗ ਕਰੋ.

March 1, 2018