# localStorage is not defined に遭遇した時の対応

ReferenceError
localStorage is not defined

spa で作ったプログラムを universal に切り替えて SSR で HP 速く表示することを目指しました。
SPA モードでは問題なく動いていたプログラムが localStorage is not defined エラー
localstorage はブラウザ側しかないのに、サーバーレンダリングされたことが原因はわかるけど
SPA に切り替えてれば、動くこともわかるけど
SSR 使いたい！ SSR 使いたいから SPA から~~わざわざ~~切り替えようとしているから

# window document が undefined

これは、サーバーサイドのレンダリングに起因します。クライアントサイドでのみリソースをインポートしたい時は process.client 変数を使用する必要があります。

process.clientで if 判断

if (process.client) { require('external_library') }

# ssr サポートしていない plugin 使ってないか？

nuxt.config.js チェック

export default {
  plugins: [
    { src: "~/plugins/both-sides.js" },
    { src: "~/plugins/client-only.js", mode: "client" },
    { src: "~/plugins/server-only.js", mode: "server" },
  ],
};

SSR したくないプラグインはmode:'client'追加　(Nuxt.js 2.4 以降)

ssr：false は次のメジャーリリースでは非推奨に

2020-05-22 3年前

nuxtjs

関連記事

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

Nuxtjs build WARNING in entrypoint size limit

Nuxtjs build で entrypoint size limit warning エラー発生...

Nuxtjs axios リクエストのヘッダー設定

Nuxtjs axios 通信毎に onRequest に header 設定したい...

Nuxtjs titleTemplate の設定

Nuxtjsのheadにtitleのtemplate使って設定する方法...

Nuxt.js でフロントエンドのカテゴリ選択

バックエンドLaravelとフロントエンドNuxtjsでカテゴリーの一覧表示と選択したら子カテゴリー...

楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天GOLDにNuxtjs製HPデプロイ公開!楽天GOLDのFTP操作とNuxtjsで作成したページ...

web 開発でよく使うリダイレクトと nuxtjs redirect

リダイレクトコード、恒久リダイレクト一時的リダイレクトのいろいろをまとめました。...

nuxtjs の wpa を実装した時のメモ

3分でできるnuxtjs使ってwpa設定 @nuxtjs/wpaモジュール入れて設定追加して画像一枚...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs のページごと head の title description 変更

nuxtjsのhead内titleとdescription動的変更してSEOパワーアップしていこう！...

Nuxtjs に iview 4.0 入れた動かしてみた

日本には普及していない iview がバージョン 4.0 リリースしました。UI フレームワークを ...