Какой лучший способ запустить какой-то код только на стороне клиента?

Question

Я пытаюсь реализовать Firebase в Сапере. Я установил модули (@firebase/app, @firebase/auth, @firebase/firestore) и затем написал файл конфигурации:

import firebase from '@firebase/app';
import '@firebase/firestore'
import '@firebase/auth'

const config = {
...
};

// Initialize Firebase
firebase.initializeApp(config);
export { firebase };
// Initialize db
export const db = firebase.firestore();
export const auth = firebase.auth();

Когда я запускаю "npm run dev", я получаю сообщение о том, что эти модули Firebase предназначены только для клиентской части, а не для Node.js.

Итак, я попытался решить эту проблему разными способами, и пока что единственное, что работает, - это использование onMount.

  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
      // do some stuff
    })
  })

Сейчас это работает, но у меня есть 3 вопроса:

1) это правильный путь? 2) я должен удалить эти модули со стороны сервера или лучше их все равно оставить? 3) я должен использовать версию firebase как на стороне клиента, так и на стороне сервера, и использовать одну сторону клиента, чтобы получить все данные, которые различны для каждого посетителя и стороны сервера, для всех общих данных?

Answer 1

Я бы сказал, что вы довольно близки, но вы можете сохранить импорт onMount Перезвони:

<script>
import { auth } from '../firebase/config';
import { onMount } from 'svelte'

onMount(() => {
    auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
      // do some stuff
    })
})
</script>

Если вы сделаете это таким образом, ваш код firebase не будет вызываться во время SSR, и вам не придется иметь дело с загрузкой асинхронного модуля.

С учетом сказанного, я бы сказал, что размещение вашего кода Firebase в маршруте сервера и вызов этого маршрута от клиента, вероятно, является более чистым и эффективным способом сделать это.

Answer 2

Я бы проверил process.browser

  onMount(async () => {
    if (process.browser) {
      const {auth} = await import('../firebase/config');
      auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
        // do some stuff
      })
    }
  })

или

if (process.browser) {
  onMount(async () => {
    const {auth} = await import('../firebase/config');
    auth.signInWithEmailAndPassword("[e-mail]", "test").then((res) => {
      // do some stuff
    })
  })
}

Answer 3

Вы можете использовать:

      typeof window === 'undefined' // server
typeof window !== 'undefined' // client

Источник