instalasi server site rendering menggunakan React-Helmet-Async

hi guys ingin pertanya ada yang tau atau lebih tepatnya mengimplementasikan react-Helmet-Async pada reactjs ?

sebelumnya struktur folder saya seperti iini

-backend(folder)
--server.js
-frontend (folder)
-- admin (folder)
-- client(folder)
-package.json(backend)

dimanakah saya harus mengimplementasikanya ? dan contoh scriptnya bagaimana ?

https://stackoverflow.com/questions/66844433/how-to-implemented-react-helmet-async-in-serverside-rendering

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

aplikasi yang kamu buat seperti apa? menggunakan SSR? atau ini sistem API nodenya cuma konsumsi? atau seperti apa?

3 Jawaban:

<div>Mengacu di penggunaan<a href="https://www.npmjs.com/package/react-helmet-async"> npmjs react helmet async</a><br><br>Masalah lokasi bukan tergantung struktur folder kamu sepertinya,<br>tapi tergantung di mana membutuhkan (mau memakai react helmet ini)<br><br>contoh penggunaan juga ada di sini<br><br></div><pre>import React from 'react'; import ReactDOM from 'react-dom'; import { Helmet, HelmetProvider } from 'react-helmet-async';

const app = ( &lt;HelmetProvider&gt; &lt;App&gt; &lt;Helmet&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;link rel="canonical" href="https://www.tacobell.com/" /&gt; &lt;/Helmet&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;/App&gt; &lt;/HelmetProvider&gt; );

ReactDOM.hydrate( app, document.getElementById(‘app’) );</pre><div><br>Contoh penggunaan server<br><br><br></div><pre>import React from 'react'; import { renderToString } from 'react-dom/server'; import { Helmet, HelmetProvider } from 'react-helmet-async';

const helmetContext = {};

const app = ( &lt;HelmetProvider context={helmetContext}&gt; &lt;App&gt; &lt;Helmet&gt; &lt;title&gt;Hello World&lt;/title&gt; &lt;link rel="canonical" href="https://www.tacobell.com/" /&gt; &lt;/Helmet&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;/App&gt; &lt;/HelmetProvider&gt; );

const html = renderToString(app);

const { helmet } = helmetContext;

// helmet.title.toString() etc…</pre>

avatar hilmanski
@hilmanski

2685 Kontribusi 2135 Poin

Dipost 3 tahun yang lalu

Tanggapan

Contoh penggunaan di server tuh si taruh di backend atau di frontend bang

kalau yang server, berarti di backend, saya belum pernah pakai ya, jadi cuma menebak dan cek dokumentasi aja. Dicoba aja dulu,

<div>Server itu ditaruh dimana bang? Itu sg saya bingung</div>

avatar maszgalang
@maszgalang

297 Kontribusi 80 Poin

Dipost 3 tahun yang lalu

<div>Coba cek link ini mungkin membantu<br><a href="https://blog.logrocket.com/search-optimized-spas-react-helmet/">https://blog.logrocket.com/search-optimized-spas-react-helmet/</a></div>

avatar hilmanski
@hilmanski

2685 Kontribusi 2135 Poin

Dipost 3 tahun yang lalu

Tanggapan

penempatanya sama seperti react-helmet brarti ? tapi kalau dengan structure file yg ane punya apakah bisa dicall react from react dari folder frontend >client ke backend server.js ?

Login untuk ikut Jawaban