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

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


Jawaban

Mengacu di penggunaan npmjs react helmet async

Masalah lokasi bukan tergantung struktur folder kamu sepertinya,
tapi tergantung di mana membutuhkan (mau memakai react helmet ini)

contoh penggunaan juga ada di sini

import React from 'react';
import ReactDOM from 'react-dom';
import { Helmet, HelmetProvider } from 'react-helmet-async';

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

ReactDOM.hydrate(
  app,
  document.getElementById(‘app’)
);

Contoh penggunaan server


import React from 'react';
import { renderToString } from 'react-dom/server';
import { Helmet, HelmetProvider } from 'react-helmet-async';

const helmetContext = {};

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

const html = renderToString(app);

const { helmet } = helmetContext;

// helmet.title.toString() etc…
avatar hilmanski

@hilmanski

2514 Kontribusi 2073 Poin

  • Contoh penggunaan di server tuh si taruh di backend atau di frontend bang - @maszgalang
  • kalau yang server, berarti di backend, saya belum pernah pakai ya, jadi cuma menebak dan cek dokumentasi aja. Dicoba aja dulu, - @hilmanski


Server itu ditaruh dimana bang? Itu sg saya bingung
avatar maszgalang

@maszgalang

297 Kontribusi 80 Poin


avatar hilmanski

@hilmanski

2514 Kontribusi 2073 Poin

  • 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 ? - @maszgalang


Login untuk gabung berdiskusi