• ホーム
  • IT関連
  • 既存のWordPressをプラグイン未使用で簡単にSSR(サーバーサイドレンダリング)
既存のWordPressをプラグイン未使用で簡単にSSR(サーバーサイドレンダリング)をはてなブックマークに追加

既存のWordPressをプラグイン未使用で簡単にSSR(サーバーサイドレンダリング)

今更な感じもしますが、SPAはSingle Page Applicationシングルページアプリケーション）の略称になります。

単一ページで構成されページ遷移を行わず、同一ページ内でコンテンツの表示を切り替えていきます。
Wordpressでもプラグインもありますが、未使用でも結構簡単に対応可能です。（以前途中まで記載して下書きのままになっていた為、今更ですが追記して公開しました）

REST APIを普通に使用してクライアント側で構築しても良いですが、

WPのテンプレートレイアウトが ヘッダー、ナビ、フッター、メインコンテンツ等切り分けてテンプレート化できていれば、 テンプレートを利用してHTMLタグをデータとして返す形にすれば簡単にSPAの欠点も補える、SSR(サーバーサイドレンダリング)として実装可能です。 ※NextやNuxt等のサーバー側もクライアントの構築コード（javascript）を用いて生成する狭義のSSR(サーバーサイドレンダリング)としては少し違うかもしれませんが、 最初は全てをサーバー側でHTML生成し、それ以降は変更箇所（本文コンテンツや一覧部分）のみを動的に構築していくと言う意味でのSSR(サーバーサイドレンダリング)が実装可能です（基本的にはjavascriptでの処理は動的に変わる部分を取得し置き換えるのみなのでHTMLの構築コードはサーバー側のみとなります）。


基本的な実装の考え方は
クライアント側は、ページ遷移を行っていたイベントをhistory.pushState()のURL設定とajaxでの書き換え用htmlの取得をできるように修正します。

サーバー側の処理としては、 例えば、 ”https://www.noribase.net/2020042389” の様なページ表示用のURLは今まで通りの仕組みとし https://www.noribase.net/2020042389.json とした場合は、jsonデータとして（必要であればそれぞれの構成要素も）を返す仕組みを組み込みます。

ただ、既存の処理のままですとそのままHTML出力してしまいますのでJsonとして返す為に ob_get_contents()関数を使用します。（jsonでなくhtmlのテキストデータで返すの有ればそのまま出力する形でも問題ありません） この関数を使用すると、出力用のバッファを変数に格納できます。 

if ( have_posts() ) :

        ob_start();//出力バッファリングを有効にします。

        while ( have_posts() ) :
        the_post();
            get_template_part('main/content', 'lst');


        endwhile;
        $tags= ob_get_contents();//出力バッファを変数に格納
        ob_end_clean();//出力バッファをクリア
    endif;
後は$tagsをjsonデータとして返すだけです。 REST APIのWP REST APIで独自エンドポイントを使用する形でも可能です。 その場合も 

$response = new WP_REST_Response(array('tags'=＞$tags),200);
のようにしてHTMLタグとして戻します。

この方法ですとhtmlタグでデータを取得するため、クライント側のJSの処理もメインコンテンツ部分を取得後置き換えるだけの単純な実装で可能です

既存のWordPressをプラグイン未使用で簡単にSSR(サーバーサイドレンダリング)をはてなブックマークに追加