Nuxt.jsで静的サイト開発時のSNSボタンの実装
目次
Nuxt.jsを使って静的サイトを初めて開発しましたが、かなり良かったです。
そのときにTweetボタン、facebookのいいねボタンをまとめたsnsコンポーネントを作っていたらエラーがでたので、そのログです。
<!-- Sns-warn.vue -->
<template>
<div class="sns">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<div class="fb-like" data-href="https://miobiki.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
<div id="fb-root"></div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</div>
</template>以前使ったHTMLをそのまま持ってきたのですが、これだとスクリプトで要素が書き換わるのでSSR時との違いを注意されるみたいです。
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
ちょっと急いでいたので注意されるだけなら無視しようかと思ったのですが、facebookボタンの方は残念ながら表示されないです。
そんな時は、SSRをしないように<no-ssr>コンポーネントで囲ってあげると解決しました。
<!-- Sns.vue -->
<template>
<no-ssr>
<div class="sns">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
<div class="fb-like" data-href="https://miobiki.com/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
<div id="fb-root"></div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</div>
</no-ssr>
</template>Nuxt.jsでの静的サイト開発はけっこう感動したのでの感想も別記事で書きたいと思います。